Motion

Motion Guidelines

Motion brings personality, tone, rhythm, and purpose to otherwise static objects. When used properly, user interface motion should feel like a well choreographed dance, with all of the elements acting and reacting to one another in sync. Start with a clear objective, layering in movements that mimic reality and guide the user through the interface.

Animation Duration

Animations should never be too long so that users don’t get the feeling they have to wait, but also not too fast so that users don’t have the chance to recognize the movement.

If you create high-fidelity prototypes with a tool of your choice, always make sure to stick to our guidelines in terms of duration. Please find some duration indication values on the right.

Animation Easing

Strictly linear movement appears weird to the human eye. An animation should accelerate and decelerate smoothly throughout its duration to appear as natural as possible. Please make sure that you stick to the guidelines for tension, friction, and velocity on the right.