This presentation is based on about 20 research papers around animation in user interfaces, and goes into more detail for about 10 of them. It explains what we really know about the effects of animation in user interfaces, trying to cut through all the opinions and assumptions that have been established in the field of interaction design and user experience.
2. A common way to win arguments in UX:
Shout your opinion louder than the other guy.
Unsubstantiated ‘arguments’ Unsubstantiated ‘arguments’ for
against animation: animation:
• Waste of time, both for • Reduces cognitive load
users and designers • Makes the interaction
• Annoys users enjoyable and therefore
• Looks ‘less professional’ ultimately more usable
• Suspiciously • Good when done well
skeuomorphic (which is • Helps compute change in an
like a death sentence) interface
• Can reduce climate change
by 0.4 degrees in 2100
3. So I started to research. And dug deep.
Two of the first and most cited ‘research
pieces’ in this field:
• Cone Trees: Animated 3D
Vizualisations of hierarchical
information (1991)
• From Cartoons to the user interface
(1993)
Oh wait, they were also just opinions.
No research.
Talk about shaky foundations…
4. Let’s draw a line in the sand:
From here on, we only consider
stuff ‘worth believing’ if it’s
backed up by at least one
empirical study.
Main findings:
First research piece (1996) • Animations in user interfaces are better when they
“Does animation in user are smoother
interfaces affect decision • Enjoyability of animated UIs NOT statistically
making?” significant
Talk about a great start here. Umpf.
5. Some call me a hero…
In chronological order:
• Cone Trees: Animated 3D Visualizations of hierarchical information – 1991: www2.parc.com/.../UIR-1991-06-Robertson-CHI91-Cone.pdf
• Animation: from cartoons to the user interface – 1993:
http://faculty.washington.edu/aragon/classes/hcde411/w13/readings/Chang_AnimationInUI_UIST93.pdf
• Does animation in user interfaces improve decision making? – 1996: http://hss.cmu.edu/departments/sds/ddmlab/papers/gonzalez1996.pdf
• TO SEE OR NOT TO SEE: The Need for Attention to Perceive Changes in Scenes – 1997:
http://www.cs.ubc.ca/~rensink/publications/download/PsychSci97-RR.pdf
• Does Animation Help Users Build Mental Maps of Spatial Information? – 1998: http://www.cs.umd.edu/hcil/jazz/learn/papers/CS-TR-3964.pdf
• Moving Icons: Detections and distractions – 2001: http://www.cs.kent.edu/~jmaletic/softvis/papers/Bartram01.pdf
• Evaluating Animation in the Periphery as a Mechanism for Maintaining Awareness – 2001:
http://www.cc.gatech.edu/~john.stasko/papers/interact01.pdf
• Interfaces for staying in the flow – 2004: http://ubiquity.acm.org/article.cfm?id=1074069
• Benefits of animated scrolling – 2004: http://hcil2.cs.umd.edu/trs/2004-14/2004-14.html
• Phosphor: Explaining Transitions in the User Interface Using Afterglow Effects – 2006: http://research.microsoft.com/pubs/64304/uist2006-
phosphor.pdf
• Rethinking the progress bar – 2007: http://chrisharrison.net/projects/progressbars/ProgBarHarrison.pdf
• Improving Users’ Comprehension of Changes with Animation and Sound: An Empirical Assessment – 2007: http://oatao.univ-
toulouse.fr/5620/1/Chatty_5620.pdf
• Interfaces That Flow: Transitions as Design Elements – 2007: http://www.uxmatters.com/mt/archives/2007/04/interfaces-that-flow-transitions-as-
design-elements.php
• The effect of animated transitions in zooming interfaces – 2008: http://dl.acm.org/citation.cfm?id=1385569.1385642
• Animated Versus Static User Interfaces: A Study of Mathsigner™ - 2008: https://www.waset.org/journals/ijhss/v3/v3-6-59.pdf
• Effectiveness of Animation in Trend Visualization – 2008: http://research.microsoft.com/en-us/um/redmond/groups/cue/publications/tvcg2008-
trendvis.pdf
• Cognitive processes involved in smooth pursuit eye movements. – 2008: http://www.ncbi.nlm.nih.gov/pubmed/18848744
• Animations in User Interface Design - Essential Nutrient Instead of Eye Candy – 2010: http://www.centigrade.de/en/blog/article/animations-in-user-
interface-design-essential-nutrient-instead-of-eye-candy/
• Animated UI Transitions and Perception of Time – a User Study on Animated Effects on a Mobile Screen – 2010:
http://dmrussell.net/CHI2010/docs/p1339.pdf
• Faster Progress Bars: Manipulating Perceived Duration with Visual Augmentations – 2010:
http://www.chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf
• Using Text Animated Transitions to Support Navigation in Document Histories – 2010: http://www.lri.fr/~anab/publications/diffamation-CHI2010.pdf
• Temporal Distortion for Animated Transitions – 2011: http://hal.archives-ouvertes.fr/docs/00/55/61/77/PDF/timedistort.pdf
• Showing User Interface Adaptivity by Animated Transitions – 2011: http://dl.acm.org/citation.cfm?doid=1996461.1996501
• Acceptance and speed of animation in business software- 2011:
http://dl.acm.org/citation.cfm?id=2042283.2042345&coll=DL&dl=GUIDE&CFID=256181127&CFTOKEN=65177658
6. Let me take you on a journey
of discovery and adventure
Less than 3 hours, 2D
Sense of vision
Comprehension
Memory
Even the
perception of
time itself
8. Your eyes have only two modes:
triggered endogenously to
Scanning saccades explore
Saccades
triggered exogenously by
the appearance of a
Reflexive saccades peripheral stimulus, or by
the disappearance of a
fixation stimulus.
Open-loop pursuits Eye focuses on it, assess
where it’s going. Ballistic
move. 100ms
Pursuits
Eye keeps retinal focus on
Closed-loop pursuits moving object without
any loss
9. How easy is it to spot a change on a screen?
TO SEE OR NOT TO SEE: The Need for Attention to Perceive Changes in Scenes - 1997
An interstimulus interval (ISI) is
the temporal interval between
the offset of one stimulus to the
onset of another
Where did the change happen? Average length of time to spot the change
“Central interest” areas 7.3 alternations (4.7 seconds)
“Marginal interest” areas 17 alternations (10.9 secs)
With prep in “marginal interest” areas Cut time by 70%
10. Why is this a problem?
If your eyes use scanning saccades to explore a picture and only see a
tiny portion of it at the same time, and…
…if you therefore only notice changes in areas you focus on, and …
…if even the smallest interruption between one state of an image and
the next can make you miss pretty much everything else…
…then ‘Change’ on a screen has a
serious discoverability problem
11.
12. Trigger those reflexive
saccades!
Remember: that’s when you involuntarily look at new stuff
in your peripheral vision
What triggers reflexive saccades best?
A study:
• 1 main task (browsing) for users to concentrate on
• 1 side task: icons changed in various animated ways
• What would be noted the fastest?
Outcome:
• Shape-changing or colour-changing icon registered
after 2-4 seconds
• Moving icon registered after 1 second
• Best way to animate: quick movement while anchored
Why did changes in colour or shape perform badly?
• Almost colour-blind in our peripheral vision
• 10 degrees away from our fixation, we only see one
tenth of the detail
• ‘Tunnel vision’ gets worse under stress
13. Clever!
Reflexive Users detect
Animation
saccades changes
So what about these Pursuits?
Can we use animation to help with
those?
14. How should moving objects be animated to help the eye
follow them?
A little test: Result:
- Randomized scatter cloud - Slow-in / Slow-out was best
- Animation for 1 second - Slow at start for open-loop pursuit
- Various ways of animation - Finishes closed-loop pursuit slowly
- Participants had to follow 1 dot so the eye doesn’t overshoot
Temporal Distortion for Animated Transitions - 2011
15. Could animation improve reading off a screen?
• Read out loud from a computer screen
• Count symbols in a long symbol text
Animation Reading Time Reading Error Read: Relative Counting Time Counting Count: Relative
Speed (ms) (sec) subject (sec) Error subject duration
duration
0 122.12 11.55 1.73% 102.49 9.49 -21.05%
100 117.86 7.73 1.92% 86.97 6.09 -5.53%
300 115.58 5.28 -1.85% 79.02 2.79 -1.28%
500 116.44 5.25 -5.20% 77.98 4.14 -3.00%
Animated scrolling…
• … reduces reading errors by up to 54% and
• … reduces task time by up to 3.1% for reading trials and by 24% for counting tasks
• ... subjectively helped 17 out of 20 participants.
17. Improving Users’ Comprehension of Changes with Animation and Sound: An
Empirical Assessment - 2007
Results
Parameter No animation Animation only
Missed changes 20% 0%
Which object changed? 21% correct 83% correct
Where did change start? 1.5% correct 51% correct
Where did change end? 7.5% correct 78% correct
19. Participants had to navigate two family trees and memorize them.
One was animated, the other one wasn’t.
Does Animation Help Users Build Mental Maps of
Spatial Information? - 1998
Answer questions about: Results:
• Who is who? • Knowledge questions - similar
• How do they relate to each • Task times - similar
other? • Recalling structure – Animation better
• Re-create the tree
21. Our perception of time is weird!
We judge time by remembered peaks,
not as a linear flow
We put a lot of emphasis on the end of
an experience
How could we use animation to
make things feel faster?
22. Progress bars!
• Participants were shown two progress bars in succession.
• Each one had a different way of filling up (accelerating, decelerating,
constant, etc.) but they all took the same time
• Participants had to state which ones they believed were faster
• A second study covered various colour animations inside the bar in the same
way
Progress bars are perceived faster when…
• … they started slow and the became faster at the end
• … a decelerating backwards-animated ribbon was used to fill the
bar (perceived about 11% faster)
23. And while we’re talking about time, let’s talk
about ‘task time’.
UI designers are worried that animation slows users down.
Au contraire!
• Every single study: fast animations work as
well as slow ones doesn’t have to be
slow
• Sweet spot is around 300ms for ‘changes
in a UI’ (SAP study about business
applications)
• In many studies, animation actually
improved task time
Average interaction designer after being told that
animation ‘slows users down’.
24. So animations can do no
wrong?
Not quite.
I found one study that was NOT positive about it.
25. During trend
visualizations, animations…:
• … had a negative effect on
analysis
• … often visually blocked a
clear view
• … confused users when
too many items were
moving
• … but participants enjoyed
animations a lot
Effectiveness of Animation in Trend Visualization - 2008
In all seriousness though:
• Massive bias in research pro animation
• No research paper that set out to prove animations were bad.
26. What have we learned?
• When showing change, avoid ISIs (or gaps) at all cost.
• You need to direct attention to areas of change. People will not see it by
themselves because saccades and induced change blindness will hinder them.
• To get attention and help users follow a movement, use slow-in/slow-out
• When users have to read on screen, help them by offering animated scrolling
• Animation doesn’t have to slow down task time, it often speeds it up
• If you want to grab attention in the periphery, anchor the icon and move it back
and forth
• Animating changes vastly improves recall of the actual change
• Apply animations when moving through a hierarchy for better spatial
understanding
• Animation can make users believe something is faster. For progress bars, start slow
then accelerate at the end, and fill with a backwards decelerating ribbon
animation.
• Keep standard animations at around 300ms, but more complex ones can take
longer
• Don’t animate too many things at the same time. The more focussed, the better.
27. Now that you know the truth about animation in user interfaces…
…you should keep those arguments with animation opponents civil.
… before you crush them with an empirical study!
28. Thank you!
Matthias “Matty” Schreck
@sardionerak
Yes, this presentation will be on
Slideshare. Why not leave a
nice comment when you
download it?
http://www.slideshare.net/mattyschreck
29. Some good resources
Meaningful transitions:
http://www.ui-transitions.com/#home
Windows – animations and transitions:
http://msdn.microsoft.com/en-us/library/windows/desktop/aa511285.aspx
30. Picture sources
• Slide 2: http://thecripplegate.com/wp-content/uploads/2012/01/SP11.jpg (Street preacher)
• Slide 3: http://www.travlang.com/blog/wp-content/uploads/2010/04/pisa_00.jpg (Tower of Pisa)
• Slide 4: http://farm2.static.flickr.com/1188/964853217_3736a1b688.jpg (Girl drawing line in the sand)
• Slide 6:
http://www.scmp.com/sites/default/files/styles/980w/public/2012/12/31/the_hobbit_an_unexpected_journey_movies_the_hobb_32983803.jpg
(the hobbit)
• Slide 7: http://www.theeyecarecompany.com.au/images/eye.jpg (eye)
• Slide 11: http://www.abc.net.au/news/image/642988-3x2-940x627.jpg (rescue dog)
• Slide 12: http://www.euronav.co.uk/Products/Leisure/RADARpc/FullRadar2ndMonitor.jpg (radar)
• Slide 16: http://hiphuntersblog.files.wordpress.com/2013/01/stacy-dash-mbc-net-movie-guide-clueless-87168.jpg (clueless)
• Slide 18: http://www.bboyscience.com/wp-content/uploads/2012/02/homerbrain.jpg (Homer brain)
• Slide 20: http://3.bp.blogspot.com/-QuBV_hrDEQM/UHDA1fZRGeI/AAAAAAAAANQ/Tc_xnXZypK0/s1600/the_persistence_of_memory_-
_1931_salvador_dali.jpg (Dali clock)
• Slide 22: http://blog.mclaughlinsoftware.com/wp-content/uploads/2011/02/Excel2011_ConfigureMySQLQuery02.png /
http://windows8transfer.com/wp-content/uploads/2011/10/windows8-file-copy-box.png (Progress bars)
• Slide 23: http://cultofmac.cultofmaccom.netdna-cdn.com/wp-content/uploads/2011/05/dawson-crying.jpg (crying)
• Slide 24: http://crazy-frankenstein.com/free-wallpapers-files/animal-wallpapers/cute-animals-wallpapers/cute-puppy-flower-animals-wallpapers-
1600x1200.jpg (puppy with flower)
• Slide 27: http://www.funny-potato.com/blog/wp-content/uploads/2008/09/boxing-punch.jpg / http://www.glitters20.com/wp-
content/uploads/2012/11/Funny-Boxing-16.jpeg
I hereby declare that I really don’t know much about the digital rights of pictures, but that I simply hope that instead of being angry with me and ask me to
take it out, you simply enjoy this presentation and feel proud that your image was good enough that it made it in