Animation Guidelines

Animations are an integral part in user-focused design. User actions require interface feedback to fully engage with an application. For every user action, there should be an appropriate interface reaction. Good design should be justifiable, animations should be driven by an intent to communicate to the user. 

Animations add depth and personality to our applications and to enhance the user experience. Examples of animations include page or 'scene' transitions, animated buttons, item 'focus', and activity indicators.

While every application should have it's own style, there are many great examples to draw from. Check out Google’s material design for animations to learn how to add polish and realism to your animations. 

Motion design is an integral part of interactive design. When building interfaces, it's vital to consider the intent of the user. 
 

Before creating an animation ask yourself: 

  • What am I trying to accomplish with this animation?
  • Does my animation match the brand or personality of the app?
  • How long should the user have to wait for feedback from this action?
  • Does my animation make it clear to the user what is happening in the app?
  • Does my animation add value to the user experience?

 

Best Practices 

  • Try to use whole pixels, fractions can lead to pixel shading.
  • Feedback animations should be kept short (button press, focus in/out, .etc).
  • Always use easing to make animations feel smoother. Avoid 'linear' animations.