Animations 25 Years Later: New Roles and Opportunities Fanny Chevalier, Nathalie Henry Riche, Catherine Plaisant, Amira Chalbi, Christophe Hurter
Total Page：16
File Type：pdf, Size：1020Kb
Animations 25 Years Later: New Roles and Opportunities Fanny Chevalier, Nathalie Henry Riche, Catherine Plaisant, Amira Chalbi, Christophe Hurter To cite this version: Fanny Chevalier, Nathalie Henry Riche, Catherine Plaisant, Amira Chalbi, Christophe Hurter. An- imations 25 Years Later: New Roles and Opportunities. AVI 16, International Working Conference on Advanced Visual Interfaces , ACM, Jun 2016, Bari, Italy. pp.280-287 / ISBN : 978-1-4503-4131-8 10.1145/2909132.2909255. hal-01322962 HAL Id: hal-01322962 https://hal-enac.archives-ouvertes.fr/hal-01322962 Submitted on 29 May 2016 HAL is a multi-disciplinary open access L’archive ouverte pluridisciplinaire HAL, est archive for the deposit and dissemination of sci- destinée au dépôt et à la diffusion de documents entific research documents, whether they are pub- scientifiques de niveau recherche, publiés ou non, lished or not. The documents may come from émanant des établissements d’enseignement et de teaching and research institutions in France or recherche français ou étrangers, des laboratoires abroad, or from public or private research centers. publics ou privés. Copyright Animations 25 Years Later: New Roles and Opportunities Fanny Chevalier1, Nathalie Henry Riche2, Catherine Plaisant3, Amira Chalbi1, Christophe Hurter4 1 Inria 2 Microsoft Research 3 HCIL, University of Maryland 4 ENAC {fanny.chevalier, amira.chalbi}@inria.fr [email protected] [email protected] [email protected] ABSTRACT animation. A common language about the roles of animation will Animations are commonplace in today’s user interfaces. From foster renewed discussions about animation, and in turn encourage bouncing icons that catch attention, to transitions helping with a broader scope of empirical research assessing their merits and orientation, to tutorials, animations can serve numerous purposes. limitations. For example, we now include the use of animation to We revisit Baecker and Small’s pioneering work Animation at the engage, persuade or even fight boredom, commonly used in prac- Interface, 25 years later. We reviewed academic publications and tice but rarely studied in the literature. Such roles will need to be commercial systems, and interviewed 20 professionals of various investigated in more depth as research on storytelling [28][30] and backgrounds. Our insights led to an expanded set of roles played visualization literacy [10] advances. by animation in interfaces today for keeping in context, teaching, The contributions of this paper are i) a taxonomy of 23 roles, improving user experience, data encoding and visual discourse. organized in 5 categories, refining and expanding Baecker and We illustrate each role with examples from practice and research, Small’s work, illustrated by examples borrowed from academic discuss evaluation methods and point to opportunities for future sources and our observations in the wild; ii) a discussion of gen- research. This expanded description of roles aims at inspiring the eral evaluation methods adapted to each category; and iii) oppor- HCI research community to find novel uses of animation, guide tunities for future research. Like all taxonomies, it attempts to be them towards evaluation and spark further research. complete yet simple, and could be further refined. Early evalua- tion of its coverage and its usability as a common discussion CCS Concept ground was conducted using informal interviews with 20 experts. Human-centered computing. Visualization. Visualization theory, concepts and paradigms. 2. THE 23 ROLES OF ANIMATION IN Keywords VISUAL INTERFACES Animation; transition; taxonomy; roles; We use the broad definition of animation by Betrancourt and Tversky [7]: “computer animation refers to any application which 1. INTRODUCTION generates a series of frames, so that each frame appears as an Animations are now used extensively in user interfaces. Users alteration of the previous one, and where the sequence of frames might see an animation when they turn on their phones, cueing is determined either by the designer or the user.” We chose this how to unlock them. Smooth animations help users navigate definition as it captures the essence of animation as a technique, maps, or give hints about what happened to a window application while not specifying what the animation is supposed to convey. It when it is being minimized. Twenty-five years ago, Baecker and also embeds both passive and active use. Small's taxonomy of animation [2] shed light on different roles 2.1 Methodology animation could play in user interfaces. In this seminal paper, they Our methodology to identify the 23 roles of animation in interfac- went beyond the early use of animation to illustrate processes and es, consisted of a multi-step process as follows: algorithms [3], and exposed the fundamental idea that animation Review – We first searched for related taxonomies (summa- can help make interfaces more understandable. Their paper de- rized toward the end of the paper). Then, we surveyed animation scribed a set of scenarios—mostly hypothetical—illustrating that examples we were most familiar with, i.e. in the domain of infor- animations could help users track objects of interest, choose what mation visualization (e.g., reviewing Bartram [4] useful and ex- to do and see how to do it, but also get feedback on what just tensive list of visualization examples, up to 1997). We broadened happened, or see summaries of what happened in the past. our search with a literature review of animation techniques in HCI To the best of our knowledge, Baecker and Small’s taxonomy and information visualization by searching on the ACM Digital remains the most recent general classification of the roles of Library and the website keyvis.org for papers containing the animations in interfaces — later work introduced new roles with a words “animation” or “animated transition” in the list of authors’ specific focus on information visualization [4], or reviewed ani- keywords. We also collected interactive examples that comply mation methods (in contrast to the purpose they serve) [20][25]. with Bertancourt and Tversky’s definition that we encountered in In this paper, we revisit the original classification in light of 25 websites, mobile apps, and other commercial products. years of work in HCI in academia and in industry. Our goal is to Build and iterate – We derived an initial taxonomy by group- highlight the growing opportunities for the use of animation, and ing animation techniques into roles, and discussing among the encourage researchers to evaluate still overlooked aspects of authors how these roles differ and how to group them in higher- level categories. We systematically compared what we found with 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 distrib- the scenarios proposed by the original Baecker and Small’s re- uted for profit or commercial advantage and that copies bear this notice and the full view to guarantee an all-inclusive correspondence, and considered citation on the first page. Copyrights for components of this work owned by others additional examples to see how they would fit in the taxonomy. than the author(s) must be honored. Abstracting with credit is permitted. To copy This whole process helped us refine: we removed minor roles otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. Request permissions from Permis- (very few instances) and hybrid roles (covering two or more [email protected]. existing roles — we illustrate some of these hybrid roles in the AVI '16, June 07 - 10, 2016, Bari, Italy. discussion), and better fleshed out the remaining ones. Copyright is held by the owner/author(s). Publication rights licensed to ACM. ACM 978-1-4503-4131-8/16/06…$15.00 DOI: http://dx.doi.org/10.1145/2909132.2909255 Validate – We also validated and fine-tuned our final list of 2.2.1 Keeping in Context roles based on insights gained from interviewing 20 practitioners One of the most used roles of animation is to keep users aware of and researchers of various backgrounds. We conducted informal the system’s state, as well as keep them oriented in the infor- interviews where we asked these professionals to think of at least mation space during changes and manipulations. We include four five examples of animation use, without further guidance since we roles in this category: did not want to bias their answers. Only once they completed this list, we asked them to familiarize themselves with our taxonomy, Role 1: Staying oriented during navigation and try to identify the roles for each of the examples they provid- Definition – Navigating from an initial point to a target point in ed. We also invited the interviewees to provide feedback on our an information space (by which we mean a location, or a partic- list and suggest missing roles, if any. ular view), was traditionally accomplished by suddenly jumping to the end point. Animation is now commonly used to make Throughout the entire process, we reviewed metrics and evalua- navigation feel smooth instead of jarring. tion methodologies used, from HCI, design, psychology and Illustration – After typing “Paris, France” in the Google Maps humanities practice. While most traditional evaluation methods search box, an animation is used to smoothly zoom and pan the can be applied to most roles (e.g. usability testing, controlled map as if flying over the Earth to see the area around Paris. Such studies, satisfaction questionnaires) we suggest specific metrics or type of animation is a cornerstone component of Zoomable User methodologies when appropriate. Our goal is to highlight the Interfaces (ZUIs) [6]. When the information space is more com- importance of evaluation, and encourage “role-aware” empirical plex to navigate—as when users need to navigate from one branch research. We opted not to report on the results of published evalu- of a large organization chart to another—a staged animation ations, because mixed results and complex procedures require breaks down the animation into multiple steps: e.g.