Animation 25 Years Later: New Roles and Opportunities



This is the companion webpage of the following paper:

Fanny Chevalier, Nathalie Henry-Riche, Catherine Plaisant, Amira Chalbi, Christophe Hurter.
Animations 25 Years Later : New Roles and Opportunities.
Proc. of International Working Conference on Advanced Visual Interfaces AVI’16 (2016) 280-287 Logo





Thank you for taking the time to help us with your feedback!


Our goal is to draw as exhaustive as possible a list of the different roles that animations can play in a graphical user interface. By "animation", we mean a sequence of images that gives the illusion of continuous motion. Example of roles would be "transitions between two views (e.g. smoothly animate between a pie chart and a bar chart)", or "animation for notifications (e.g. bouncing icon)".


Before we provide you with our list for feedback, we would like you to think of 3 to 5 roles on your own, and write them down here. This is to encourage a broader coverage of roles, without influencing you with our classification.



Participant 1

Role 1: The icon “Settings” which turns with the drop down menu in Android (separate but synchronized animations)


-        Hooking the user

-        Providing visual comfort and aesthetics

-        Revealing/Hiding Content


Role 2: Animation of window minimization on OS X


-        Supporting tracking during layout changes


Role 3: Animation of dispersal/grouping of windows on OS X with mission control - 4 fingers UP/DOWN


-        Supporting tracking during layout changes


Comment about Role 2 and 3: For Role 2 and 3 the slower the more enjoyable to me. However, in practice I like that it goes fast.


Role 4: On websites, the pictures are animated when we move the mouse cursor over them, I like the ease-in/out and like especially that when I move the cursor away the animation restarts (and vice versa, it restarts again when I move the cursor over the picture).



-        Hooking the user

-        Providing visual comfort and aesthetics

Role 5: Animation which generate the effect of deepness.



-        User experience


Role 6: When elements are decorrelated for a moment but then they get a defined structure.

For example, when we manipulate a node in a graph and that graph get deformed and placed after that node. Example: ttp://


-        Revealing data relationships


Role 7: The movement of the mouse 1D that induces the mouvement 1D whose direction changes, for example:  (you should scroll down continously  from time to time till it stops going down, the animation is horizontal). That give me an effect of gravity.


-        Supporting a narrative


Role 8: The effect of loop in the Apple dock (with an effect x2 in size, >2 I like it, it is so attractive, <2 it is too frustrating) (This is how I set the parameter of that effect)


-        Staying oriented during navigation


Role 9: First use of an application when all gets grey only the useful part with an explanation bullet (for example, the help of Diffamation on the TAN website:  → click on “?”) and when you press “Next” the highlighted zone and explanation bullet move


-        Explaining how a system works

-        Teaching a new representation of information


Participant 2

Role 1: The wizz in MSN: tech window of the messenger vibrates to catch the attention that a message has been received


-        Maintaining up to date


