Motion principles
Bring experiences to life with purposeful and familiar interactions, always with accessibility in mind
Principles
Use the following principles to guide your work when designing motion.
Purposeful
Motion within our experiences should be meaningful and support users throughout the experience. It must be a functional element, not just a decor, that can contribute to a memorable experience and add meaning to the interaction. Excessive or gratuitous motion can make an experience feel disorienting and distracting, so use motion sparingly.
Familiar
Motion should feel as natural as possible to create a pleasant illusion close to natural interaction with physical objects. The less effort is needed to interact with the interface, the clearer it is how it works, the more we boost user satisfaction.
Inclusive
Motion impacts accessibility in many ways and can make using our interfaces more difficult, or even impossible, for some users. Thinking strategically about motion and implementing it well does more than just cater to people with special requirements, it makes our designs better for everyone to use. Incorporate accessibility best practices in your work and keep performance and browsers speed top of mind.
Guidelines
Duration
Movement should be slow enough that users can recognize what’s happening, but fast enough that they are never waiting for an action to complete. Most animations in our component library last between 0.25 and 0.3 seconds.
| Type | Duration |
|---|---|
| Buttons/small components | 0.25s - 0.3s |
| Other | as you see fit |
Speed
When designing for motion, choose a speed appropriate to its context and goal:
-
Slower transitions are less likely to cause an attention shift and are thus less distracting. They are appropriate for animations indirectly triggered by the user or not user initiated in any way.
-
Fast animations are more likely to attract attention when they happen outside the user’s focus of attention. They are suitable for important elements that users must attend to and act upon.
The speed of the overall animation can affect the perceived performance. Slower animations will lead users to perceive the overall system is slow as well. However, animations can be used to hide delays and by keeping the user engaged the perceived performance increases.
Easing
Strictly linear movement appears strange to the human eye. An animation should accelerate and decelerate smoothly throughout its duration to appear as natural as possible. To achieve this, we use the following easing bezier curves that you can use as a starting point and customize as needed.
Ease
The standard ease cubic-bezier has a slow start, then accelerates, before it ends slowly. You can use it for the majority of state change animations.
Ease-out
Easing out causes the animation to start quickly, giving a feeling of responsiveness, and decelerates slowly at the end, allowing for a natural slowdown that helps users adjust to its arrival. You can use it for adding elements to the screen or changing on-screen states at a users’ input.
Ease-in
Easing in causes the animation to start slowly and accelerates at the end. You can use it for removing elements from the screen, allowing users to recognize that it is exiting before speeds out of view.
Ease-in-out
Easing both in and out can provide a more dramatic effect than just easing out. You can use it for growing and shrinking material, among other property changes. Do not use an overly long animation duration, because of the sluggishness of an ease-in start to the animation. Something in the range of 300-600ms is typically suitable, but the exact number depends heavily on the feel of your project.
Accessibility
Motion can trigger annoyance or significant discomfort to users with cognitive disabilities, such as dizziness, vertigo, nausea, disorientation or even seizures. Understanding how motion design can negatively impact some users helps us being more thoughtful and design with those challenges in mind.
Accessible design is everyone’s responsibility, no matter your role. When designing motion, refer to our Accessibility principles, and ideally test with a screen reader.
Additional Resources
- Preview and compare cubic-bezier easing
References
- Drasner, Sarah. “Practical Techniques on Designing Animation.” Smashing magazine. 8 June. 2015. Web.
- Harley, Aurora. “Animation for Attention and Comprehension.” Nielsen Norman Group. 21 Sept. 2014. Web.
- Head, Val. “How fast should your UI animations be?” Val Head. 5 May. 2016. Web.
- Head, Val and Bowles, Cennydd. Meaning and Motion. Audio blog. Motion and meaning.