Validation Process of the Taxonomy of Functional Animation in User Interface Design: Results of an Expert Survey

Document Type

Article

Publication Title

The International Journal of Visual Design

Abstract

The use of animation in the visual design of an interface has been reported as a potential cause of usability problems. Experts recommend using animation sparingly, and applying it only when it serves a well-defined purpose. Establishing the functions that animation can play to improve usability and user experience is the first step in preventing gratuitous and unwarranted use of animation. In this article, we present the results of a survey conducted with a group of experts as part of the validation process for a taxonomy of functional animation. We focus on functional animation as any visual change intentionally included in the visual design of an interface, excluding animated content that can be accessed or displayed through an application. The current trend in interaction design is to give priority to mobile devices when designing the interface of an application. Therefore, our taxonomy has been developed taking into account the distinctive characteristics of interaction on touchscreen smartphone devices. After gathering expert contributions, the classification is configured around the following functions: identifying, structural, guidance, feedback, didactic, aesthetic, emotional, and security.

DOI

https://doi.org/10.18848/2325-1581/CGP/v18i02/1-21

Publication Date

2024

Comments

Apple Inc. (n.d.) Themes - iOS - Human Interface Guidelines - Apple Developer. Available at: https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/#//apple_ref/doc/uid/TP40006556-CH57-SW1 (accessed 12 April 2021).

Ávila Muñoz R, Clemente Mediavilla J, and Pérez-Luque Maricalva MJ (2021) Communicative Functions in Human-Computer Interface Design: A taxonomy of Functional Animation. Review of Communication Research 9: 119-146. https://doi.org/10.12840/issn.2255-4165.030Baecker R and Small I (1990) Animation at the Interface. In: Laurel B and Mountford SJ (eds) The Art of Human-Computer Interface Design. Reading, MA, USA: Addison-Wesley Publishing Co., Inc., pp. 251–267.

Baecker R, Small I and Mander R (1991) Bringing icons to life. In: Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, New York, NY, USA, 1 March 1991, pp. 1–6. CHI ’91. Association for Computing Machinery. DOI: 10.1145/108844.108845.

Bartram L (1997) Perceptual and interpretative properties of motion for information visualization. In: Proceedings of the 1997 workshop on New paradigms in information visualization and manipulation, New York, NY, USA, 1 November 1997, pp. 3–7. NPIV ’97. Association for Computing Machinery. DOI: 10.1145/275519.275520.

Bartram L (2001) Enhancing Information Visualization with Motion. Doctoral dissertation. Simon Fraser University, Burnaby, Canadá. Available at: https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.21.5486&rep=rep1&type=pdf.

Bartram L, Ware C and Calvert T (2003) Moticons: detection, distraction and task. International Journal of Human-Computer Studies 58(5). Notification User Interfaces: 515–545. DOI: 10.1016/S1071-5819(03)00021-1.

Chalbi A (2018) Understanding and designing animations in the user interfaces. Doctoral dissertation. Université lille1. Available at: https://hal.archives-ouvertes.fr/tel-01881889/ (accessed 21 November 2018).

Chevalier F, Riche NH, Plaisant C, et al. (2016) Animations 25 Years Later: New Roles and Opportunities. In: Proceedings of the International Working Conference on Advanced Visual Interfaces, New York, NY, USA, 7 June 2016, pp. 280–287. AVI ’16. Association for Computing Machinery. DOI: 10.1145/2909132.2909255.

Cooper A, Reinmann R, Cronin D, et al. (2014) About Face: The Essentials of Interaction Design. 4th ed. Indianapolis, IN: Wiley.

de la Torre - Arenas I and Cruz P (2017) A taxonomy of motion applications in data visualization. In: Proceedings of the symposium on Computational Aesthetics, New York, NY, USA, 29 July 2017, pp. 1–2. CAE ’17. Association for Computing Machinery. DOI: 10.1145/3092912.3122798.

de Souza CSieckenius and Leitão CFaria (2009) Semiotic engineering methods for scientific research in HCI. Synthesis lectures on human-centered informatics ; #2. San Rafael, CA, USA: Morgan & Claypool Publishers.

Fisher D (2010) Animation for Visualization: Opportunities and Drawbacks. In: Beautiful Visualization. Sebastopol: O’Reilly Media Inc., pp. 329–352.

