進階搜尋


   電子論文尚未授權公開,紙本請查館藏目錄
(※如查詢不到或館藏狀況顯示「閉架不公開」,表示該本論文不在書庫,無法取用。)
系統識別號 U0026-0508202002082900
論文名稱(中文) 探討微互動之動畫式回饋於影音社群APP之使用者經驗
論文名稱(英文) Exploring the User Experience of Micro-interaction Animation Feedback in Video-based Social Media APP
校院名稱 成功大學
系所名稱(中) 工業設計學系
系所名稱(英) Department of Industrial Design
學年度 108
學期 2
出版年 109
研究生(中文) 鄭翔升
研究生(英文) Hsiang-Sheng Cheng
電子信箱 p36051032@gs.ncku.edu.tw
學號 P36051032
學位類別 碩士
語文別 英文
論文頁數 81頁
口試委員 指導教授-劉說芳
口試委員-吳昌祚
口試委員-陳重任
中文關鍵字 影音社群APP  微互動  動畫  使用者經驗 
英文關鍵字 Video-based Social Media APP  Microinteraction  Animation  User Experience 
學科別分類
中文摘要 行動裝置的出現,人機互動的方式也逐漸變得多元,讓介面的設計產生了更多的可能性,為了能讓視覺的互動變得更加直覺,「微互動」(Microinteraction)已成為了近年來改善互動的一種方式,其中以動畫的回饋方式最為常見,動畫回饋不僅能夠讓使用者的操作更加流暢,也能夠引發使用者對產品的興趣。隨著網際網路的發展,社群媒體已成為現代人溝通的重要媒介,從以往Facebook、Twitter等平台以文字為主的分享方式轉為以Instagram、Tik Tok等以相片及影片為主的方式。智慧型手機的發展也讓社群間的傳遞更加的靈活,要讓使用者持續的使用社群APP,良好的微互動是必不可少的元素。本研究針對 Home Page Like Icon 、Tab Bar Icon 、Page Change 及 Image Tap 等四組變項進行「有動畫」與「無動畫」之實驗,結果顯示在 Tab Bar Icon 中使用動畫回饋的方式能夠提升使用者經驗中的「吸引力」、「促進」以及「新穎」等構面。Page Change 中使用「有動畫」的方式能夠提高「明晰」及「效率」兩項構面,使用「無動畫」方式則能夠提高「促進」及「新穎」等構面。透過四組變項之「有動畫」平均數比較中發現 Home Page Like Icon 與 Image Tap 在「吸引力」、「明晰」、「效率」、「可靠性」以及「促進」之平均數皆高於 Page Change 且有顯著的差異,因此在 APP 原型開發時能夠優先對此兩組變項進行互動的編譯,以提升使用者體驗。
英文摘要 With the invention of mobile devices, the ways of human-computer interaction have gradually become diversified, which has created more possibilities for interface design. To make visual interaction more intuitive, "Microinteraction" has become a way to improve interaction, in which the animation feedback method is the most common. The animation feedback can make the user's operation smoother and arouse the user's interest in the product.
With the development of the Internet, social media has become an important way for modern people to communicate, from the traditional text-based sharing methods of Facebook, Twitter, and other platforms to Instagram and Tik Tok, which are shared by photos and videos. The development of mobile devices also makes communication more versatile. In order to make users continue to use social apps, a better microinteraction is an essential element.
The study conducted experiments with "animation" and "no animation" for four sets of variables: Home Page Like Icon, Tab Bar Icon, Page Change, and Image Tap. The results show that the use of animation feedback in Tab Bar Icon can improve "attractiveness", "stimulation," and "novelty" aspects of user experience. The use of "animation" in Page Change can improve the "clear" and "efficiency" aspects, and the use of "no animation" can improve the "stimulation" and "novelty" aspects. And through the comparison of the average number of "animations" of the four sets of variables, it is found that the average number of Home Page Like Icon and Image Tap in "attractiveness", "perspicuity", "efficiency", "dependability" and "stimulation" are higher than Page Change with significant differences. Therefore, in the APP prototype development, the two sets of variables can be preferentially compiled to enhance the user experience.
論文目次 摘要 i
SUMMARY ii
TABLE OF CONTENTS iii
LIST OF TABLES v
LIST OF FIGURES vi
LIST OF SYMBOLS AND ABBREVIATIONS vii
CHAPTER 1 INTRODUCTION 1
1.1 Background 1
1.2 Purpose 3
1.3 Limitation 3
CHAPTER 2 LITERATURE REVIEW 5
2.1 Microinteraction 5
2.1.1 Rules of Microinteraction 6
2.1.2 Animation of Microinteraction 7
2.1.3 Applying Animation Scenarios 9
2.2 Video-Based Social Media APP 9
2.2.1 Instagram 10
2.2.2 Tik Tok 11
2.3 User Experience 13
2.3.1 Elements of User Experience 13
2.3.2 User Experience Evaluation 15
2.4 Summary 18
CHAPTER 3 METHOD 19
3.1 Research Process 19
3.2 APP Building 20
3.2.1 Interface of Video-based Social Media APP 20
3.2.2 APP Interface Design 22
3.3 Research Instrument 23
3.4 Experiment Design 23
3.4.1 Subject 23
3.4.2 A/B Testing 24
3.4.3 Independent Variables 24
3.4.4 Questionnaire 25
3.5 Data Analysis Method 27
3.5.1 Reliability Analysis 27
3.5.2 Independent T-test 27
3.5.3 One-Way ANOVA 27
CHAPTER 4 RESULTS 28
4.1 Descriptive Statistic of Subjects 28
4.2 Variable Analysis 29
4.2.1 Home Page Like Icon 30
4.2.2 Tab Bar Icon 33
4.2.3 Page Change 37
4.2.4 Image Tap 41
4.2.5 One-Way ANOVA of Animation Mean Comparison 45
CHAPTER 5 CONCLUSION 52
5.1 Conclusions 52
5.1.1 Reliability Analysis of the UEQ 52
5.1.2 Means Comparison 52
5.2 Suggestions for Future Research 54
REFERENCES 56
Appendix A 60
Appendix B 62
參考文獻 吳統雄. (2018). 態度與行為研究的信度與效度:理論、應用、反省. Retrieved from http://tx.liberal.ntu.edu.tw/~PurpleWoo/Methodology/Analy-Reliability_Validity.htm
資策會. (2014). 逾87%網友透過行動裝置使用網路社群. Retrieved from https://mic.iii.org.tw/IndustryObservations_PressRelease02.aspx?sqno=367
蕭文龍. (2018). 統計分析入門與應用:SPSS中文版+SmartPLS 3(PLS-SEM)(第二版): 碁峯資訊.
Apple Inc. (2020). iOS Human Interface Guidelines. Retrieved from https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/animation/
Ashbrook, D. L. (2010). Enabling mobile microinteractions. Georgia Institute of Technology,
Babich, N. (2016). Microinteractions: The Secret of Great App Design. Retrieved from https://uxplanet.org/microinteractions-the-secret-to-great-app-design-4cfe70fbaccf#.7q3ss5cei
Babich, N. (2017). Using Animation to Improve Mobile App User Experience. Retrieved from https://www.shopify.com/partners/blog/using-animation-to-improve-mobile-app-user-experience
Bhattacherjee, A., & Premkumar, G. J. M. q. (2004). Understanding changes in belief and attitude toward information technology usage: A theoretical model and longitudinal test. 229-254.
Chevalier, F., Riche, N. H., Plaisant, C., Chalbi, A., & Hurter, C. (2016). Animations 25 Years Later: New Roles and Opportunities. Paper presented at the Proceedings of the International Working Conference on Advanced Visual Interfaces, Bari, Italy.
DeVillis, R. F. (1991). Scale development: Theory and applications. In: Newbury Park, CA: Sage.
Edwards, S. M. J. J. o. I. A. (2011). A social media mindset. 12(1), 1-3.
Fang, I.-C., & Fang, S.-C. J. I. J. o. M. C. (2016). Factors affecting consumer stickiness to continue using mobile applications. 14(5), 431-453.
Garrett, J. J. (2000). The elements of user experience.
Golod, I., Heidrich, F., Möllering, C., & Ziefle, M. (2013). Design principles of hand gesture interfaces for microinteractions. Paper presented at the Proceedings of the 6th International Conference on Designing Pleasurable Products and Interfaces.
Gonzalez, C., & Kasper, G. M. J. D. S. (1997). Animation in user interfaces designed for decision support systems: the effects of image abstraction, transition, and interactivity on decision quality. 28(4), 793-823.
Google Inc. (2020). The motion system. Retrieved from https://material.io/design/motion/the-motion-system.html#shared-axis
Guo, F. (2012). More Than Usability: The Four Elements of User Experience, Part I. Retrieved from https://www.uxmatters.com/mt/archives/2012/04/more-than-usability-the-four-elements-of-user-experience-part-i.php
Hassenzahl, M., & Tractinsky, N. J. B. (2006). User experience-a research agenda. 25(2), 91-97.
Huang, D. (2016). 完全了解 A/B 測試 ─ 只學初統也能做的資料分析. Retrieved from https://taweihuang.hpd.io/2016/09/25/%E5%AE%8C%E5%85%A8%E4%BA%86%E8%A7%A3-ab-%E6%B8%AC%E8%A9%A6-%E2%94%80-%E5%8F%AA%E5%AD%B8%E5%88%9D%E7%B5%B1%E4%B9%9F%E8%83%BD%E5%81%9A%E7%9A%84%E8%B3%87%E6%96%99%E5%88%86%E6%9E%90-1/
Huhtala, J., Sarjanoja, A.-H., M, J., #228, ntyj, #228, . . . #228. (2010). Animated UI transitions and perception of time: a user study on animated effects on a mobile screen. Paper presented at the Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, Atlanta, Georgia, USA.
Kaplan, A. M., & Haenlein, M. (2010). Users of the world, unite! The challenges and opportunities of Social Media. Business Horizons, 53(1), 59-68. doi:https://doi.org/10.1016/j.bushor.2009.09.003
Kraft, J. F., & Hurtienne, r. (2017). Transition animations support orientation in mobile interfaces without increased user effort. Paper presented at the Proceedings of the 19th International Conference on Human-Computer Interaction with Mobile Devices and Services, Vienna, Austria.
Liu, C., & Arnett, K. P. (2000). Exploring the factors associated with Web site success in the context of electronic commerce. Information & Management, 38(1), 23-33. doi:https://doi.org/10.1016/S0378-7206(00)00049-5
Marentakis, G., & Brewster, S. A. (2005). A comparison of feedback cues for enhancing pointing efficiency in interaction with spatial audio displays. Paper presented at the Proceedings of the 7th international conference on Human computer interaction with mobile devices & services, Salzburg, Austria.
Morville, P. (2004). User Experience Design. Retrieved from http://semanticstudios.com/user_experience_design/
Norman, D., & Nielsen, J. (1998). The Definition of User Experience (UX). Retrieved from https://www.nngroup.com/articles/definition-user-experience/
O'REILLY, L. (2014). Now Instagram Is Dominating Twitter In Another Hugely Important Way. Retrieved from https://www.businessinsider.com.au/instagram-engagement-rates-up-to-50-times-higher-than-twitter-socialbakers-finds-2014-12
Raacke, J., Bonds-Raacke, J. J. C., & behavior. (2008). MySpace and Facebook: Applying the uses and gratifications theory to exploring friend-networking sites. 11(2), 169-174.
Rauschenberger, M., Schrepp, M., Pérez Cota, M., Olschner, S., & Thomaschewski, J. (2013). Efficient measurement of the user experience of interactive products. How to use the user experience questionnaire (UEQ). Example: Spanish language version.
Saffer, D. (2013). Microinteractions.
Schrepp, M., Hinderks, A., & Thomaschewski, J. (2017). Construction of a Benchmark for the User Experience Questionnaire (UEQ). IJIMAI, 4(4), 40-44.
statista. (2020). Most popular social networks worldwide as of April 2020, ranked by number of active users (in millions). Retrieved from https://www.statista.com/statistics/272014/global-social-networks-ranked-by-number-of-users/
van der Heijden, H. (2003). Factors influencing the usage of websites: the case of a generic portal in The Netherlands. Information & Management, 40(6), 541-549. doi:https://doi.org/10.1016/S0378-7206(02)00079-4
Wikipedia. (2020a). 抖音. Retrieved from https://zh.wikipedia.org/wiki/%E6%8A%96%E9%9F%B3
Wikipedia. (2020b). Instagram. Retrieved from https://zh.wikipedia.org/wiki/Instagram
Zheng, Y., Wu, W., Cao, N., Qu, H., & Ni, L. M. (2018). Focus+context grouping for animated transitions. Journal of Visual Languages & Computing, 48, 61-69. doi:https://doi.org/10.1016/j.jvlc.2018.06.006
論文全文使用權限
  • 同意授權校內瀏覽/列印電子全文服務,於2023-08-01起公開。
  • 同意授權校外瀏覽/列印電子全文服務,於2025-08-01起公開。


  • 如您有疑問,請聯絡圖書館
    聯絡電話:(06)2757575#65773
    聯絡E-mail:etds@email.ncku.edu.tw