target Strategy › Article

Reduced Motion Strategies: Motion and Accessibility

Learn how to design interfaces with animations and micro-interactions that respect users' preference for 'reduced motion' if they are sensitive to animations and visual nausea.

info Quick Definition
Reduced Motion is an accessibility preference that users can activate in their operating systems (Windows, macOS, iOS, Android). When activated, it tells applications to remove or simplify unnecessary animations (prefers-reduced-motion) to prevent nausea, dizziness, or distraction for people with vestibular disorders or ADHD.

Why the Designer Should Manage Motion?

As designers, we love animations: zooms, parallax, bounces, and smooth transitions. However, for millions of people, these animations are not “pretty”; they are physically painful. Excessive movement can cause migraines, disorientation, and vestibular discomfort.

Designing for reduced motion doesn’t mean removing the magic from your designs; it means being polite and offering a calm alternative to those who need it.

The 2 Paths: Animation vs. Function

For your motion strategy to be accessible, you must distinguish between two types of animation:

1. Decorative Animations (What “can be removed”)

These are effects that only have an aesthetic intent.

  • Example: Parallax scroll effect or a background of moving stars.
  • Strategy: If the user has “Reduced Motion” active, these animations must be removed entirely or replaced by a static image.

2. Functional Animations (What “should be softened”)

These are those that help the user understand context (e.g., a modal that expands from the button that activated it).

  • Example: A progressing loading bar or a appearing side drawer.
  • Strategy: Instead of an aggressive sweep or zoom, use a soft opacity transition (Fade-in). The brain catches the state change without the sensation of physical movement.

It’s Not All Dizziness: ADHD and Distraction

Reduced motion is also a vital tool for people with ADHD (Attention Deficit Hyperactivity Disorder). Constant animations, infinite loops, or blinking elements capture their attention involuntarily, preventing them from focusing on your application’s main task.

A responsible design allows the user to pause or disable any animated element that lasts more than 5 seconds.

How to Implement Reduced Motion (Design and Code)

As a product designer, you should define the two states of your animations:

  • State with Motion (Default): Zoom when opening the modal, 300ms duration.
  • State with Reduced Motion (Accessible): Instant opening or a soft fundido (opacity), 150ms duration.

In code, developers use the CSS prefers-reduced-motion media query to detect user preference and apply the corresponding styles automatically.

Checklist for Accessible Animations

  • Avoid Fast Blinking: Never show anything that blinks more than 3 times per second to prevent photosensitive epilepsy seizures.
  • Offer Pause Controls: Any image carousel or background video should have an easily accessible “Pause” button.
  • No Aggressive Zooms: Zoom effects that cover large parts of the screen are those that cause the most dizziness. Change them to fades.
  • Do not use scroll as a trigger for complex animations: Parallax scroll is motion accessibility’s main enemy.

Mentor’s Tips

  • Design the “Fade” as a Safety Net: If you don’t have time to design two versions of every animation, a soft opacity transition (opacity) is usually safe for both normal and reduced modes.
  • The Duration Law: Sometimes simply shortening an animation’s duration (making it faster) reduces the time the eye has to process physical movement, mitigating dizziness.
  • Test Reduced Motion on your own mobile: Activate the option in Accessibility settings and navigate through your favorite application. You will be surprised at how much the perception of the product changes.

Useful Resources and Tools

accessibility-tree haptic-feedback-principles functional-animation-principles redlining-specifications