For a design system's reduced-motion mode, why should most animations get a gentler alternative instead of simply being removed?
answer
- motion often carries meaning
- reduce, not remove
- swap travel for a fade
- colour and opacity stay
- decoration can simply go
basics
~20 sMuch motion carries information: where a panel came from, that an action worked, that content is loading. Removing it all hides that information. Swapping travel, zoom and parallax for fades or clear instant changes keeps the meaning without the trigger.
solid answer
~40 sA reduced-motion mode exists to remove the patterns that make people ill, not the information motion was carrying. If every animation is simply cut, a visitor loses the cue that a filter panel opened from the side, that a listing was saved, or that search results are still loading. So each animated pattern gets a reduced variant in its spec: a zoom from thumbnail to full-screen photo becomes a crossfade, a map fly-to becomes a jump plus a highlighted pin, a sliding drawer becomes a fade, and parallax becomes a static image. Colour and opacity changes usually stay, because they create no illusion of movement. Purely decorative motion can simply go. Making the same motion faster is not an alternative on its own, because a fast zoom is still a zoom.
go deeper
Recall the principle: reduce, not remove. Motion that explains something gets a gentler alternative such as a fade; pure decoration can simply go.
Explain why cutting all motion hides orientation, confirmation and status, and why colour and opacity changes are usually kept.
Show how you would spec reduced variants for a real product's patterns, including maps, galleries and loading states, and why speed alone is not an alternative.
Discuss who owns the reduced variant and how the system makes it part of every pattern's definition rather than an afterthought per team.
## What a reduced-motion mode is for Most operating systems offer a **reduced-motion setting**, and many products add their own. A user who turns it on is saying: the kind of movement that makes me dizzy or sick, please don't show it. They are not saying: hide what just happened. The design problem is to remove **the trigger** while keeping **the information**. That is why "reduce, not remove" is a common principle. The alternative to a problematic animation is usually a different, gentler way of showing the same change, and only sometimes nothing at all. ## Why removing everything goes wrong Motion in an interface often does one of these jobs: - **Orientation**: a filter panel sliding in from the side tells the user where it lives. - **Confirmation**: a heart filling when a listing is saved confirms the action worked. - **Status**: a progress indicator shows that search results are still loading. - **Attention**: a subtle change draws the eye to a price that just updated. If the reduced mode cuts all of these to instant changes, the user may no longer notice that the save worked, may think the search has frozen, or may lose track of which part of the page changed. That trades one accessibility problem for another. ## Designing the alternative A design system can spec a reduced variant for every animated pattern. On a real-estate listings site: | Full-motion pattern | Trigger | Reduced alternative | |---|---|---| | Thumbnail zooms to full-screen photo | Zoom over a large area | Crossfade from the grid to the photo view | | Map flies and zooms to a listing | Zoom, travel, sometimes rotation | Instant jump to the location, with the pin highlighted | | Filter drawer slides in from the edge | Large-area travel | Short fade in place | | Header photo with parallax on scroll | Parallax | Static image that scrolls with the page | | Saved-listing heart bursts and scales | Scale on a small element | Colour change, perhaps a brief opacity pulse | | Loading indicator | Continuous movement, usually small | Keep a status indication, preferring a calmer form | | Decorative floating shapes behind the search box | Pure decoration | Nothing: remove it | The guiding rules: 1. **Keep colour and opacity changes.** WCAG's definition of motion animation excludes changes of colour or opacity that do not change the perceived size, shape or position of an element, and such changes create no illusion of movement. 2. **Replace travel, zoom, parallax and rotation** with fades, dissolves or instant changes paired with a clear visual state. 3. **Keep status and confirmation visible**, even if the way they are shown changes. 4. **Remove pure decoration** outright; it carried no information to preserve. 5. **Do not rely on speed alone.** A faster zoom still zooms and can be more jarring; the kind of movement is what changes, not just its length. ## Where the decision lives The reduced variant is a **design decision**, so it belongs in the component or pattern spec next to the full-motion behaviour, written by the people who know what the motion is for. Leaving it to each engineer at build time leads to inconsistent results: one team removes everything, another does nothing, a third merely speeds things up. The implementation mechanics of switching modes on each platform are a separate concern. ## When "none" is the right answer Sometimes there is nothing to preserve: - Decorative background motion, ambient loops and scroll-triggered flourishes carry no information, so the reduced variant is simply their absence. - Some motion should arguably not exist in either mode. A full-screen parallax effect on a listing page is hard to justify for anyone. The distinction to draw is between motion that **explains** something, which gets an alternative, and motion that **decorates**, which can go. ## Common mistakes - Treating the reduced mode as a global off switch for all animation, including progress and confirmation. - Shortening durations and calling it done. - Leaving scroll effects, maps and video backgrounds out of the reduced mode because they are not "component animations". - Writing the reduced variant only for the web and forgetting that native apps in the same system need the same decisions.
- Why is making an animation much faster not a sufficient reduced-motion alternative?The trigger is the kind of movement, such as zoom, parallax or large-area travel, not only how long it lasts. A zoom compressed into a fraction of the time still suggests moving forward and can feel more abrupt. A real alternative changes the kind of motion, typically to a fade or an instant change with a clear state.
- What should a loading indicator do in reduced-motion mode?Keep telling the user that something is happening, because hiding it makes the page look frozen. Many systems keep a small indicator or switch to a calmer form, such as a slow opacity pulse or a progress bar, rather than removing status altogether. The exact form is a component decision.
saying these in an interview costs you the question
- Treats reduced-motion mode as switching off every animation, including status.
- Believes a much shorter duration is a complete reduced alternative.
- Removes the save confirmation along with the motion that showed it.
- Thinks colour and opacity changes must also be removed in reduced mode.
- Leaves the reduced variant for each engineer to decide at build time.