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
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)
Classification:
- Hooking the user
- Providing visual comfort and aesthetics
- Revealing/Hiding Content
Role 2: Animation of window minimization on OS X
Classification:
- Supporting tracking during layout changes
Role 3: Animation of dispersal/grouping of windows on OS X with mission control - 4 fingers UP/DOWN
Classification:
- 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).
Example: http://www.gaelperroy.com/
Classification:
- Hooking the user
- Providing visual comfort and aesthetics
Role 5: Animation which generate the effect of deepness.
Example: http://matthew.wagerfield.com/parallax/
Classification:
- 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://matthew.wagerfield.com/parallax/
Classification:
- Revealing data relationships
Role 7: The movement of the mouse 1D that induces the mouvement 1D whose direction changes, for example: http://buntspenden.bleech.de/de/ (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.
Classification:
- 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)
Classification:
- 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: http://tan.lille.inria.fr/diffamation/ → click on “?”) and when you press “Next” the highlighted zone and explanation bullet move
Classification:
- 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
Classification:
- Maintaining up to date
Role 2: Clippy (aka Microsoft's Jar-Jar)
Classification:
- 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
Classification:
- Providing visual comfort and aesthetics
Role 4: The "3-2-1" in Photo Booth
Classification:
- Making activity and progress visible
Role 5: The head of the character displayed on the bottom in the Doom game
Classification:
- 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
Classification:
- Maintaining up to date
Participant 3
Role 1: Inertia in automatic scrolling/flicking/kinetic scrolling (allows to delegate the scrolling to the system)
Classification:
- 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.
Classification:
- 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.
Classification:
- Keeping the user engaged
Role 4: Animation of notifications Mac(transition from offscreen to screen) that increase the attractiveness of notifications
Classification:
- Highlight content
Role 5: Animation of transition between virtual desktops that helps builing a mental model of these desktops.
Classification:
- 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.
Classification:
- 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.
Classification:
- 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?
Classification:
- 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).
Classification:
- Illustrating an algorithm
Role 5: Animation for encoding the time dimension. For example, GraphDiaries uses animations to show how a graph evolves over time.
Classification:
- 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, http://www.soleilnoir.net/believein/#/start
Role 6: Suggested Interactivity, http://peopleviz.gforge.inria.fr/trunk/SI_cues/