以紮根理論探索微互動的設計手法

Use Grounded Theory to Explore the Design Tool of Microinteractions

陳圳卿(Chun-Ching Chen)；馬嘉陽(Jia Yang Ma)

微互動 ； 紮根理論 ； 設計手法 ； 動態隱喻 ； 工作坊 ； Microinteractions ； Grounded Theory ； Design Tool ； Motion Metaphor ； Interface Design

設計學報

27卷2期（2022 / 06 / 01）

1 - 23

繁體中文

微互動是存在於介面內容之間的轉換，短暫的動態過渡可藉由不同的組合方式和變換呈現多樣化的效果。在微互動的設計手法上，若採行與靜態GUI相一致的設計方法是尚未達成共識的議題。本研究透過紮根理論對微互動所能產生的功能效用與設計表徵進行檢視，以建構有效的微互動設計模式與手法為目標。研究設計樣本篩選、理論建構與手法驗證的三階段實驗：首先透過使用者測試獲得具代表性的15款微互動樣本；其次經由專家訪談對樣本進行逐一分析後，使用紮根理論的研究方法對文本執行編碼與提取設計手法的範疇；研究最後使用設計工作坊的形式將所歸納出的微互動設計手法進行應用性與操作性方面的驗證，並透過「非結構性觀察」與「個別訪談」輔助檢視設計實踐過程。研究結果共統整出39個自由節點與16個次範疇，透過相互關係的勾稽統整出「提取功能」和「設計表徵」兩大主要範疇。其中，「提取功能」顯示了微互動在內容預期、視覺引導、因果連續與相互關係4個次範圍上具有效用；「設計表徵」方面則可歸類為收起型、展開型、翻頁型、覆蓋型、延展式、切換式、凸顯型、符號意義、格式塔、視覺化、數值展示與節奏／力共12個次範圍，各次範疇均可各自對應更為詳細的自由節點。在工作坊的操作中顯示，「提取功能」的編碼結果可做為創作刺激物並發散設計師的思維，而「設計表徵」則為設計創作提供了更具體的參考依據。本研究基於文本脈絡建立了微互動的設計手法並驗證其可行性，透過「功能」與「表徵」的相互運用為微互動的設計實踐提供系統化的設計參考。研究亦發現，使用以生活現象為雛形的動態隱喻（motion metaphor）做為微互動的設計手法較為合適，且可多著墨於對變化過程的細節性描述；此外，若在使用者熟悉的操作上增加小的創新點，則更有利於提升使用者體驗。

This research uses grounded theory to examine the functional utility and design representations that micro-interactions can produce, with the goal of constructing effective micro-interaction design methods. Micro-interactions exist between interface conversions, and dynamic effects can produce a variety of transformations and combinations. If static GUI methods are adopted, it is an issue that has not yet reached a consensus on the design and creation of micro-interactions. This research used a three-stage experiment of sample selection, theoretical construction, and means verification. First, the 15 most representative micro-interaction samples were obtained through quantitative methods, and then the samples were analyzed one by one through expert interviews. Afterwards, grounded theory was used to encode and extract the text, and a total of 39 free nodes and 16 sub-categories were unified, and then the two main categories of ＂extraction function＂ and ＂design representation＂ were unified through correlations. This study established a micro-interaction design method based on the textual context and verified its feasibility. Through the mutual application of ＂function＂ and ＂representation＂, it provided micro-interaction designers with a reference for systematic design methods. At the same time, from the induction of nodes, it can be inferred that micro-interactions are suitable for the use of motion metaphors inspired by life phenomena as a design method, and more attention is paid to the detailed description of the interface change process. Moreover, if the micro-interaction design can add small innovations to user-familiar interface operations, it is more conducive to improving user experience.

1. 王鴻祥, H. H.,洪瑞璘, J. L.(2011)。文創商品的隱喻設計模式。設計學報，16(4)，35-55。
   連結：
2. 洪偉肯, W. K.,陳玲鈴, L. L.(2010)。如何量測產品的矛盾語意。設計學報，15(4)，41-58。
   連結：
3. 馬嘉陽, J.,陳圳卿, C. C.(2019)。功能性過場動畫與情緒變化之關係探討。設計學報，24(1)，1-16。
   連結：
