Animation in user interfaces
-
Upload
matthias-schreck -
Category
Design
-
view
2.182 -
download
2
description
Transcript of Animation in user interfaces
Animation and transitions in user interfaces
What do we really know in 2013?
Unsubstantiated ‘arguments’ against animation:
• Waste of time, both for users and designers
• Annoys users• Looks ‘less professional’• Suspiciously
skeuomorphic (which is like a death sentence)
• Reduces cognitive load• Makes the interaction
enjoyable and therefore ultimately more usable
• Good when done well• Helps compute change in an
interface• Can reduce climate change
by 0.4 degrees in 2100
Unsubstantiated ‘arguments’ for animation:
A common way to win arguments in UX:
Shout your opinion louder than the other guy.
Talk about shaky foundations…
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)
So I started to research. And dug deep.
Oh wait, they were also just opinions. No research.
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.
First research piece (1996) “Does animation in user interfaces affect decision making?”
Main findings:
• Animations in user interfaces are better when they are smoother
• Enjoyability of animated UIs NOT statistically significant
Talk about a great start here. Umpf.
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
Let me take you on a journey of discovery and adventure
Sense of vision
Comprehension
Memory
Even the perception of time itself
Less than 3 hours, 2D
Animation and vision
Your eyes have only two modes:
Saccades
Pursuits
Scanning saccades
Reflexive saccades
Open-loop pursuits
Closed-loop pursuits
triggered endogenously to explore
triggered exogenously by the appearance of a peripheral stimulus, or by the disappearance of a fixation stimulus.
Eye focuses on it, assess where it’s going. Ballistic move. 100ms
Eye keeps retinal focus on moving object without any loss
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
“Central interest” areas 7.3 alternations (4.7 seconds)
“Marginal interest” areas 17 alternations (10.9 secs)
Average length of time to spot the change
With prep in “marginal interest” areas Cut time by 70%
How easy is it to spot a change on a screen?
Where did the change happen?
…then ‘Change’ on a screen has a serious discoverability problem
If your eyes use scanning saccades to explore a picture and only see a tiny portion of it at the same time, and…
Why is this a problem?
…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…
Trigger those reflexive saccades!
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
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
What triggers reflexive saccades best?
Remember: that’s when you involuntarily look at new stuff in your peripheral vision
Clever!
So what about these Pursuits?
Can we use animation to help with those?
Animation Reflexive saccades
Users detect changes
Temporal Distortion for Animated Transitions - 2011
How should moving objects be animated to help the eye follow them?
A little test:- Randomized scatter cloud- Animation for 1 second- Various ways of animation- Participants had to follow 1 dot
Result:- Slow-in / Slow-out was best- Slow at start for open-loop pursuit- Finishes closed-loop pursuit slowly
so the eye doesn’t overshoot
Could animation improve reading off a screen?
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%
• Read out loud from a computer screen• Count symbols in a long symbol text
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.
Animation Speed (ms)
Reading Time (sec)
Reading Error Read: Relative subject duration
Counting Time (sec)
Counting Error
Count: Relative subject duration
0 122.12 11.55 1.73% 102.49 9.49 -21.05%
Animation and comprehension
Improving Users’ Comprehension of Changes with Animation and Sound: An Empirical Assessment - 2007
Parameter No animation
Missed changes 20%
Which object changed? 21% correct
Where did change start? 1.5% correct
Where did change end? 7.5% correct
Animation only
0%
83% correct
51% correct
78% correct
Results
Memory
Does Animation Help Users Build Mental Maps of Spatial Information? - 1998
Participants had to navigate two family trees and memorize them.One was animated, the other one wasn’t.
Answer questions about:• Who is who?• How do they relate to each
other?• Re-create the tree
Results:• Knowledge questions - similar• Task times - similar• Recalling structure – Animation better
Perception of time
How could we use animation to make things feel faster?
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
• 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)
Progress bars!
UI designers are worried that animation slows users down.
• 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
And while we’re talking about time, let’s talk about ‘task time’.
Average interaction designer after being told that animation ‘slows users down’.
Au contraire!
So animations can do no wrong?
I found one study that was NOT positive about it.
Not quite.
Effectiveness of Animation in Trend Visualization - 2008
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
In all seriousness though:• Massive bias in research pro animation• No research paper that set out to prove animations were bad.
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.
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!
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
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
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