Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
UX in MotionPrinciples for creating meaningful animation in interfaces
Val Head • @vlh
Author of Designing Interface Anima...
What makes good UI animation?
How can I be sure
I’m making good animation?
GreatUI animation has
purpose and style
Continuity
Reinforce mental models of the interface 

and show how content is related
Continuity
• Be consistent with your spatial or layering arrangement
of UI elements
• Transitions between layers or places...
Visual Continuity
Maintaining the “thingness” of an object during points of transition
Visual Continuity
• Reuse elements between views
• Why should it leave the screen just to come right back
on again?
• Plan...
Feedback
Letting users know that something 

has happened
Directing Attention
Leading the eye and calling attention to changes and important items
Animation for feedback
• Use time instead of space for more compact feedback
• Mimicking natural gestures like shaking can...
Hinting & Affordances
Helping users see the effects, or 

potential effects, of their actions
Guiding Tasks
Cueing what should happen next
Hinting and Affordances
• Use animation to demonstrate gestures or hint at
advanced features
• Move with the user, never m...
Perceived Performance
Animation can make unavoidable waits 

seem shorter
viget.com/articles/experiments-in-loading-how-long-will-you-wait
mercury.io/blog/the-psychology-of-waiting-loading-animations-and-
facebook
youtube.com/watch?v=USH4iPQ44LQ
Perceived Performance
• The sooner the first hint of content appears, the faster
things feel
• Put the focus on progress
• ...
Messaging
Voice and tone comes through in motion too
Your choice of easing 

makes all the difference.
Messaging
• Know what your brand or product’s point of view is
• Experiment with easing to find motion that expresses
that ...
Designing Interface Animation
designinginterfaceanimation.com
Thank you!
Newsletter: uianimationewsletter.com
Let’s chat on twitter: @vlh
UX in Motion
UX in Motion
UX in Motion
UX in Motion
UX in Motion
UX in Motion
UX in Motion
UX in Motion
UX in Motion
UX in Motion
UX in Motion
UX in Motion
UX in Motion
UX in Motion
UX in Motion
UX in Motion
UX in Motion
UX in Motion
UX in Motion
UX in Motion
UX in Motion
UX in Motion
UX in Motion
UX in Motion
UX in Motion
UX in Motion
UX in Motion
UX in Motion
Upcoming SlideShare
Loading in …5
×

UX in Motion

611 views

Published on

Animation can make our designs easier to use and more meaningful when we use it well. The key is knowing where animation can be most useful when it comes to user-focused design.

Published in: Internet

UX in Motion

  1. 1. UX in MotionPrinciples for creating meaningful animation in interfaces Val Head • @vlh Author of Designing Interface Animation
  2. 2. What makes good UI animation?
  3. 3. How can I be sure I’m making good animation?
  4. 4. GreatUI animation has purpose and style
  5. 5. Continuity Reinforce mental models of the interface 
 and show how content is related
  6. 6. Continuity • Be consistent with your spatial or layering arrangement of UI elements • Transitions between layers or places don’t need to be complex to be effective • Have a clear model for what different layers or places are for
  7. 7. Visual Continuity Maintaining the “thingness” of an object during points of transition
  8. 8. Visual Continuity • Reuse elements between views • Why should it leave the screen just to come right back on again? • Planning entrance and exit movements vs. fading to black every time
  9. 9. Feedback Letting users know that something 
 has happened
  10. 10. Directing Attention Leading the eye and calling attention to changes and important items
  11. 11. Animation for feedback • Use time instead of space for more compact feedback • Mimicking natural gestures like shaking can be useful for error states or incorrect responses • Fit the animation to the context of in the information being highlighted
  12. 12. Hinting & Affordances Helping users see the effects, or 
 potential effects, of their actions
  13. 13. Guiding Tasks Cueing what should happen next
  14. 14. Hinting and Affordances • Use animation to demonstrate gestures or hint at advanced features • Move with the user, never make them wait for an animation to finish • Make it a conversation • Look for opportunities to express personality within these helpful moments
  15. 15. Perceived Performance Animation can make unavoidable waits 
 seem shorter
  16. 16. viget.com/articles/experiments-in-loading-how-long-will-you-wait
  17. 17. mercury.io/blog/the-psychology-of-waiting-loading-animations-and- facebook
  18. 18. youtube.com/watch?v=USH4iPQ44LQ
  19. 19. Perceived Performance • The sooner the first hint of content appears, the faster things feel • Put the focus on progress • Customized, well design loading animations can increase trust
  20. 20. Messaging Voice and tone comes through in motion too
  21. 21. Your choice of easing 
 makes all the difference.
  22. 22. Messaging • Know what your brand or product’s point of view is • Experiment with easing to find motion that expresses that point of view • Create an easing palette to give your animations a unique feel and treat animation as a system
  23. 23. Designing Interface Animation designinginterfaceanimation.com
  24. 24. Thank you! Newsletter: uianimationewsletter.com Let’s chat on twitter: @vlh

×