Froehlich E (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: Stone RB and Wahlin L (eds) The Theory and Practice of Motion Design: Critical Perspectives and Professional Practice. New York: Routledge, pp. 114–126.

Froehlich E, Lucid B and Shaw H (2013) The language of motion: a taxonomy for interface. In: Proceedings of the 15th international conference on Human-Computer Interaction: interaction modalities and techniques (ed. M Kurosu), Berlin, Heidelberg, 21 July 2013, pp. 668–677. HCI’13. Springer-Verlag. DOI: 10.1007/978-3-642-39330-3_72.

Google (n.d.) material.io - Understanding motion. Available at: https://material.io/design/motion/understanding-motion.html#principles (accessed 14 June 2018).

Great apes (n.d.) Trafi - Digital Driving License. Available at: https://www.greatapes.fi/cases/ddl/ (accessed 17 May 2020).

Harley A (2014) Animation for Attention and Comprehension. Available at: https://www.nngroup.com/articles/animation-usability/ (accessed 13 June 2018).

Harrington TL, Bidyuk PI and Harrington MK (1994) Motion as a Variable of Visual Communication. In: Human-Machine Communication for Educational Systems Design. Berlin, Heidelberg: Springer Berlin Heidelberg, pp. 17–24.

Head V (2016) Designing Interface Animation. Brooklyn, New York: Rosenfeld Media.

Heer J and Robertson G (2007) Animated Transitions in Statistical Data Graphics. IEEE Transactions on Visualization and Computer Graphics 13(6): 1240–1247. DOI: 10.1109/TVCG.2007.70539.

Heer J and Shneiderman B (2012) Interactive Dynamics for Visual Analysis. Queue 10(2): 30–55. DOI: 10.1145/2133416.2146416.

Jakobson R (1960) Linguistics and Poetics. In: Sebeok TA (ed.) Style in Language. Cambridge, Massachusetts: The MIT Press, pp. 350–377. Available at: http://archive.org/details/styleinlanguage00confrich (accessed 1 October 2019).

Laubheimer P (2020) The Role of Animation and Motion in UX. Available at: https://www.nngroup.com/articles/animation-purpose-ux/ (accessed 22 January 2020).

Ministerio de Universidades (2020) Datos y Cifras del Sistema Universitario Español. Publicación 2019-2020 [Facts and Figures on the Spanish University System. Publication 2019-2020]. Madrid: Ministerio de Universidades. Available at: https://cpage.mpr.gob.es/producto/datos-y-cifras-del-sistema-universitario-espanol-9/ (accessed 5 April 2021).

Nabors R (2017) Animation at Work. A Book Apart.

Nielsen J (1994) Enhancing the explanatory power of usability heuristics. In: Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, New York, NY, USA, 24 April 1994, pp. 152–158. CHI ’94. Association for Computing Machinery. DOI: 10.1145/191666.191729.

Nielsen J (1995) Guidelines for Multimedia on the Web. Available at: https://www.nngroup.com/articles/guidelines-for-multimedia-on-the-web/ (accessed 19 November 2022).

Nielsen J (2000) Flash: 99% Bad. Available at: https://www.nngroup.com/articles/flash-99-percent-bad/ (accessed 19 November 2022).

Nielsen J (2005) Top 10 Web Design Mistakes of 2005. Available at: https://www.nngroup.com/articles/top-ten-web-design-mistakes-of-2005/ (accessed 19 November 2022).

Nielsen J and Budiu R (2013) Mobile Usability. Berkeley, CA, USA: New Riders.

Nishida S, Kawabe T, Sawayama M, et al. (2018) Motion Perception: From Detection to Interpretation. Annual Review of Vision Science 4(1): 501–523. DOI: 10.1146/annurev-vision-091517-034328.

Norman DA (2004) Emotional Design: Why We Love (or Hate) Everyday Things. New York: Basic Books.

Norman DA (2013) The Design of Everyday Things. Revised and expanded edition. New York, New York: Basic Books.

Norman DA and Nielsen J (2010) Gestural interfaces: a step backward in usability. interactions 17(5): 46–49. DOI: 10.1145/1836216.1836228.

Novick D, Rhodes J and Wert W (2011) The communicative functions of animation in user interfaces. In: Proceedings of the 29th ACM international conference on Design of communication, New York, NY, USA, 3 October 2011, pp. 1–8. SIGDOC ’11. Association for Computing Machinery. DOI: 10.1145/2038476.2038478.

Pratt J, Radulescu PV, Guo RM, et al. (2010) It’s Alive!: Animate Motion Captures Visual Attention. Psychological Science 21(11): 1724–1730. DOI: 10.1177/0956797610387440.

Saffer D (2013) Microinteractions. O’Reilly Media, Inc.

Scolari C (2018) Las Leyes de La Interfaz: Diseño, Ecología, Evolución, Tecnología [The Laws of the Interface: Design, Ecology, Evolution, Technology]. Barcelona: Gedisa.

Shneiderman B, Plaisant C, Cohen M, et al. (2018) Designing the User Interface: Strategies for Effective Human-Computer Interaction, Global Edition. Edición: 6. Boston Columbus Indianapolis New York San Francisco Hoboken Amsterdam Cape Town Dubai London Madrid Milan Munich Paris Montréal Toronto Delhi Mexico City Sao Paulo Sydney Hong Kong Seoul Singapore Taipei Tokyo: Pearson Education Limited.

Vistisen P (2021) Science Visualization: Guiding Principles for the Motion Design of Scientific Disseminations. In: Re connect - 2021 Motion Design education Summit, 2021, pp. 164–172. Available at: https://drive.google.com/file/d/196kc1pObg7mC04oMm5uy6eywfaUcKEZs/view (accessed 19 November 2022).

Walker J (1990) Through the looking glass. In: Laurel B and Mountford SJ (eds) The Art of Human-Computer Interface Design. Reading, MA, USA: Addison-Wesley Publishing Co., Inc., pp. 439–448.

Wasserman AI (2010) Software engineering issues for mobile application development. In: Proceedings of the FSE/SDP workshop on Future of software engineering research, New York, NY, USA, 7 November 2010, pp. 397–400. FoSER ’10. Association for Computing Machinery. DOI: 10.1145/1882362.1882443.

Weiss RE, Knowlton DS and Morrison GR (2002) Principles for using animation in computer-based instruction: theoretical heuristics for effective design. Computers in Human Behavior 18(4): 465–477. DOI: https://doi.org/10.1016/S0747-5632(01)00049-8.

Wigdor D and Wixon D (2011) Brave NUI World: Designing Natural User Interfaces for Touch and Gesture. 1st ed. San Francisco, CA, USA: Morgan Kaufmann Publishers Inc.

Link to Full Text

Share

COinS