research-article

The communicative functions of animation in user interfaces

Authors:

David Novick,

Joseph Rhodes,

Wervyn WertAuthors Info & Claims

SIGDOC '11: Proceedings of the 29th ACM international conference on Design of communication

Pages 1 - 8

https://doi.org/10.1145/2038476.2038478

Published: 03 October 2011 Publication History

Get Access

Abstract

To develop a model that relates the purpose of the communication to the nature of the animation, we surveyed existing user interfaces that use animation, analyzed these uses with respect to type of animation and communicative function, and considered ambiguous or otherwise difficult cases. From this analysis, we constructed a matrix with appropriateness/inappropriateness values for all combinations of communicative functions and animation types covered by our survey. To illustrate how the model could be applied to graphical user interfaces and to assess the model's plausibility, we used the model to develop two versions of a user interface for an MP3 player.

References

[1]

Android (2011). Developer's guide. Available at http://developer.android.com/guide/index.html.

Google Scholar

[2]

Apple Inc. (2010). Core animation programming guide. Available at http://developer.apple.com/library/mac/#documentation/Cocoa/Conceptual/CoreAnimation_guide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40004627-SW1.

Google Scholar

[3]

Apple Inc. (2010). Apple human interface guidelines. Available at http://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AppleHIGuidelines/XHIGIntro/XHIGIntro.html.

Google Scholar

[4]

Bumptop.com (undated). BumpTop 3D Desktop Prototype, available at http://www.youtube.com/watch?v=M0ODskdEPnQ.

Google Scholar

[5]

