Motion · 04 of 04
Respect reduced-motion preferences
Provide a clear experience when people ask for less movement.
The idea
Some people find large slides, zooms or parallax uncomfortable.
Respect the reduced-motion preference by removing or simplifying nonessential movement. Keep the resulting state obvious through layout, text or other stable feedback.
An instant change may work better than a fade; a fade is an option, not something every reduced-motion version must retain. Ensure content appears even when an animation never runs. Review the reduced-motion path as a complete experience, including navigation, dialogs and loading feedback.
How to see it
Terms used in this lesson
The parts
- Reduced motion
- A preference for less nonessential animation.
- Travel
- Movement across the screen, including sliding or zooming.
- State feedback
- Information that makes a change understandable without requiring motion.
In practice
- Provide a reduced-motion version
- Keep content available without animation
- Use stable feedback for state changes
Avoid
- Retaining large nonessential movement
- Assuming a fade is always necessary
- Waiting for a disabled animation to reveal content
The test
Enable reduced motion and complete the main tasks. Is all content available, and can you understand every state change without large movement?
Reviewed against all forty, on your product.
The audit is the cheapest thing we sell, and it regularly concludes that you do not need the project you came for.