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