Animations are often described as visually pleasant, playful and engaging, all qualities that improve the user’s experience when interacting with a system. Animations are now considered a core component of UI design. In Google Android’s Material Design principles for instance, “authentic motion” is defined to “describe spatial relationships, functionality, and intention with beauty and fluidity”. The Windows UX design guidelines state that “purpose-ful, well-designed animations bring apps to life and make the expe-rience feel crafted and polished […] The quality of the experience depends on how well the app responds to the user, and what kind of personality the UI communicates.” We find five roles for animation as a tool to enhance user experience.



Hooking the user

Animated introductions can make a website or application attrac-tive and memorable, possibly “hooking” users and encouraging them to explore further.

The Christmas express website starts with a man pedaling on a bike then opens a full landscape of turning wheels and falling snowflakes and music).

Applications like Soundhound shows radiating bubbles of changing colors while waiting for users to get started

Burke, M., Gorman, N., Nilsen, E. and Hornof, A., 2004, April. Banner ads hinder visual search and are forgotten. In CHI'04 extended abstracts on Human factors in computing systems (pp. 1139-1142). ACM.



Keeping the user engaged

Because animations attract a viewer's attention, it can be used to keep user engaged (or get their attention back) when an activity require a substantial attention time.

Pere Noel
Video games such as HayDay and educational material ( can leverage animations to keep their audience engaged in the game, or as a reward mechanism after a substantial effort or lengthy exercise. This role is also important in presentations and report tools such as PowerPoint contain a number of animations that an author can insert to retain the attention of the audience. It most useful when content require a long attention time and the audience is passive.

Many data-driven videos and documentaries contain animated charts in addition to the voice narration, to encourage the viewer to watch the animations until the end.

Fereshteh Amini, Nathalie Henry Riche, Bongshin Lee, Christophe Hurter, and Pourang Irani. 2015. Understanding Data Videos: Looking at Narrative Visualization through the Cinematography Lens.CHI 2015. 1459-1468



Providing visual comfort and aesthetics

Animation allows for smooth transitions, which can be experi-enced as more visually comfortable than jarring, abrupt transitions. When properly done, animations can also have real aesthetics qualities.

Markus Ekert, a motion designer, used animation to simulates a curtain effect revealing content under the main window of a touch mobile phone.

No StaggeringNoStaggering


Staggered animations, which consist of introducing a small delay in the motion start time of elements, creates a smooth feel of ballet choreography.

Chevalier, F., Dragicevic, P., & Franconeri, S. (2014). The not-so-staggering effect of staggered animated transitions on visual tracking. IEEE TVCG, 20(12), 2241-2250.

icons explode into windows, product cards flip to show more details as if on the back of a card as used in Histomages.

Chevalier, F., Dragicevic, P., & Hurter, C. (2012). Histomages: fully synchronized views for image editing. In Proc. UIST’12, 281-286.

Gonzalez, C., 1996, April. Does animation in user interfaces improve decision making?. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 27-34). ACM.

Thomas, B.H. and Calder, P., 1995, December. Animating direct manipulation interfaces. In Proceedings of the 8th annual ACM symposium on User interface and software technology (pp. 3-12). ACM.



Making activity visible

Animation is used as a visual feedback to track progress, and a distractor to fight boredom when the system is busy.


Since the hourglass cursor introduced in Windows 1.0 (1985) and NeXTSTEP’s spinning wait wheel (1989), a variety of animated icons have been used in UIs in place of the cursor to indicate that the system is busy working (presumably) on an operation. Progress bars also shows the remaining time, or percentage of completion before the process is completed. The escriba website ( , for example, uses creative animations to keep users entertained while waiting.



Revealing/hiding content

Content may not be visible at all times, but made visible through hovering or clicking, and animations are used to reveal or hide content in a transient manner.


Exemples: side panels swooshing from the edge of mobile device screens. Drop-down menus expand smoothly on desktop applications, balloon help appear progressively when the cursor hovers over icons. Ephemeral adaptation is a technique that relies on prediction to progressively reveal features in an interface: predicted items appear immediately, while remaining items gradually fade in.

Findlater, L., Moffatt, K., McGrenere, J., & Dawson, J. (2009). Ephemeral adaptation: The use of gradual onset to improve menu selection performance. In Proc. CHI’09, 1655-1664.



Providing a virtual tour

Animation can help users experience phenomena from the physical world and experiment with alternatives.

When architecting buildings in a city, animations of the virtual world can help comprehend what views can be seen from this building and how it will integrate with the city landscape. While this can be achieved with still pictures, the experience is much more realistic via animated tours.

Ferreira, N., Lage, M., Doraiswamy, H., Vo, H., Wilson, L., Werner, H., Park, M., & Silva, C. (2015). Urbane: A 3D Framework to Support Data Driven Decision Making in Urban Development. In Proc. of IEEE VAST’15.


Similarly, providing simulated experi-ences about laws of biology and physics via animations enable people to somewhat experience the effect of gravity on earth vs the moon by showing a short animation of a bouncing ball; or travel in the galaxy as World Wide Telescope affords.



Providing feedback of input mechanism

Animation can be tightly coupled with direct user input, to convey a particular input metaphor, the state of the input device, or the state the device sensors.

Performing a slide or swipe gesture on a long document on a tablet triggers the auto scroll of the document, whose speed progressively decreases (simulating friction) until the document stops moving. Parallax effects, often seen in phones, respond to the orientation of the input device, captured by accelerometers. Touch devices some-times also use a ripple animation to confirm input.