Communicative Functions in Human-Computer Interface Design
A taxonomy of Functional Animation
Keywords:
animation, motion design, user experience, user interface design, visual designAbstract
Whenever a user performs a task or communicates via their computer or device, they are guided by visual cues to interact successfully with the interface. This human-computer interaction is, therefore, mediated by the communication established between designer and user through the texts, graphic elements, and animations that make up the visual design of the interface. Animation is an element of visual language of the graphical elements of an interface. This study aims to establish the functions of animation. We reviewed the literature and discussed the shortcomings identified in the existing taxonomies of functional animation. We then proposed an updated classification, partly inspired by the functions presented in Jakobson’s communication model. Based on a content analysis of the design guidelines from the leading mobile phone developers and comparing these sources, we propose the following list of categories: Identifying, Structural, Guide, Feedback, Didactic, Esthetic, and Emotive. This new taxonomy aims to contribute to the theoretical frameworks used in visual communication when studying interface design. It will be useful, for example, to help detect, classify, and assess the appropriateness of animations based on the functions they provide to an interface.References
Apple Computer, I. (1987). Human Interface Guidelines: The Apple Desktop Interface. Addison Wesley Publishing Company, Inc. http://archive.org/details/applehumaninterf00appl
Apple Inc. (n.d.). Themes—IOS - Human Interface Guidelines—Apple Developer. Retrieved July 6, 2018, from https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/#//apple_ref/doc/uid/TP40006556-CH57-SW1
Audi. (n.d.). User Interface / UI Animation / Functional Animation. Retrieved October 7, 2020, from https://www.audi.com/ci/en/guides/user-interface/ui-animation/functional-animation.html
Baecker, R. (1998). Sorting Out Sorting: A Case Study of Software Visualization for Teaching Computer Science. In Software visualization: Programming as a multimedia experience (pp. 369–381). Cambridge, Mass.?: MIT Press. http://archive.org/details/softwarevisualiz0000unse
Baecker, R. (2002). Showing instead of telling. Proceedings of the 20th Annual International Conference on Computer Documentation, 10–16. https://doi.org/10.1145/584955.584957
Baecker, R., & Small, I. (1990). Animation at the Interface. In B. Laurel & S. J. Mountford (Eds.), The Art of Human-Computer Interface Design (pp. 251–267). Addison-Wesley Publishing Co., Inc.
Baecker, R., Small, I., & Mander, R. (1991). Bringing icons to life. Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, 1–6. https://doi.org/10.1145/108844.108845
Baek, Y. K., & Layne, B. H. (1988). Color, graphics, and animation in a computer-assisted learning tutorial lesson. Journal of Computer-Based Instruction, 15(4), 131–135.
Bartram, L. (1997a). Perceptual and Interpretative Properties of Motion for Information Visualization (Technical Report CMPT-TR:1997-15; p. 35). Simon Fraser University. https://www.researchgate.net/publication/221615053_Perceptual_and_Interpretative_Properties_of_Motion_for_Information_Visualization
Bartram, L. (2001). Enhancing Information Visualization with Motion [Doctoral dissertation, Simon Fraser University]. https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.21.5486&rep=rep1&type=pdf
Bartram, L. (1997b). Perceptual and interpretative properties of motion for information visualization. Proceedings of the 1997 Workshop on New Paradigms in Information Visualization and Manipulation, 3–7. https://doi.org/10.1145/275519.275520
Bartram, L., Ware, C., & Calvert, T. (2003). Moticons: Detection, distraction and task. International Journal of Human-Computer Studies, 58(5), 515–545. https://doi.org/10.1016/S1071-5819(03)00021-1
Bétrancourt, M., & Tversky, B. (2000). Effect of computer animation on users’ performance: A review. Le Travail Humain: A Bilingual and Multi-Disciplinary Journal in Human Factors, 63(4), 311–329.
Biørn-Hansen, A., Grønli, T.-M., & Ghinea, G. (2019). Animations in Cross-Platform Mobile Applications: An Evaluation of Tools, Metrics and Performance. Sensors, 19(9), 2081. https://doi.org/10.3390/s19092081
Chalbi, A. (2018). Understanding and designing animations in the user interfaces [Doctoral dissertation, Université lille1]. tel-01881889. https://hal.archives-ouvertes.fr/tel-01881889/
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, 45–55. https://doi.org/10.1145/168642.168647
Chevalier, F., Riche, N. H., Plaisant, C., Chalbi, A., & Hurter, C. (2016). Animations 25 Years Later: New Roles and Opportunities. Proceedings of the International Working Conference on Advanced Visual Interfaces, 280–287. https://doi.org/10.1145/2909132.2909255
de la Torre - Arenas, I., & Cruz, P. (2017). A taxonomy of motion applications in data visualization. Proceedings of the Symposium on Computational Aesthetics, 1–2. https://doi.org/10.1145/3092912.3122798
de Souza, C. S., Leitão, C. F., Prates, R. O., Amélia Bim, S., & da Silva, E. J. (2010). Can inspection methods generate valid new knowledge in HCI? The case of semiotic inspection. International Journal of Human-Computer Studies, 68(1), 22–40. https://doi.org/10.1016/j.ijhcs.2009.08.006
Djajadiningrat, T., Geurts, L., Munniksma, P. R., Christiaansen, G., & de Bont, J. (2009). Rationalizer: An emotion mirror for online traders. Proceedings of the Conference on Design and Semantics of Form and Movement - DeSForM 2009, 39–48.
Fang, Y.-M., Chun, L., & Chu, B.-C. (2019). Older Adults’ Usability and Emotional Reactions toward Text, Diagram, Image, and Animation Interfaces for Displaying Health Information. Applied Sciences, 9(6), 1058. https://doi.org/10.3390/app9061058
Fisher, D. (2010). Animation for Visualization: Opportunities and Drawbacks. In Beautiful Visualization (pp. 329–352). O’Reilly Media Inc.
Froehlich. (2010). Motion for Interface: A Taxonomy [Masters in Fine Art Thesis]. Dynamic Media Institute at Massachusetts College of Art and Design.
Froehlich, E. (2018). Motion Attracts Attention. In R. B. Stone & L. Wahlin (Eds.), The Theory and Practice of Motion Design: Critical Perspectives and Professional Practice (pp. 114–126). Routledge.
Froehlich, E., Lucid, B., & Shaw, H. (2013). The language of motion: A taxonomy for interface. In M. Kurosu (Ed.), Proceedings of the 15th international conference on Human-Computer Interaction: Interaction modalities and techniques: Vol. IV (pp. 668–677). Springer-Verlag. https://doi.org/10.1007/978-3-642-39330-3_72
Gonzalez, C. (1996). Does animation in user interfaces improve decision making? Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, 27–34. https://doi.org/10.1145/238386.238396
Google. (n.d.). material.io—Understanding motion. Material Design. Retrieved June 14, 2018, from https://material.io/design/motion/understanding-motion.html#principles
Gunner. (n.d.). Google Home App. Retrieved October 9, 2020, from https://www.gunner.work/googlehome
Harrington, T. L., Bidyuk, P. I., & Harrington, M. K. (1994). Motion as a Variable of Visual Communication. In Human-Machine Communication for Educational Systems Design (pp. 17–24). Springer Berlin Heidelberg.
Head, V. (2016). Designing Interface Animation. Rosenfeld Media. https://rosenfeldmedia.com/books/designing-interface-animation/
Heer, J., & Robertson, G. (2007). Animated Transitions in Statistical Data Graphics. IEEE Transactions on Visualization and Computer Graphics, 13(6), 1240–1247. https://doi.org/10.1109/TVCG.2007.70539
Heer, J., & Shneiderman, B. (2012). Interactive Dynamics for Visual Analysis. Queue, 10(2), 30–55. https://doi.org/10.1145/2133416.2146416
Jakobson, R. (1960). Linguistics and Poetics. In T. A. Sebeok (Ed.), Style in Language (pp. 350–377). The MIT Press. http://archive.org/details/styleinlanguage00confrich
Jakobson, R. (1984). Lingüística y poética. In Ensayos de lingüística general (pp. 347–395). Ariel.
Kurosu, M., & Kashimura, K. (1995). Apparent usability vs. inherent usability: Experimental analysis on the determinants of the apparent usability. Conference Companion on Human Factors in Computing Systems, 292–293. https://doi.org/10.1145/223355.223680
Li, W., Wang, Y., Zhang, H., & Qu, H. (2020). Improving Engagement of Animated Visualization with Visual Foreshadowing. ArXiv:2009.03784 [Cs]. http://arxiv.org/abs/2009.03784
Li, Y., You, F., Ji, M., & You, X. (2020). The Influence of Smartphone Text Input Method, Posture, and Environment on User Experience. International Journal of Human–Computer Interaction, 36(12), 1110–1121. https://doi.org/10.1080/10447318.2020.1719465
Liddle, D. (2016). Emerging Guidelines for Communicating with Animation in Mobile User Interfaces. Proceedings of the 34th ACM International Conference on the Design of Communication, 1–9. https://doi.org/10.1145/2987592.2987614
López-Jaquero, V. M., González, P., Montero, F., & Molina, J. P. (2020). UML2App: Avanzando en la generación automática de interfaces de usuario para dispositivos móviles. Revista de la Asociación Interacción Persona Ordenador (AIPO), 1, 9–21.
Loranger, H., Schade, A., & Nielsen, J. (2013). Website Tools and Applications with Flash. https://www.nngroup.com/reports/website-tools-and-applications-flash/
Ma, J., Chen, C.-C., & Lin, Y.-C. (2018). Emotional and Cognitive Assessment of Use of Functional Animation. Proceedings of the International Conference on Machine Vision and Applications, 61–65. https://doi.org/10.1145/3220511.3220516
Marshall, J., Dancu, A., & Mueller, F. “Floyd.” (2016). Interaction in Motion: Designing Truly Mobile Interaction. Proceedings of the 2016 ACM Conference on Designing Interactive Systems, 215–228. https://doi.org/10.1145/2901790.2901844
Myers, B. A. (1984). The user interface for Sapphire. IEEE Computer Graphics and Applications, 4(12), 13–23. https://doi.org/10.1109/MCG.1984.6429376
Myers, B. A. (1985). The importance of percent-done progress indicators for computer-human interfaces. ACM SIGCHI Bulletin, 16, 11–17. https://doi.org/10.1145/317456.317459
Nabors, R. (2017). Animation at Work. A Book Apart.
Nicol, A. (1990). Interfaces for Learning: What Do Good Teachers Know That We Don’t? In B. Laurel (Ed.), The art of human- computer interface design (pp. 251–267). Addison-Wesley.
Nielsen, J. (1995). Guidelines for Multimedia on the Web. Nielsen Norman Group - Articles. https://www.nngroup.com/articles/guidelines-for-multimedia-on-the-web/
Nielsen, J. (2005). Top 10 Web Design Mistakes of 2005. Nielsen Norman Group - Articles. https://www.nngroup.com/articles/top-ten-web-design-mistakes-of-2005/
Nielsen, J. (1994). Enhancing the explanatory power of usability heuristics. Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, 152–158. https://doi.org/10.1145/191666.191729
Norman, D. A. (2004). Emotional design: Why we love (or hate) everyday things. Basic Books.
Norman, D. A. (2013). The design of everyday things (Revised and expanded edition). Basic Books.
Norman, D. A., & Nielsen, J. (2010). Gestural interfaces: A step backward in usability. Interactions, 17(5), 46–49. https://doi.org/10.1145/1836216.1836228
Novick, D., Rhodes, J., & Wert, W. (2011). The communicative functions of animation in user interfaces. Proceedings of the 29th ACM International Conference on Design of Communication, 1–8. https://doi.org/10.1145/2038476.2038478
Parhi, P., Karlson, A. K., & Bederson, B. B. (2006). Target size study for one-handed thumb use on small touchscreen devices. Proceedings of the 8th Conference on Human-Computer Interaction with Mobile Devices and Services, 203–210. https://doi.org/10.1145/1152215.1152260
Pelayo, N., & Cabrera, A. (2001). Lenguaje y comunicación: Conceptos básicos, aspectos teóricos generales, características, estructura, naturaleza y funciones del lenguaje y la comunicación oral y escrita. El Nacional.
Rheinfrank, J., & Evenson, S. (1996). Design Languages. In T. Winograd (Ed.), Bringing Design to Software (pp. 63–85). Addison Wesley Publishing Company, Inc. https://doi.org/10.1145/229868.230034
Saffer, D. (2013). Microinteractions. O’Reilly Media, Inc.
Scolari, C. (2018). Las leyes de la interfaz: Diseño, ecología, evolución, tecnología. Gedisa.
Shannon, C. E. (1948). A Mathematical Theory of Communication. The Bell System Technical Journal, 27(3), 379–423.
Shannon, C. E., & Weaver, W. (1963). The mathematical theory of communication. Urbana?: University of Illinois Press. http://archive.org/details/mathematicaltheo00shan
Shneiderman, B. (1987). Designing the User Interface: Strategies for Effective Human-computer Interaction. Addison Wesley Publishing Company, Inc.
Shneiderman, B., Plaisant, C., Cohen, M., Jacobs, S., Elmqvist, N., & Diakopoulos, N. (2018). Designing the User Interface: Strategies for Effective Human-Computer Interaction, Global Edition (Edición: 6). Pearson Education Limited.
Spallazzo, D., Sciannamè, M., & Ceconello. (2019). The Domestic Shape of AI: A Reflection on Virtual Assistants. Proceedings of the Conference on Design and Semantics of Form and Movement - DeSForM 2019, 52–59.
Stasko, J. T. (1993). Animation in user interfaces: Principles and techniques. In L. Bass & P. Dewan (Eds.), User Interface Software (pp. 81–101). John Wiley & Sons, Inc.
Stasko, J. T. (1990). A practical animation language for software development. Proceedings. 1990 International Conference on Computer Languages, 1–10. https://doi.org/10.1109/ICCL.1990.63755
Thompson, J., Liu, Z., & Stasko, J. (2020). Understanding the Design Space and Authoring Paradigms for Animated Data Graphics. Computer Graphics Forum, 39(3), 207–218. https://doi.org/10.1111/cgf.13974
Tractinsky, N, Katz, A. S., & Ikar, D. (2000). What is beautiful is usable. Interacting with Computers, 13(2), 127–145. https://doi.org/10.1016/S0953-5438(00)00031-X
Tractinsky, Noam. (1997). Aesthetics and apparent usability: Empirically assessing cultural and methodological issues. Proceedings of the ACM SIGCHI Conference on Human Factors in Computing Systems, 115–122. https://doi.org/10.1145/258549.258626
Vermeulen, J., Luyten, K., van den Hoven, E., & Coninx, K. (2013). Crossing the bridge over Norman’s Gulf of Execution: Revealing feedforward’s true identity. Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, 1931–1940. https://doi.org/10.1145/2470654.2466255
Walker, J. (1990). Through the looking glass. In B. Laurel & S. J. Mountford (Eds.), The Art of Human-Computer Interface Design (pp. 439–448). Addison-Wesley Publishing Co., Inc.
Ware, C. (2020). Information Visualization: Perception for Design (4a). Morgan Kaufmann. https://doi.org/10.1016/C2016-0-02395-1
Wasserman, A. I. (2010). Software engineering issues for mobile application development. Proceedings of the FSE/SDP Workshop on Future of Software Engineering Research, 397–400. https://doi.org/10.1145/1882362.1882443
Weiss, R. E., Knowlton, D. S., & Morrison, G. R. (2002). Principles for using animation in computer-based instruction: Theoretical heuristics for effective design. Computers in Human Behavior, 18(4), 465–477. https://doi.org/10.1016/S0747-5632(01)00049-8
Wigdor, D., & Wixon, D. (2011). Brave NUI World: Designing Natural User Interfaces for Touch and Gesture (1st ed.). Morgan Kaufmann Publishers Inc.
Wroblewski, L. (2011). Mobile First. A book Apart.
Wu, Z., Jiang, Y., Liu, Y., & Ma, X. (2020). Predicting and Diagnosing User Engagement with Mobile UI Animation via a Data-Driven Approach. Proceedings of the 2020 CHI Conference on Human Factors in Computing Systems, 1–13. https://doi.org/10.1145/3313831.3376324
Wu, Z., Kim, T., Li, Q., & Ma, X. (2019). Understanding and Modeling User-Perceived Brand Personality from Mobile Application UIs. Proceedings of the 2019 CHI Conference on Human Factors in Computing Systems, 1–12. https://doi.org/10.1145/3290605.3300443
Downloads
Published
Issue
Section
License
This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.
The philosophy of the journal is to be open and to make all articles accessible. It is our belief that open access is a must in the future of science.
Authors who publish with RCR accept a slightly modified Creative Commons Attribution-NonCommercial 3.0 Unported License.
You, as author, retain the copyrights for your paper, but the Review of Communication Research is granted exclusivity for publication of the article. The agreement allows others to share the work with an acknowledgement of the work's authorship and publication in this journal. We do not want third parties to make a commercial use of the article, unless we agree it with authors.
The journal will run an open review process as well as a traditional peer review process.
When the manuscript is accepted for publication, it will get a doi number and get available online to facilitate early citation.
The journal will post the published article to many public repositories for further diffusion and permanence.
You, as author, are permitted and encouraged to post your work online (e.g., in institutional repositories or on your website), as it can lead to productive exchanges, as well as earlier and greater citation of published work.
If you have any doubts, please, contact the editor: editor@rcommunication.org
Many thanks for submitting your work to this journal.
