簡易檢索 / 詳目顯示

研究生: 鄭翔升
Cheng, Hsiang-Sheng
論文名稱: 探討微互動之動畫式回饋於影音社群APP之使用者經驗
Exploring the User Experience of Micro-interaction Animation Feedback in Video-based Social Media APP
指導教授: 劉說芳
Liu, Shuo-Fang
學位類別: 碩士
Master
系所名稱: 規劃與設計學院 - 工業設計學系
Department of Industrial Design
論文出版年: 2020
畢業學年度: 108
語文別: 英文
論文頁數: 81
中文關鍵詞: 影音社群APP微互動動畫使用者經驗
外文關鍵詞: Video-based Social Media APP, Microinteraction, Animation, User Experience
相關次數: 點閱:171下載:2
分享至:
查詢本校圖書館目錄 查詢臺灣博碩士論文知識加值系統 勘誤回報
  • 行動裝置的出現,人機互動的方式也逐漸變得多元,讓介面的設計產生了更多的可能性,為了能讓視覺的互動變得更加直覺,「微互動」(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公開
    QR CODE