Communicative Functions in Human-Computer Interface Design A taxonomy of Functional Animation

Main Article Content

Raquel Avila-Munoz
Jorge Clemente-Mediavilla
M. Jose Perez-Luque-Maricalva

Abstract

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.

Article Details

Section
Articles

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