Role 2: Clippy (aka Microsoft's Jar-Jar)


-        Teaching a new representation of information (for example sometimes he appears next a button to explain the function associated with it)

-        Affordance and preview (if he moves or a bullet appears, it means that he  have something to say)


Role 3: Bouncing lists


-        Providing visual comfort and aesthetics


Role 4: The "3-2-1" in Photo Booth


-        Making activity and progress visible


Role 5: The head of the character displayed on the bottom in the Doom game


-        Maintaining up to date (“because he becomes uglier each time you lose life”)

-        Highlight content (“because he breathes and turns his head faster each time he loses life, which may be intended to remind you that you are dying”)

-        Hooking the User (the designers could have put a static head, but part of their rationale could be “but a moving head is more cool””)


Role 6: The screen (complete) that becomes darker for few seconds before turning on hibernate


-        Maintaining up to date


Participant 3

Role 1: Inertia in automatic scrolling/flicking/kinetic scrolling (allows to delegate the scrolling to the system)


-        Staying oriented during navigation


Role 2: Animated transitions in “Histomages” because it allows to follow the correspondence between the pixel space and the histogram space. 


-        Supporting tracking during layout changes



Role 3: All the animations of the windows  on Mac OS X (minimization of a document, resize, etc.). I think it doesn’t add anything to me, but it is beautiful.


-        Keeping the user engaged


Role 4: Animation of notifications Mac(transition from offscreen to screen) that increase the attractiveness of notifications


-        Highlight content


Role 5: Animation of transition between virtual desktops that helps builing a mental model of these desktops.


-        Staying oriented during navigation


Feedback about the taxonomy:

-        No difficulty for for classifying my examples with the taxonomy

-        I can't think of other examples not covered by your list


Participant 4

Role 1: Special effects in user interface. For example, the Mac OS window animation effect during minimization and maximization.


-        Making activity and progress visible


Role 2: Animated transitions in infographics. For example, the staggered or staged animations in scatterplots that smooth the dot movements after changing axes.


-        Supporting tracking during layout changes


Role 3: Animation for tuning optimization processes. For example, the force-directed algorithm iteratively optimizes a graph’s layout; re-drawing the graph after each iteration can show the status of the algorithm, e.g., is it trapped in local optima?


-        Maintaining up to date

-        Conveying uncertainty or randomness



Role 4: Animation for teaching computer science. For example, Mike Bostock created a series of animations (link) for teaching data structures and algorithms. The animations show how the algorithms transform the data step by step (or, line by line of the code).


-        Illustrating an algorithm


Role 5: Animation for encoding the time dimension. For example, GraphDiaries uses animations to show how a graph evolves over time.


-        Encoding object attribute

-        Storytelling


Feedback about the taxonomy:

-        The taxonomy seems complete and provides a nice design space. I can easily and confidently classify my examples.

-        The taxonomy provides me with a language to explain the goals of my animation design

-        As a reader, I want to learn more about how this taxonomy could benefit my studies. For example, your graph task taxonomy paper can help me select tasks to test my graph visualization. However, for this paper, I am not sure what benefits or implications I will gain by labeling my animation design with the roles. For example, I may want to learn: if I want to hook the user, should I use animation everywhere in my software?

-        Benefit is in clarifying and communicating the animation descriptions. I think we say that.

-        Overall, I am positive toward this paper and it looks like a high impact one!



Participant 5

Role 1: Tutorial - Animation showing how to interact with a new device – Surface comes to mind. Though after seeing it once I would never access the animation again, it was useful for figuring out the left, right, top, bottom swipes.


Role 2: Tutorial - Animations demonstrating how to do certain things – for example sketching. Not sure though if this falls in the video category, but the content seems informal enough that I would categorize this as an animation.


Role 3: Awareness - Animations that indicate that there has been change in state since the last time you checked. For example, the mail icon vibrating slightly to show that there is new mail.


Role 4: Simulations – The driving simulator provides a simulated driving experience through animations.


Role 5: Awareness – the good old download progress bar (and similar widgets).


Participant 6

Role 1: Loading animations (the circle spinner, or line loader on almost any loading UI) I think these are essential to giving users valuable feedback while they wait for something to happen. Without them, chaos would ensue.


Role 2: Expand and Collapse animations for things like opening and email (Inbox for example). This type of animation implies a physical nature to the item. It feels like I am opening a letter when I do this. gives me a little thrill


Role 3: Direct manipulation animations are my most favorite, so for example zooming a photo or other object always pleases me, and feels directly correlated to my actions.


Role 4: The  in inbox is a very cool animation when the users mouses over the button it expands with options. The red button spins and options flies out of it. Ironically, I created this design for a MS product back in 2005. I really like the feel of this animation, because its like "HEY check out the options, they're cool!" and I don't even have to right click to get it.


Role 5: On hover (for mouse) and touch visualizations (for touch) are all animations that I find very helpful in making sure that users knows how/what something might do.



Participant 7

Role 1: Click feedback on Material design

Role 2: Information panel moving in out of screen edge. Helps figure out the invocation method (swipe from edge)


Role 3: Fade in of many items on map. Instead of showing all items appearing at once, showing them facing in with tiny delays to make it seem more like an organic entity. I find the effect pleasant and engaging.


Role 4: Load dynamically / manage perception of time / reactivity. Showing elements one at a time may give the impression of responsiveness even though the UI is still loading content behind the scene, it is seen as actually doing something.


Role 5: Transform from point of origin. When designing the interface for the One-Click-To-OneNote feature, we wanted the user to understand what was happening to their note when they created a new one, so the designers worked on an animation which shows the paper folding and disappearing in the OneNote logo to convey this is where users should look for it next time.




Participant 8

Role 1: To track the direction of views, i.e. to know where the next view is coming from

Role 2: To tell the user to follow a certain direction.

Role 3: Feedback to the user. For example, if user needs to swipe or move a mouse for a certain amount of time or distance, then animation could be a good way to show that the performed movement was not enough

Role 4: To make interaction much nicer and prettier.

Role 5: To let the user know that the current state is changed. When 2 views are similar, transition without animation may be unnoticeable.


Participant 9

Role 1: Animation for waiting while loading a web page/application

Role 2: Animation while moving your mouse in a web page

Role 3: Animation when dragging an object (in a game for example) showing the possible trajectories

Role 4: Animation while closing a window or an application


Participant 10

Role 1: Transition between two views

Role 2: Notification

Role 3: Result of an action (e.g.: check out done)

Role 4: Tutorial/user guide

Role 5: Progress

Role 6: Loading


Participant 11

Role 1: Animated Scrolling

Role 2: Collapsed forms and comments

Role 3: Pull to refresh

Role 4: Animation to guide Users


Participant 12

Role 1: Indicate a location on the screen

Role 2: Having the attention of the user

Role 3: Add more information on icons


Feedback about the taxonomy:

I'm not a specialist of this field, and all I thought about was already in this paper (context awareness, taxonomy orthogonality...).


Participant 13

Role 1: Window operations minimizing and maximizing

Role 2: Continuous transitions based on continuous gestures - for example, animation while swiping

Role 3: Animation to suggest interface limits - such as bounceback in iphones


Participant 14

Role 1: Gives feedback of user actions

Role 2: Shows data updates (e.g. new message in a messenger)

Role 3: Shows that computer is computing and not frozen

Role 4: Notifications


Participant 15

Role 1: Emphasis

Role 2: Feedback of action taken

Role 3: Hint for possible action

Role 4: Indication of direction

Role 5: Aesthetics

Role 6: Motivation for the user



Participant 16

Role 1: Navigation in the same page view, with update of a feature such as a map

Role 2: The boxes of a web form, eg asking for log in info. The box is highlighted and change appearance when you click on it.

Role 3: On mac when you minimise a window, it is shrinked quickly to the bottom dock.


Participant 17

Role 1: "Bounce" to indicate scrolling boundary

Role 2: purely emotive animations, such as the google inbox "empty inbox sunrise animation"

Role 3: "Defocusing" to indicate an overlay

Role 4: "Flipping" animations to indicate a sequential relationship

Role 5: Fading in and out (eg. a video player slowly becoming darker to indicate focus on the video)


Participant 18

Role 1: Animation to show how an application works or how to buy on a website

Role 2: Explain a task to the user

Role 3: Animation to advertise a product


Participant 19

Role 1: Change of acoustic properties (to inform the user about the acoustic properties within a 3D virtual scene)

Role 2: transition between virtual scenes

Role 3: animation of objects in virtual scenes


Participant 20

Role 1: Scrolling,

Role 2: Useless but fun,

Role 3: Scrolling,

Role 4: Interactivity cues,!/sanofi/

Role 5: Stepwise animations,

Role 6: Suggested Interactivity,