Understanding and designing animations in the user interfaces Amira Chalbi To cite this version: Amira Chalbi. Understanding and designing animations in the user interfaces. Human-Computer Interaction [cs.HC]. Université lille1, 2018. English. tel-01881889 HAL Id: tel-01881889 https://hal.archives-ouvertes.fr/tel-01881889 Submitted on 26 Sep 2018 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. Understanding and designing animations in the user interfaces Rédigée par: Dirigée par: Amira Chalbi Neffati Nicolas Roussel Fanny Chevalier Thèse présentée et soutenue publiquement le 17 avril 2018 pour obtenir le grade de Docteur de l’Université de Lille dans la spécialité Informatique. École Doctorale Sciences pour l’Ingénieur Lille Nord-de-France Composition du jury: Présidente: Sophie Tison (Université de Lille) Rapporteurs: Stéphane Conversy (Université de Toulouse-ENAC) Jason Dykes (City, University of London) Examinateurs: Anastasia Bezerianos (Université Paris-Sud 11) Benjamin Bach (Edinburgh University) ii iii Abstract Despite their increasing popularity and omnipresence in modern graphical interfaces, anima- tions are still largely under-comprehended. While prior research and practice provide useful insights about the merits and downsides of animation, it is still unclear what makes a good and effective animation that improves the usability and expressivity of graphical interfaces. The disparity of opinions about the value of animation is mainly due to the fact that most of previous studies have investigated the benefit of adding a particular animation to a particular interface, leaving a notable gap in the deep understanding of the many design aspects that influence the performance of animation. Prior research have also predominantly assessed the value of animation through a narrow empirical angle, which had left several facets of animation unveiled. This thesis contributes a first constructive step toward better understanding the vast design space of animation and mapping out the various merits of animation that can enrich user interfaces from different perspectives. We first provide a structured view of the roles and drawbacks of animation in user interfaces. We then present the theoretical fundamentals for animation in information visualization. We discuss the main challenges for designing and evaluating animation in dynamic visualizations. Through an empirical study, we investigate the meaning of the Common Fate Law, applied on animation trajectories, in dynamic visual- izations. We then introduce a design space that allows a holistic characterization of staged animation and propose an authoring tool to support the prototyping and exploration of staging in visualizations. v Résumé Malgré leur omniprésence croissante dans les interfaces graphiques modernes, les animations sont encore sous-appréhendées. Bien que la recherche et la pratique fournissent des directives utiles, nous n’avons pas encore une idée claire sur ce qui définit une animation efficace pour les interfaces. La discorde sur la valeur de l’animation est principalement due au fait que la plupart des études précédentes ont étudié l’avantage d’ajouter une animation particulière à une interface particulière, laissant un manque notable dans la compréhension des nombreux aspects qui influencent la performance de l’animation. Ces études ont aussi évalué la valeur de l’animation à travers un angle empirique étroit, ce qui fait que plusieurs facettes de l’animation restent non dévoilées. Cette thèse contribue un premier pas vers une compréhension plus profonde du vaste espace de conception de l’animation, et vers une meilleure assimilation des différents mérites de l’animation. Nous fournissons d’abord une vue structurée sur les rôles et les inconvénients de l’animation dans les interfaces graphiques. Nous présentons ensuite les fondements théoriques de l’animation pour la visualisation d’information. Nous discutons les principaux défis pour la conception et l’évaluation de l’animation dans les visualisations dynamiques. Nous étudions la signification de la Loi du Destin Commun, appliquée aux trajectoires d’animation, dans les visualisations dynamiques. Nous introduisons ensuite un espace de conception qui permet une caractérisation holistique de l’animation séquentielle, et proposons un outil de création pour permettre le prototypage et l’exploration du “staging” dans les visualisations. vii Contents 1 Introduction1 1.1 Thesis statement and goals...........................8 1.2 Research contributions.............................8 2 Roles and drawbacks of animation in user interfaces 10 2.1 The 23 roles of animation in visual interfaces................. 11 2.1.1 Preliminary qualitative exploration................... 12 2.1.2 Taxonomy Methodology........................ 13 2.1.3 Taxonomy of animation roles..................... 14 Keeping in Context........................... 15 Teaching Aid.............................. 20 User Experience............................ 25 Data Encoding............................. 30 Visual Discourse............................ 33 2.1.4 Animation roles and people: summary and discussion........ 36 2.1.5 General discussion........................... 38 Coverage of general roles of animation by our taxonomy....... 38 Combinations of roles and granularity................. 39 What limits the roles of animation?.................. 39 2.2 Animation drawbacks and people........................ 40 2.2.1 Why people do not use animation?................... 40 2.2.2 Examples of ineffective animation as seen by people......... 41 2.2.3 Classification of animation drawbacks as seen by people....... 42 2.3 Conclusion................................... 42 3 Understanding dynamic information visualizations 44 3.1 Information visualization: a simplified model................. 44 3.2 From abstract data to visual representation: visual encoding.......... 45 3.3 Dynamics of an information visualization................... 47 3.3.1 Visualization states mapping...................... 48 3.3.2 Characterizing dynamic changes in information visualization..... 49 3.3.3 A taxonomy of dynamic changes in information visualization.... 51 Levels of dynamic change....................... 51 Data-Driven Change.......................... 52 Visual-Driven Change......................... 53 Variation of types of change based on the scope of change...... 53 3.3.4 Manner of a dynamic change...................... 54 3.4 Conclusion................................... 56 4 Animation for information visualization: fundamentals and challenges 57 4.1 Fundamentals of animation........................... 57 4.1.1 Animation parameters......................... 57 4.1.2 Elementary and composite animation................. 58 4.1.3 Composition based on trajectory.................... 59 4.1.4 Temporal composition......................... 60 4.2 Designing animation for information visualizations.............. 61 viii 4.2.1 Understanding animation parameters................. 61 Understanding animation trajectories................. 61 Understanding the temporal parameters of animation......... 62 4.2.2 Defining animation parameters..................... 63 4.3 Evaluating animation in information visualizations.............. 65 4.3.1 Metrics to measure the value of animation............... 65 4.3.2 Evaluation methodology........................ 67 Studied animation goals........................ 67 Evaluation methodology........................ 68 General user study design considerations............... 68 Independent variables......................... 70 Dependent variables.......................... 70 Tasks.................................. 70 Running a study............................ 71 4.4 People and animation: insights for animation design and evaluation..... 71 4.5 Conclusion................................... 72 5 Reflecting on the meaning of Common Fate in visualization 74 5.1 Background................................... 74 5.1.1 Perception and Gestalt psychology................... 75 5.1.2 Gestalt Laws in visualization...................... 75 5.1.3 Perception in visualization....................... 75 5.2 The Gestalt Law of Common Fate....................... 76 5.2.1 Criteria for perceptual grouping.................... 76 5.2.2 Visual variables with grouping..................... 77 5.3 User study background............................. 78 5.3.1 Task rationale.............................. 78 5.3.2 Summary of tasks............................ 78 5.3.3 Manipulation of visual variables.................... 79 5.3.4 Design decisions............................ 81 5.3.5 Grouping strength........................... 81 5.4 User study.................................... 81 5.4.1 Task generation............................. 82 5.4.2 Attention trials............................. 83 5.4.3 Experimental protocol......................... 83 5.5 Results...................................... 84 5.5.1 Data verification............................ 85 5.5.2 Dynamic vs. static groupings...................... 85 5.5.3 Relations