Chang, B.-W., and Ungar, D. (1995). Animation: From cartoons to the user interface, Proceedings of the 6th annual ACM symposium on User Interface Software and Technology (UIST '93), 45--55.

Digital Library

Google Scholar

[6]

Chatty, S. (1992). Defining the behaviour of animated interfaces. Proceedings of the IFIP conference on Engineering Human-Computer Interfaces (EHCI '92), 95--11.

Digital Library

Google Scholar

[7]

Compiz (undated). Compiz Fusion. Available at http://www.compiz.org/.

Google Scholar

[8]

Hong, W., Thong, J. Y. L., and Cheung, Y. M. (1997), The impact of animation characteristics and task conditions on online user behavior, Proceedings. of the First China Summer Workshop on Information Management, 7--11.

Google Scholar

[9]

Hudson, S. E., and Stasko, J. T. (1993). Animation support in a user interface toolkit: flexible, robust, and reusable abstractions, Proceedings of the 6th annual ACM symposium on User interface software and technology (UIST '93, 57--67.

Digital Library

Google Scholar

[10]

Kang H., Plaisant C., and Shneiderman B. (2003). New approaches to help users get started with visual interfaces: Multi-layered interfaces and integrated initial guidance, Proceedings of the Digital Government Research Conference, 141--146.

Digital Library

Google Scholar

[11]

Lang, K. (undated). 'Stand Up' Mac Dock Mockup, available at http://vimeo.com/6695160.

Google Scholar

[12]

Lang, K. (undated). Smart Inspector - a mockup of a dynamic Inspector Palette, available at http://vimeo.com/8109356.

Google Scholar

[13]

Maloney, J. H., and Smith, R. (1995). Directness and liveness in the morphic user interface construction environment, Proceedings of the 8th annual ACM symposium on User Interface Software and Technology (UIST '95), 21--28.

Digital Library

Google Scholar

[14]

Microsoft (undated). Microsoft Future Vision : Healthcare, available at http://www.youtube.com/watch?v=V35Kv6-ZNGA.

Google Scholar

[15]

Microsoft (undated). Microsoft's Future Vision 2019. Available at http://www.youtube.com/watch?v=g9JBSEBu2q8.

Google Scholar

[16]

Microsoft (updated). Animations and Transitions. Available at http://msdn.microsoft.com/en-us/library/aa511285.aspx#patterns.

Google Scholar

[17]

Nielsen, J. (2005). Top ten Web design mistakes of 2005. Available at http://www.useit.com/alertbox/designmistakes.html.

Google Scholar

[18]

Norman, D. A. (1998). The design of everyday things. Cambridge, MA: The MIT Press.

Digital Library

Google Scholar

[19]

Pattern Factory Oy (Ltd.) (2011). Patternry.com. Available at http://patternry.com.

Google Scholar

[20]

Pawan, V. (2009). Web application design patterns, Morgan Kaufmann.

Digital Library

Google Scholar

[21]

Plaisant, C., and Shneiderman, B. (2005). Show me! Guidelines for producing recorded demonstrations, Proceedings of the 2005 IEEE Symposium on Visual Languages and Human-Centric Computing (VL/HCC'05), 171--178.

Digital Library

Google Scholar

[22]

Thomas, B. H., and Calder, P. (2001). Applying cartoon animation techniques to graphical user interfaces, ACM Transactions on Computer-Human Interaction, 8: 198--222.

Digital Library

Google Scholar

[23]

Tidwell, J. (2011). Designing interfaces (2nd edition), O'Reilly Media.

Digital Library

Google Scholar

[24]

Toxboe, A. (2011). User interface design patterns Available at http://ui-patterns.com.

Google Scholar

[25]

Vodislav, D. (1997). A visual programming model for user interface animation, IEEE Symposium on Visual Languages, 344--351.

Digital Library

Google Scholar

Cited By

View all

Gao SZhang LLiu HWang Y(2024)Which Animation API Should I Use Next? A Multimodal Real-Time Animation API Recommendation Model for Android AppsIEEE Transactions on Software Engineering10.1109/TSE.2023.333872850:1(106-122)Online publication date: Jan-2024
https://doi.org/10.1109/TSE.2023.3338728
Wang YLiu HGao STang X(2023)Animation2API: API Recommendation for the Implementation of Android UI AnimationsIEEE Transactions on Software Engineering10.1109/TSE.2023.329497149:9(4411-4428)Online publication date: 1-Sep-2023
https://doi.org/10.1109/TSE.2023.3294971
Liu XZhang YWang YQu WGe Y(2023)The development of a smartphone animation fluency evaluation scale based on qualitative and quantitative researchCurrent Psychology10.1007/s12144-022-04198-142:36(31987-31997)Online publication date: 4-Jan-2023
https://doi.org/10.1007/s12144-022-04198-1
Show More Cited By

Index Terms

The communicative functions of animation in user interfaces
1. Human-centered computing
  1. Human computer interaction (HCI)
    1. HCI theory, concepts and models
    2. Interaction paradigms
      1. Graphical user interfaces
  2. Interaction design
    1. Interaction design theory, concepts and paradigms
    2. Systems and tools for interaction design

Recommendations

Applying cartoon animation techniques to graphical user interfaces

If judiciously applied, animation techniques can enhance the look and feel of computer applications that present a graphical human interface. Such techniques can smooth the rough edges and abrupt transitions common in many current graphical interfaces, ...
Artist friendly facial animation retargeting

This paper presents a novel facial animation retargeting system that is carefully designed to support the animator's workflow. Observation and analysis of the animators' often preferred process of key-frame animation with blendshape models informed our ...
Artist friendly facial animation retargeting
SA '11: Proceedings of the 2011 SIGGRAPH Asia Conference

This paper presents a novel facial animation retargeting system that is carefully designed to support the animator's workflow. Observation and analysis of the animators' often preferred process of key-frame animation with blendshape models informed our ...

Reviews

Reviewer: Michael G. Murphy

In this paper, Novick et al. present a model connecting communication and animation. They broadly surveyed user interfaces in order to see how communication and animation function or fail to serve the user. The model is a matrix of animation types versus communicative functions, with entries that reflect appropriate and inappropriate connections. User interfaces for an MP3 player were developed as evidence of the model's efficacy. The work was motivated in part by the perception that animated content is often considered useless. Section 2 is a careful review of research that focuses on design patterns and guidelines; this is followed by a discussion of the resulting need for a model. Section 3 presents the proposed model. The components of animation include place, size, color, shape, gesture, rotation, and blur, and the components of communicative functions are context, value, status, importance, change of function, direction, and salience. The matrix values range from -2 ("the [animation-function] combination is highly inappropriate") to 2 ("the combination is highly appropriate"). The entries are subjective, but based on a careful review of existing user interfaces and basic principles. Section 4 describes applying the model to an MP3 player, which emphasizes the appropriate versus inappropriate use of animation for communicative functions. The conclusion (section 5) presents the results of these model applications and highlights a number of limitations that future studies could address. I wonder if, in a rush for results, the two MP3 interfaces necessarily lack subtleties, making strong conclusions more difficult. The paper is interesting and readable. The model shows much promise, but more work is needed on this important issue. Online Computing Reviews Service

Access critical reviews of Computing literature here

Become a reviewer for Computing Reviews.

Comments

Information & Contributors

Information

Published In

SIGDOC '11: Proceedings of the 29th ACM international conference on Design of communication

October 2011

308 pages

ISBN:9781450309363

DOI:10.1145/2038476

General Chairs:
Aristidis Protopsaltis
Serious Games Institute, Coventry University, UK
,
Nicolas Spyratos
University of Paris-South, France
,
Program Chairs:
Carlos J. Costa
ISCTE-IUL, Adetti-IUL, Portugal
,
Carlo Meghini
ISTI-CNR, Italy

Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. Copyrights for components of this work owned by others than ACM must be honored. Abstracting with credit is permitted. To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. Request permissions from [email protected]

Publisher

Association for Computing Machinery

New York, NY, United States

Publication History

Published: 03 October 2011

Permissions

Request permissions for this article.

Request Permissions

Check for updates

Author Tags

Qualifiers

Research-article

Conference

SIGDOC'11

Sponsor:

SIGDOC

SIGDOC'11: The 29th ACM International Conference on Design of Communication

October 3 - 5, 2011

Pisa, Italy

Acceptance Rates

SIGDOC '11 Paper Acceptance Rate 36 of 75 submissions, 48%;

Overall Acceptance Rate 355 of 582 submissions, 61%

Other Metrics

View Article Metrics

Bibliometrics & Citations

Bibliometrics

Article Metrics

7
Total Citations
View Citations
445
Total Downloads

Downloads (Last 12 months)30
Downloads (Last 6 weeks)5

Reflects downloads up to 15 Sep 2024

Other Metrics

View Author Metrics

Citations

Cited By

View all

Gao SZhang LLiu HWang Y(2024)Which Animation API Should I Use Next? A Multimodal Real-Time Animation API Recommendation Model for Android AppsIEEE Transactions on Software Engineering10.1109/TSE.2023.333872850:1(106-122)Online publication date: Jan-2024
https://doi.org/10.1109/TSE.2023.3338728
Wang YLiu HGao STang X(2023)Animation2API: API Recommendation for the Implementation of Android UI AnimationsIEEE Transactions on Software Engineering10.1109/TSE.2023.329497149:9(4411-4428)Online publication date: 1-Sep-2023
https://doi.org/10.1109/TSE.2023.3294971
Liu XZhang YWang YQu WGe Y(2023)The development of a smartphone animation fluency evaluation scale based on qualitative and quantitative researchCurrent Psychology10.1007/s12144-022-04198-142:36(31987-31997)Online publication date: 4-Jan-2023
https://doi.org/10.1007/s12144-022-04198-1
Wu ZJiang YLiu YMa XBernhaupt RMueller FVerweij DAndres JMcGrenere JCockburn AAvellino IGoguey ABjørn PZhao SSamson BKocielnik R(2020)Predicting and Diagnosing User Engagement with Mobile UI Animation via a Data-Driven ApproachProceedings of the 2020 CHI Conference on Human Factors in Computing Systems10.1145/3313831.3376324(1-13)Online publication date: 21-Apr-2020
https://dl.acm.org/doi/10.1145/3313831.3376324
Pibernik JDolic JMilicevic HKanizaj B(2019)The Effects of the Floating Action Button on Quality of ExperienceFuture Internet10.3390/fi1107014811:7(148)Online publication date: 6-Jul-2019
https://doi.org/10.3390/fi11070148
Li WZhang XZhang Y(2018)How Animation Improve Children’s Cognition in User Interface: A Study of the Kids VOD ApplicationDesign, User Experience, and Usability: Users, Contexts and Case Studies10.1007/978-3-319-91806-8_16(196-217)Online publication date: 2-Jun-2018
https://doi.org/10.1007/978-3-319-91806-8_16
Liddle D(2016)Emerging Guidelines for Communicating with Animation in Mobile User InterfacesProceedings of the 34th ACM International Conference on the Design of Communication10.1145/2987592.2987614(1-9)Online publication date: 23-Sep-2016
https://dl.acm.org/doi/10.1145/2987592.2987614

View Options

Get Access

Login options

Check if you have access through your login credentials or your institution to get full access on this article.

Cited By

Index Terms

Recommendations

Applying cartoon animation techniques to graphical user interfaces

Artist friendly facial animation retargeting

Artist friendly facial animation retargeting

Reviews

Access critical reviews of Computing literature here