SlideShare une entreprise Scribd logo
1  sur  30
Télécharger pour lire hors ligne
Animation in user interfaces
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
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…
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. 
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
Less than 3 hours, 2D


Sense of vision
Comprehension
Memory
Even the
perception of
time itself
Animation and vision
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
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%
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
Animation in user interfaces
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
Clever!
             Reflexive   Users detect
Animation
             saccades    changes


   So what about these Pursuits?
 Can we use animation to help with
              those?
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
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.
Animation and
comprehension
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
Memory
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
Perception of time
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?
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)
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’.
So animations can do no
wrong?
                Not quite.




I found one study that was NOT positive about it.
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.
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 

Contenu connexe

Similaire à Animation in user interfaces

Mollenbach Single Gaze Gestures
Mollenbach Single Gaze GesturesMollenbach Single Gaze Gestures
Mollenbach Single Gaze GesturesKalle
 
UX in Motion
UX in MotionUX in Motion
UX in MotionVal Head
 
The Human Brain Relationship: Advanced and Adaptive User Interfaces
The Human Brain Relationship: Advanced and Adaptive User InterfacesThe Human Brain Relationship: Advanced and Adaptive User Interfaces
The Human Brain Relationship: Advanced and Adaptive User Interfacesgoodfriday
 
Lecture 9 animation
Lecture 9 animationLecture 9 animation
Lecture 9 animationMr SMAK
 
Evaluating Touch Gesture Usability -- D4M 2010
Evaluating Touch Gesture Usability -- D4M 2010Evaluating Touch Gesture Usability -- D4M 2010
Evaluating Touch Gesture Usability -- D4M 2010Kevin Arthur
 
Animations in User interfaces
Animations in User interfacesAnimations in User interfaces
Animations in User interfacesKim Nørskov
 
COMP 4010 - Lecture4 VR Technology - Visual and Haptic Displays
COMP 4010 - Lecture4 VR Technology - Visual and Haptic DisplaysCOMP 4010 - Lecture4 VR Technology - Visual and Haptic Displays
COMP 4010 - Lecture4 VR Technology - Visual and Haptic DisplaysMark Billinghurst
 
VR Age is rapidly approaching
VR Age is rapidly approachingVR Age is rapidly approaching
VR Age is rapidly approachingStefano Lanfranco
 
The artificiality of natural user interfaces alessio malizia
The artificiality of natural user interfaces   alessio maliziaThe artificiality of natural user interfaces   alessio malizia
The artificiality of natural user interfaces alessio maliziaMarco Ajovalasit
 
LxD - Learner Experience Design
LxD - Learner Experience DesignLxD - Learner Experience Design
LxD - Learner Experience DesignJulie Dirksen
 
VSMM 2016 Keynote: Using AR and VR to create Empathic Experiences
VSMM 2016 Keynote: Using AR and VR to create Empathic ExperiencesVSMM 2016 Keynote: Using AR and VR to create Empathic Experiences
VSMM 2016 Keynote: Using AR and VR to create Empathic ExperiencesMark Billinghurst
 
It413 animation
It413 animationIt413 animation
It413 animationMeg Yodnad
 
Awareness motion and it's timing to induce user's action
Awareness motion and it's timing to induce user's actionAwareness motion and it's timing to induce user's action
Awareness motion and it's timing to induce user's actionAiri Y
 
Delight by Motion: Investigating the Role of Animation in Microinteractions
Delight by Motion: Investigating the Role of Animation in MicrointeractionsDelight by Motion: Investigating the Role of Animation in Microinteractions
Delight by Motion: Investigating the Role of Animation in MicrointeractionsOmar Sosa-Tzec
 
A brief overview of the history and practice of user experience by Ian Westbrook
A brief overview of the history and practice of user experience by Ian WestbrookA brief overview of the history and practice of user experience by Ian Westbrook
A brief overview of the history and practice of user experience by Ian WestbrookAlex Cachia
 
Scoping user experience
Scoping user experienceScoping user experience
Scoping user experienceKeynes Cheng
 

Similaire à Animation in user interfaces (20)

Mollenbach Single Gaze Gestures
Mollenbach Single Gaze GesturesMollenbach Single Gaze Gestures
Mollenbach Single Gaze Gestures
 
UX in Motion
UX in MotionUX in Motion
UX in Motion
 
The Human Brain Relationship: Advanced and Adaptive User Interfaces
The Human Brain Relationship: Advanced and Adaptive User InterfacesThe Human Brain Relationship: Advanced and Adaptive User Interfaces
The Human Brain Relationship: Advanced and Adaptive User Interfaces
 
Psych of good ux
Psych of good uxPsych of good ux
Psych of good ux
 
W4 what we can easily see
W4 what we can easily seeW4 what we can easily see
W4 what we can easily see
 
Lecture 9 animation
Lecture 9 animationLecture 9 animation
Lecture 9 animation
 
Evaluating Touch Gesture Usability -- D4M 2010
Evaluating Touch Gesture Usability -- D4M 2010Evaluating Touch Gesture Usability -- D4M 2010
Evaluating Touch Gesture Usability -- D4M 2010
 
Animations in User interfaces
Animations in User interfacesAnimations in User interfaces
Animations in User interfaces
 
COMP 4010 - Lecture4 VR Technology - Visual and Haptic Displays
COMP 4010 - Lecture4 VR Technology - Visual and Haptic DisplaysCOMP 4010 - Lecture4 VR Technology - Visual and Haptic Displays
COMP 4010 - Lecture4 VR Technology - Visual and Haptic Displays
 
VR Age is rapidly approaching
VR Age is rapidly approachingVR Age is rapidly approaching
VR Age is rapidly approaching
 
The artificiality of natural user interfaces alessio malizia
The artificiality of natural user interfaces   alessio maliziaThe artificiality of natural user interfaces   alessio malizia
The artificiality of natural user interfaces alessio malizia
 
LxD - Learner Experience Design
LxD - Learner Experience DesignLxD - Learner Experience Design
LxD - Learner Experience Design
 
animation
animationanimation
animation
 
From Interaction to Empathy
From Interaction to EmpathyFrom Interaction to Empathy
From Interaction to Empathy
 
VSMM 2016 Keynote: Using AR and VR to create Empathic Experiences
VSMM 2016 Keynote: Using AR and VR to create Empathic ExperiencesVSMM 2016 Keynote: Using AR and VR to create Empathic Experiences
VSMM 2016 Keynote: Using AR and VR to create Empathic Experiences
 
It413 animation
It413 animationIt413 animation
It413 animation
 
Awareness motion and it's timing to induce user's action
Awareness motion and it's timing to induce user's actionAwareness motion and it's timing to induce user's action
Awareness motion and it's timing to induce user's action
 
Delight by Motion: Investigating the Role of Animation in Microinteractions
Delight by Motion: Investigating the Role of Animation in MicrointeractionsDelight by Motion: Investigating the Role of Animation in Microinteractions
Delight by Motion: Investigating the Role of Animation in Microinteractions
 
A brief overview of the history and practice of user experience by Ian Westbrook
A brief overview of the history and practice of user experience by Ian WestbrookA brief overview of the history and practice of user experience by Ian Westbrook
A brief overview of the history and practice of user experience by Ian Westbrook
 
Scoping user experience
Scoping user experienceScoping user experience
Scoping user experience
 

Dernier

How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessThink 360 Studio
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfIBM
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosaannemarleenolthof1
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaBarusRa
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 

Dernier (18)

How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design Success
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 

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
  • 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 