Animation in user interfaces
Download as PPTX, PDF10 likes3,242 views
The document discusses the role of animation in user experience (UX) design, arguing that animations can enhance usability and comprehension when backed by empirical research. It reviews several studies confirming that animations improve user interactions, attention to changes, and memory recall, while also addressing potential downsides like confusion in complex visualizations. Ultimately, the author advocates for the use of animations in UI design, emphasizing their benefits and suggesting best practices based on research findings.
Animation in user interfaces
- 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
- 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
- 18. Memory
- 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