Animation in user interfaces

  • 1,954 views
Uploaded on

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 …

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.

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
1,954
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
23
Comments
3
Likes
9

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. A common way to win arguments in UX:Shout your opinion louder than the other guy.Unsubstantiated ‘arguments’ Unsubstantiated ‘arguments’ foragainst 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
  • 2. So I started to research. And dug deep.Two of the first and most cited ‘researchpieces’ 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…
  • 3. 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 smootherinterfaces affect decision • Enjoyability of animated UIs NOT statisticallymaking?” significant Talk about a great start here. Umpf. 
  • 4. 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
  • 5. Let me take you on a journeyof discovery and adventureLess than 3 hours, 2DSense of visionComprehensionMemoryEven theperception oftime itself
  • 6. Animation and vision
  • 7. 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
  • 8. 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%
  • 9. Why is this a problem?If your eyes use scanning saccades to explore a picture and only see atiny 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 andthe next can make you miss pretty much everything else… …then ‘Change’ on a screen has a serious discoverability problem
  • 10. Trigger those reflexivesaccades!Remember: that’s when you involuntarily look at new stuffin your peripheral visionWhat 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 anchoredWhy 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
  • 11. Clever! Reflexive Users detectAnimation saccades changes So what about these Pursuits? Can we use animation to help with those?
  • 12. How should moving objects be animated to help the eyefollow 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 overshootTemporal Distortion for Animated Transitions - 2011
  • 13. Could animation improve reading off a screen?• Read out loud from a computer screen• Count symbols in a long symbol textAnimation Reading Time Reading Error Read: Relative Counting Time Counting Count: RelativeSpeed (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.
  • 14. Animation andcomprehension
  • 15. Improving Users’ Comprehension of Changes with Animation and Sound: An Empirical Assessment - 2007ResultsParameter No animation Animation onlyMissed changes 20% 0%Which object changed? 21% correct 83% correctWhere did change start? 1.5% correct 51% correctWhere did change end? 7.5% correct 78% correct
  • 16. Memory
  • 17. 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? - 1998Answer 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
  • 18. Perception of time
  • 19. 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?
  • 20. 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 wayProgress 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)
  • 21. 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 timeAverage interaction designer after being told thatanimation ‘slows users down’.
  • 22. So animations can do nowrong? Not quite.I found one study that was NOT positive about it.
  • 23. 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 - 2008In all seriousness though:• Massive bias in research pro animation• No research paper that set out to prove animations were bad.
  • 24. 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.
  • 25. 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!
  • 26. Thank you!Matthias “Matty” Schreck@sardionerakYes, this presentation will be on Slideshare. Why not leave a nice comment when you download it?http://www.slideshare.net/mattyschreck
  • 27. Some good resourcesMeaningful transitions:http://www.ui-transitions.com/#homeWindows – animations and transitions:http://msdn.microsoft.com/en-us/library/windows/desktop/aa511285.aspx
  • 28. 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.jpegI 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 totake it out, you simply enjoy this presentation and feel proud that your image was good enough that it made it in 