Successfully reported this slideshow.
Your SlideShare is downloading. ×

UX in Motion

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 52 Ad
Advertisement

More Related Content

Similar to UX in Motion (20)

Advertisement

Recently uploaded (20)

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

×