Motion and animation can be helpful and communicative, if used with restraint. Motion is most often appropriate as a form of subtle feedback for microinteractions, by providing feedback. It can also be used to attract attention.
This article is meant to provide high level guidance around the use of motion. However, motion is not currently available as tokens in Canvas.
All UI animations must have a known purpose. This intent might be to solve a design problem, or to communicate the personality of our brand. How to identify an animation’s purpose in detail will be covered later.
Animation should not get in the way of the user completing their task. An animation would never intentionally increase the difficulty of a task, but it can be easy to get carried away while designing something visually pleasing. Avoid extra flourish and unnecessary amounts of time. Instead, keep animations simple, fast and direct.
Loading and fetching states are an exception; there are moments when waiting can’t be avoided.
As mentioned above, when waiting times can not be avoided, use it as an opportunity to express our brand identity while also bringing delight to the user in moments of frustration. Fun is one of our core values, after all.
Good interface animations need to be flexible and always feel responsive to a user’s input, even while the animation is moving. Think of it like a conversation. If a user starts to realize their input is being skipped or ignored, trust is lost, and the quality of their experience begins to degrade. Non-blocking animation builds trust by always responding to the user’s input, no matter where in the animation they currently are. The timing of the animation can also vary depending on the size of the UI transition (that is taking place although are generally classed with a range of 200ms - 500ms.)
Although animations should be fast, it is important to take your user’s task-based mindset into account when deciding on multiple animation factors. To continue with the conversation metaphor, the animations should always feel good to interact with. Judge this by trying out the animation for yourself in context, as well getting outside opinions. This falls back on animations being flexible, even if the timing is outside the recommended range, but it feels right.
Animations that are slow to interact with on the web negatively impact the experience. Poor performance can nullify even the most thought out experience. Animations should use the most efficient properties. Offsets can be used to lighten the cognitive load of many objects animating, while also enhancing a user’s perceived performance.
|Entering Screen||Ease Out|
|Exiting Screen||Ease In|
|Change in Color/Opacity||Linear 200ms|
|Movement within Screen||Ease|
Note: In the case where you're just fading between two colors, opacities, etc. always use a duration of 200ms.
- Do use values suggested in the table.
- Do create prototypes to communicate motion with developers.
- Don’t deviate from the suggested easing functions.
Can't Find What You Need?
Check out our FAQ section which may help you find the information you're looking for.FAQ Section