Reduced Motion
Design Processes
Respecting a person's system setting to turn down animation.
In practice
Reduced motion is the operating-system preference — and the matching CSS media query, prefers-reduced-motion — that lets people who are made unwell by movement ask interfaces to calm down. Parallax, large zooms and things sliding across the screen can trigger nausea, migraines and vertigo. Honouring the setting means offering the same interface with the motion designed out, not removed.
Questions
What is Reduced Motion?
Reduced motion is a user preference that interfaces should detect and respond to by minimising non-essential animation and movement.
Why do you use Reduced Motion?
For people with vestibular disorders, motion is not a delight, it is a physical problem. Respecting the setting is basic courtesy and an accessibility requirement.
How do you use/apply Reduced Motion?
Query prefers-reduced-motion, and when it is set replace movement with fades or instant changes, stop autoplaying video and disable parallax — keeping the function intact.
When do you use Reduced Motion?
In every animation you design. Build the reduced version at the same time as the full one.
Who uses Reduced Motion?
Motion and interaction designers, and the developers implementing transitions.
