KEEPING IN CONTEXT
One of the most used roles of animation is to keep users aware of the system’s state, as well as keep them oriented in the information space during changes and manipulations. We include four roles in this category.
Staying oriented during navigation
Navigating from an initial point to a target point in an information space (by which we mean a location, or a particular view), was traditionally accomplished by suddenly jumping to the end point. Animation is now commonly used to make navigation feel smooth instead of jarring.
Such animations are commonly used in maps
Such animations are commonly used in Zoomable User Interfaces (ZUIs).
Infinite Zooming and Pan in a ZUI. (http://www.cs.umd.edu/hcil/pad++/)
Bederson, B. B. (2011). The promise of zoomable user interfaces. Behaviour & Information Technology, 30(6), 853-866.
When the navigation is more complex, a staged animation breaks down the animation into multiple steps. For example, when users need to navigate from one branch of a large organization chart to another, SpaceTree will 1) shrink the branches that get in the way of the new layout; 2) recenter the trimmed tree so that the new branch will fit on the screen, 3) grow the branch out of the new focus point.
SpaceTree Plaisant, C., Grosjean, J., & Bederson, B. B. (2002). Spacetree: Supporting exploration in large node link tree, design evolution and empirical evaluation. In Information Visualization, 57-64.
Supporting the tracking of objects during layout change
When the layout of a display changes, it is important that users understand what happens to objects of interest.
GLIIMPSE, This technique animates from a LaTeX file containing markup instructions such as \centering to its rendered version, conveying the mapping from instruction to visual effect.Dragicevic, P., Huot, S., & Chevalier, F. (2011). Gliimpse: Animating from Markup Code to Rendered Documents and Vice-Versa. In Proc. UIST’11.
Hurter, C., Taylor, R., Carpendale, S. and Telea, A., 2014, March. Color tunneling: Interactive exploration and selection in volumetric datasets. InVisualization Symposium (PacificVis), 2014 IEEE Pacific (pp. 225-232). IEEE.
Kim, B., Lee, B., Knoblach, S., Hoffman, E. and Seo, J., 2009. GeneShelf: A web-based visual interface for large gene expression time-series data repositories. Visualization and Computer Graphics, IEEE Transactions on,15(6), pp.905-912.
Cordeil, M., Hurter, C. and Conversy, S., 2011, October. Amélioration du circuit visuel des Contrôleurs Aériens pour relier les données entre visualisations en utilisant des transitions animées. In 23rd French Speaking Conference on Human-Computer Interaction (p. 9). ACM.
Dessart, C.E., Motti, V.G. and Vanderdonckt, J., 2012, May. Animated transitions between user interface views. In Proceedings of the International Working Conference on Advanced Visual Interfaces (pp. 341-348). ACM.
Mackinlay, J.D., Robertson, G.G. and DeLine, R., 1994, November. Developing calendar visualizers for the information visualizer. In Proceedings of the 7th annual ACM symposium on User interface software and technology(pp. 109-118). ACM.
Maintaining up to date
Dynamic systems have a constant activity, and may prompt the user of the changes in real time or sporadically by animating ob-jects on the screen to keep her up to date about situations.
An example is the minute hand of a clock widget that constantly moves to show the current time. Monitoring applications, such as PlanePlotter that visualizes air traffic in real time, also use animation to maintain the data representation up to date.
Animation can also be used as a notification mechanism to keep the user aware of updates from applications non visible on the screen: e.g. Moticons are moving icons on the periphery of the display that are used to signal new activity of an application, like the Mail icon that jumps when a new message arrives in the mailbox.
Bartram, L., Ware, C., & Calvert, T. (2003). Moticons: detection, distraction and task. International Journal of Human-Computer Studies, 58(5), 515-545.
Dyck et al. observe that many games use animations for “calm notification” of events, as, e.g., in Warcraft III, where text notifications on achievements fade after a short time, and animated red concentric circles and arrows show the user where an event is taking place.
Dyck, J., Pinelle, D., Brown, B., & Gutwin, C. (2003). Learning from Games: HCI Design Innovations in Entertainment Software. In Graphics Interface, 237-246.
Rufiange, S. and McGuffin, M.J., 2013. DiffAni: Visualizing dynamic graphs with a hybrid of difference maps and animation. Visualization and Computer Graphics, IEEE Transactions on, 19(12), pp.2556-2565.
Guilmaine, D., Viau, C. and McGuffin, M.J., 2012, May. Hierarchically animated transitions in visualizations of tree structures. In Proceedings of the International Working Conference on Advanced Visual Interfaces (pp. 514-521). ACM.
Dessart, C.E., Genaro Motti, V. and Vanderdonckt, J., 2011, June. Showing user interface adaptivity by animated transitions. In Proceedings of the 3rd ACM SIGCHI symposium on Engineering interactive computing systems (pp. 95-104). ACM.
Huhtala, J., Sarjanoja, A.H., Mäntyjärvi, J., Isomursu, M. and Häkkilä, J., 2010, April. Animated UI transitions and perception of time: a user study on animated effects on a mobile screen. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 1339-1342). ACM.
Replaying history, summarizing
Animation can be used to replay history of events that happened on a dynamic system, to reduce change blindness, or to allow one to go back in time.
Diffamation helps users track how a document evolved over time. It uses smooth transitions to show added text appearing slow-ly (in green), and text that was removed (in red) progressively shrinks and disappears. The rest of the text moves in trajectories that preserve the document structure and reduces the visual flow.
Chevalier, F., Dragicevic, P., Bezerianos, A., & Fekete, J. D. (2010). Using text animated transitions to support navigation in document histories. In Proc. CHI’10, 683-692.
Mnemonic Rendering uses animation as a flashback of the histo-ry of unseen pixels (i.e. occluded by another window, in a mini-mized window, or because the viewer was looking away) in a sped-up timeline when these hidden pixels become visible to the viewer again.
Bezerianos, A., Dragicevic, P., & Balakrishnan, R. (2006). Mnemonic Rendering: An Image-Based Approach for Exposing Hidden Changes in Dynamic Displays. In Proc. of UIST’06, 159-168.
Zoetrope is another example enabling user to go back in time on web page content using a set of lenses. In this work, authors stress the importance of conveying a sense of continuity (e.g. low frame rate animation) when playing back the history, and argue for some-times filling artificially the blank between versions to provide it.
Adar, E., Dontcheva, M., Fogarty, J., & Weld, D.S. (2008). Zoetrope: interacting with the ephemeral web. In Proc. of UIST’08.