Good Citizens · Usability Harness · Simulator ·

Motion and distraction: what moves, and who it hurts

Movement on a screen is never neutral. It pulls the eye, and for some people it brings on dizziness, nausea or a migraine.

This tool finds everything on a page that moves or plays by itself, checks whether the site listens when someone asks their device for less motion, and pauses it all with one button. It never flashes or plays anything.

I · Who it affects

Dizziness, migraine and a mind pulled away

about 1 in 3over 40 show inner-ear signslayers sliding at three speedsthe inner ear’s three canals
The inner ear senses motion through fluid in three looped canals. Layers sliding at different speeds tell it the body is moving when it isn’t.

In one national study, about a third of American adults over 40 showed signs of inner-ear balance problems1 on a simple balance test, and those who also felt dizzy were twelve times as likely to fall.

For people with vestibular disorders, certain kinds of screen motion bring on the same symptoms as a rough sea: things that zoom or spin, backgrounds that scroll at a different speed from the page, and large movements at the edge of vision. The accessibility guidelines name dizziness, nausea and headaches3. About 1.2 billion people6 live with migraine.

Movement also steals attention. About 15.5 million American adults7 have ADHD, and the guidelines note that blinking content can make it hard to concentrate on anything else. Studies of animated advertisements have found they make reading harder work for everyone.

II · Flashing

A cartoon, one evening in 1997

a still frame: nothing here flashes3 a secondthe most it may flash
The rule for anything that flashes: never more than three times in any one second. This drawing never flashes at all.

On 16 December 1997, a few seconds of flashing red and blue in an episode of Pokémon sent about 700 people in Japan8, most of them children, to hospital.

Of those with true seizures, three in four had never had one before. Photosensitive epilepsy affects about 3% of people with epilepsy, most often children and teenagers. The web’s rule is plain: nothing should flash more than three times a second5, and saturated red flashes are the most dangerous. This tool does not test for flashing, because testing would mean flashing.

III · The setting

“Reduce motion” is a request

Reduce motionoff: layers slide at three speedson: still, with a gentle fade
“Reduce motion” is a request. A page that hears it swaps the sliding for something calm.

Every major operating system lets people ask for less motion, and since 2017 websites have been able to hear the request.

It is called Reduce motion on Macs, iPhones and iPads, Animation effects on Windows, and Remove animations on Android. Safari first passed it to websites in 2017, and today almost every browser10 does, as the CSS setting prefers-reduced-motion. A site that ignores it is ignoring someone who took the trouble to ask. Reduced motion does not have to mean none: swap a zoom or a slide for a gentle fade.

IV · What to do

What it means for your design

  1. 01

    Make motion opt-out by default

    Put decorative animation inside @media (prefers-reduced-motion: no-preference), so it only runs for people who have not asked for less.

  2. 02

    Swap, don’t only remove

    For people who ask for less motion, replace zooms, spins and parallax with fades or instant changes.

  3. 03

    Give everything a pause button

    Carousels, tickers and looping video that run for more than five seconds need a visible way to pause them (WCAG 2.2.2).

  4. 04

    Never autoplay sound

    If audio must start by itself, give a way to stop it within three seconds (WCAG 1.4.2). It drowns out screen readers.

  5. 05

    Never flash

    Nothing more than three flashes a second, and avoid saturated red flashing entirely (WCAG 2.3.1).

  6. 06

    Keep motion away from reading

    Animation beside text makes reading harder. Keep moving things out of the way of anything people need to read.

V · Prototypes

On prototypes: once it is built

drawn as a picturenothing to readbuilt as a pagea frame: open it on its own

This tool reads the page’s structure, so it needs real text, headings and buttons. A Figma prototype is drawn as a picture, with nothing underneath to read, and the tool will say so rather than report nonsense.

It does work on prototypes built as real pages: Axure, UXPin and Justinmind exports, Framer and Webflow previews, Storybook stories, and apps generated by tools like Figma Make or v0. If the content sits in a frame from another site, the tool offers to open the frame on its own.

VI · Myths

What people get wrong

A third of adults over 40 have a vestibular disorder
They failed a balance test, which is a sign of inner-ear dysfunction, not a diagnosis. It is still a great many people.
Reduce motion means no animation
It means less and gentler: a fade instead of a slide, a cut instead of a zoom.
Browsers block autoplay
Only partly. Muted video may always play by itself in Chrome.
The Pokémon episode gave 12,000 children seizures
About 700 people went to hospital. Many more reported milder symptoms, which researchers think were mostly brought on by the news coverage.

Take it to any website

🌀 Motion check

↑ Drag it to your bookmarks bar

Click it on any page to list everything that moves or plays by itself, see whether the site respects “Reduce motion”, and pause it all with one button. Click again to close it.

Works in Chrome, Safari, Firefox and Edge on a computer.

One Good Citizens folder with every tool in it. Download it, then import it:

  • Chrome: Bookmarks › Import bookmarks and settings › Bookmarks HTML file
  • Safari: File › Import From › Bookmarks HTML File
  • Firefox: Bookmarks › Manage bookmarks › Import and Backup › Import Bookmarks from HTML

Every time you check a design against the people who will use it, you are doing what Good Citizens is for. Thank you for that.

More tools: Fovea · Colour vision · Ageing eyes · all 10

VII · Sources

The research behind this page

Every figure above comes from one of these 12 sources. The small numbers in the text point here, and each source points back.

  1. Peer-reviewed study

    Disorders of balance and vestibular function in US adults: data from the National Health and Nutrition Examination Survey, 2001–2004

    Agrawal, Carey and Della Santina ·

    Archives of Internal Medicine

    pubmed.ncbi.nlm.nih.gov · cited in I

  2. Article

    Responsive design for motion

    WebKit ·

    WebKit blog

    webkit.org

  3. Standard

    Understanding WCAG 2.3.3: Animation from Interactions

    W3C

    Web Content Accessibility Guidelines 2.2

    w3.org · cited in I

  4. Standard

    Understanding WCAG 2.2.2: Pause, Stop, Hide

    W3C

    Web Content Accessibility Guidelines 2.2

    w3.org

  5. Standard

    Understanding WCAG 2.3.1: Three Flashes or Below Threshold

    W3C

    Web Content Accessibility Guidelines 2.2

    w3.org · cited in II

  6. Data

    Headache disorders

    World Health Organization

    Fact sheet

    who.int · cited in I

  7. Data

    ADHD diagnosis and treatment in US adults

    Centers for Disease Control and Prevention ·

    Morbidity and Mortality Weekly Report

    cdc.gov · cited in I

  8. Peer-reviewed study

    A follow-up survey on seizures induced by animated cartoon TV program “Pocket Monster”

    Ishiguro and others ·

    Epilepsia

    pubmed.ncbi.nlm.nih.gov · cited in II

  9. Reference

    Photosensitivity and seizures

    Epilepsy Foundation

    epilepsy.com

  10. Reference

    prefers-reduced-motion media query

    Can I use

    caniuse.com · cited in III

  11. Guidance

    Autoplay policy in Chrome

    Chrome for Developers ·

    developer.chrome.com

  12. Peer-reviewed study

    High-cost banner blindness: ads increase perceived workload, hinder visual search, and are forgotten

    Burke and others ·

    ACM Transactions on Computer-Human Interaction

    dl.acm.org