4. Andreas, K.,Tsiatsos, T.,Terzidou, T.,Pomportsis, A.(2010).Fostering collaborative learning insecond life: Metaphors and affordances.Computers & Education,55(2),603-615.
5. Ashbrook, D. L.(2010).Atlanta, Georgia,Georgia Institute of Technology.
6. Basten, F.,Ham, J.,Midden, C.,Gamberini, L.,Spagnolli, A.(2015).Does trigger location matter? The influence of localization and motivation on the persuasiveness of mobile purchase recommendations.Proceedings of 10th International Conference on Persuasive Technology,Chicago, IL:
7. Betz, S.,Hall, R.(2015).Self-archiving with ease in an institutional repository: Microinteractions and the user experience.Information Technology and Libraries,34(3),43-58.
8. Blackler, A.,Popovic, V.,Mahar, D.(2003).The nature of intuitive use of products: An experimental approach.Design Studies,24(6),491-506.
9. Britton, A.,Setchi, R.,Marsh, A.(2013).Intuitive interaction with multifunctional mobile interfaces.Journal of King Saud University-Computer and Information Sciences,25(2),187-196.
10. Buck, R.,Khan, M.,Fagan, M.,Coman, E.(2018).The user affective experience scale: A measure of emotions anticipated in response to pop-up computer warnings.International Journal of Human–Computer Interaction,34(1),25-34.
11. Chang, B. W.,Ungar, D.(1993).Animation: from cartoons to the user interface.Proceedings of the 6th Annual ACM Symposium on User Interface Software and Technology,Atlanta, GA:
12. Chen, C. H.,Li, S.(2020).The effect of visual feedback types on the wait indicator interface of a mobile application.Displays,61,1-10.
13. Chintalapani, G.,Plaisant, C.,Shneiderman, B.(2004).Extending the utility of treemaps with flexible hierarchy.Proceedings of 8th International Conference on Information Visualisation,London:
14. Constantiou, I. D.(2009).Consumer behaviour in the mobile telecommunications’ market: The individual’s adoption decision of innovative services.Telematics and Informatics,26(3),270-281.
15. Cooper, A.,Reimann, R.,Cronin, D.(2007).About face 3: The essentials of interaction design.Indianapolis, IN:Wiley Publishing.
16. Corbin, J.,Strauss, A.(2014).Basics of qualitative research: Techniques and procedures for developing grounded theory.Thousand Oaks, CA:Sage Publications.
17. Eames, C.,Carla, H.,Eames, D.(2007).100 quotes by Charles Eames.Los Angeles, CA:Eames Office.
18. Falkowska, J.,Kilijańska, B.,Sobecki, J.,Zerka, K.(2018).Microinteractions of forms inweb based systems usability and eye tracking metrics analysis.International Conference on Applied Human Factors and Ergonomics,Orlando, FL:
19. Franzoni, V.,Milani, A.,Mengoni, P.,Piccinato, F.(2020).Artificial intelligence visual metaphors in e-learning interfaces for learning analytics.Applied Sciences,10(20),71-95.
20. Ghiani, G.,Manca, M.,Paternò, F.,Santoro, C.(2017).Personalization of context-dependent applications through trigger-action rules.ACM Transactions on Computer-Human Interaction,24(2),1-33.
21. Harrison, A. W.,Rainer Jr, R. K.(1992).The influence of individual differences on skill in end-user computing.Journal of Management Information Systems,9(1),93-111.
22. Hekkert, P.,Cila, N.(2015).Handle with care! Why and how designers make use of product metaphors.Design Studies,40,196-217.
23. Hekkert, P.,Van Wieringen, P. C. W.(1996).The impact of level of expertise on the evaluation oforiginal and altered versions of post-impressionistic paintings.Acta psychologica,94(2),117-131.
24. Ishii, H.,Lakatos, D.,Bonanni, L.,Labrune, J. B.(2012).Radical atoms: Beyond tangible bits, toward transformable materials.Interactions,19(1),38-51.
25. Issara, W. (2017, March 21). Creating usability with motion: The UX in motion manifesto. Retrieved fromhttps://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc
26. Jung, H.,Wiltse, H.,Wiberg, M.,Stolterman, E.(2017).Metaphors, materialities, and affordances: Hybrid morphologies in the design of interactive artifacts.Design Studies,53,24-46.
27. Kang, S. R.,Lee, E.(2003).User experience: Beyond usability.Proceedings of the 6th Asian Design Conference,Tsukuba:
28. Kapros, E.,Kipp, K.(2016).Microinteractions and a gamification framework as a mechanism for capturing 21 century skills.Proceedings of the International Conference on Learning and Collaboration Technologies,Toronto:
29. Kim, B.,Choi, M.,Han, I.(2009).User behaviors toward mobile data services: The role of perceived fee and prior experience.Expert Systems with Applications,36(4),8528-8536.
30. Lakoff, G.,Johnson, M.(1980).Metaphors we live by.Chicago, IL:University of Chicago Press.
31. Ma, J. Y.,Chen, C. C.(2021).Evaluating user perception and emotion of microinteractions using a contradictory semantic scale.Journal of the Society for Information Display,30(2),103-114.
32. Macaranas, A.,Antle, A. N.,Riecke, B. E.(2015).What is intuitive interaction? Balancing users’ performance and satisfaction with natural user interfaces.Interacting with Computers,27(3),357-370.
33. McDaniel, R.(2015).Understanding microinteractions as applied research opportunities for information designers.Communication Design Quarterly Review,3(2),55-62.
34. Neale, D. C.,John, M. C.(1997).Handbook of human-computer interaction.Amsterdam:North Holland Publishing.
35. Norman, D. A.(2004).Emotional design: Why we love (or hate) everyday things.New York, NY:Basic Books.
36. Olwal, A.,Starner, T.,Mainini, G.(2020).E-textile microinteractions: Augmenting twist with flick, slide and grasp gestures for soft electronics.Proceedings of the 2020 CHI Conference on Human Factors in Computing Systems,New York, NY:
37. Preece, J.,Rogers, Y.,Sharp, H.(2002).Interaction design: Beyond human-computer interaction.New York, NYS:John Wiley & Sons.
38. Raento, M.,Oulasvirta, A.,Petit, R.,Toivonen, H.(2005).ContextPhone: A prototyping platform for context-aware mobile applications.IEEE pervasive computing,4(2),51-59.
39. Rasmussen, M. K.,Troiano, G. M.,Petersen, M. G.,Simonsen, J. G.,Hornbæ k, K.(2016).Sketching shape-changing interfaces: Exploring vocabulary, metaphors use, and affordances.Proceedings of the Conference on Human Factors in Computing Systems,San Jose,CA:
40. Rukhiran, M.,Netinant, P.(2020).A practical model from multidimensional layering: Personal finance information framework using mobile software interface operations.Journal of Information and Communication Technology,19(3),321-349.
41. Saffer, D.(2013).Microinteractions: Designing with details.New York, NY:O'Reilly Media.
42. Seckler, M.,Heinz, S.,Forde, S.,Tuch, A. N.,Opwis, K.(2015).Trust and distrust on the web: User experiences and website characteristics.Computers in Human Behavior,45,39-50.
43. Stol, K. J.,Ralph, P.,Fitzgerald, B.(2016).Grounded theory in software engineering research: A critical review and guidelines.Proceedings of the 38th International Conference on Software Engineering,Austin, TX:
44. Taylor, S.,Todd, P.(1995).Assessing IT usage: The role of prior experience.Management Information Systems Quarterly,19,561-570.
45. Veen, J.(2001).The art & science of web design.Indianapolis, IN:New Riders.
46. Xenakis, I.,Arnellos, A.(2013).The relation between interaction aesthetics and affordances.Design Studies,34(1),57-73.
47. Youn, J. H.,Seo, Y. H.,Oh, M. S.(2017).A study on UI design of social networking service messenger by using case analysis model.Journal of Information and Communication Convergence Engineering,15(2),104-111.
48. 胡幼慧, Y. H.(1996).質性研究：理論、方法及本土女性研究實例.臺北市=Taipei:巨流圖書股份有限公司=Chu Liu Book.
49. 游萬來, M. L.,葉博雄, P. H,高曰菖, Y. C(1997)。產品意象及其表徵設計的研究─以收音機為例。設計學報，2(1)，31-45。
50. 蕭瑞麟, R. L.(2020).不用數字的研究：質性研究的思辨脈絡.臺北市=Taipei:五南=Wu Nan.