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