The document discusses principles for creating effective UI animation, emphasizing purpose, continuity, and user feedback in design. It highlights the importance of visual consistency and leveraging animations to enhance user experience, such as guiding attention, demonstrating gestures, and improving perceived performance. Key concepts include maintaining spatial relationships, providing timely feedback, and ensuring animations align with brand messaging.

1. UX in MotionPrinciples for creating meaningful animation in interfaces
Val Head • @vlh
Author of Designing Interface Animation

2. What makes good UI animation?

3. How can I be sure
I’m making good animation?

4. GreatUI animation has
purpose and style

5. Continuity
Reinforce mental models of the interface
and show how content is related

10. 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

11. Visual Continuity
Maintaining the “thingness” of an object during points of transition

15. 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

16. Feedback
Letting users know that something
has happened

20. Directing Attention
Leading the eye and calling attention to changes and important items

25. 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

26. Hinting & Affordances
Helping users see the effects, or
potential effects, of their actions

30. Guiding Tasks
Cueing what should happen next

34. 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

35. Perceived Performance
Animation can make unavoidable waits
seem shorter

39. viget.com/articles/experiments-in-loading-how-long-will-you-wait

41. mercury.io/blog/the-psychology-of-waiting-loading-animations-and-
facebook

42. youtube.com/watch?v=USH4iPQ44LQ

43. 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

44. Messaging
Voice and tone comes through in motion too

48. Your choice of easing
makes all the difference.

50. 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

51. Designing Interface Animation
designinginterfaceanimation.com

52. Thank you!
Newsletter: uianimationewsletter.com
Let’s chat on twitter: @vlh