Designing for Reduced Motion

Why it exists

For some people, UI animations aren't just distracting; they can cause physical symptoms like nausea, dizziness, and headaches. This is a reality for users with vestibular motion disorders. Reduced motion design was created to provide a safer, more comfortable web experience by respecting a user's explicit request to minimize on-screen movement.

The mental model

Think of motion as a progressive enhancement, not a baseline feature. Your interface must be perfectly usable without animation. The prefers-reduced-motion setting is an explicit signal from the user that they need a calmer interface for accessibility reasons, not just stylistic preference. Your job is to listen to that signal and adapt your design.

How it works

A user enables a "reduce motion" setting in their operating system (e.g., in Accessibility settings on iOS, Android, Windows, or macOS). The browser exposes this choice to your code through the prefers-reduced-motion CSS media feature. You can then write CSS rules that apply only when this setting is active. The query @media (prefers-reduced-motion: reduce) will target these users, allowing you to override or disable animations.

When to use it

Apply this to any non-essential animation. Prime candidates for reduction are parallax scrolling effects, attention-grabbing bouncing icons, complex loading spinners, and transitions that involve significant scaling or panning (like a modal window zooming into view). The goal is to tone down or replace anything that could be a vestibular trigger.

When not to use it

The footgun is removing all motion if that motion is essential for understanding the UI's state. For example, if an item animates into a shopping cart, making it appear instantly might be confusing. The key is to REDUCE, not necessarily eliminate. A better approach is to replace a jarring animation with a gentler one, like a simple cross-fade instead of a zoom-and-slide. The goal is accessibility, not a broken user experience.

One canonical example

A common pattern is a modal dialog that scales and fades into view. For a user with reduced motion enabled, you would disable the scaling transform but keep the fade. An animated modal might have transform: scale(0.8); transition: transform 0.3s, opacity 0.3s;. For reduced motion, you would add a media query: @media (prefers-reduced-motion: reduce) { .modal { transition: opacity 0.3s; } }. This removes the potentially nauseating scaling effect while retaining a smooth fade for context.