Motion on a Page and the Visitors It Bothers

Movement nobody asked for

Scroll down many small business home pages and things move. The background drifts at a different speed from the text, headings slide in from the sides, and a carousel changes slides every few seconds.

For most visitors this is decoration. For some it is the reason they leave, because large movement on a screen can bring on dizziness, nausea or a headache that lasts the afternoon.

They rarely complain. They close the page and find a business whose site keeps still.

This week Chrome joined Safari and Firefox in passing on a setting those visitors can switch on, which makes the problem easier to fix.

Who it affects

• Vestibular disorders, where the inner ear and the brain disagree about movement.
• Concussion, during a recovery that can take months.
• Migraine, which motion and flashing can bring on.
• Attention difficulties, where movement keeps pulling the eye away from the text.
• Motion sickness, familiar to anyone who has read in a moving car.

The first is less rare than it sounds. Balance problems become more common with age and after head injuries, and most people who have them simply avoid whatever sets them off.

What triggers it

Not all motion is equal. Small, brief movement that the visitor starts, such as a menu opening when tapped, rarely causes trouble.

The problems come from large movement across much of the screen, movement that does not match what the visitor is doing, and movement that starts by itself.

Parallax scrolling, where the background moves at a different speed from the page, is the classic case. Others are photographs that slowly zoom, sections that fly in as you scroll, background video, and carousels that advance on their own.

Scripts that take over scrolling and change its speed are among the worst, because the page no longer moves the way the visitor's hand does.

The setting visitors can already switch on

iPhones, iPads, Macs and Windows 10 all have a setting that asks for less animation. On an iPhone it is called Reduce Motion and sits in the accessibility settings.

Browsers can pass that preference on to websites, so a site can tell when a visitor has asked for less movement. Safari has done this since 2017 and Firefox since last autumn.

Chrome 74, released yesterday, added the same support. Between them, the three cover most of the browsers your visitors use, which makes respecting the setting worth doing now.

Respecting the setting

For whoever maintains the site, this is usually a small job. A few lines in the stylesheet switch off or soften animations when the visitor has asked for reduced motion.

Effects driven by scripts, such as parallax and sliders, need to check the same preference before they start. Most can simply not run, leaving the page still.

The replacement for movement is usually nothing at all, or a quick fade where something needs to appear.

One thing needs testing afterwards. Sections designed to fade in as you scroll often start invisible, and if the reduced version is done carelessly, they stay that way.

A worked example

A physiotherapy clinic that treats concussion and dizziness had a home page built to impress: a parallax photograph at the top, sections sliding in from both sides, and a carousel that advanced every four seconds.

A patient in vestibular rehabilitation mentioned to her physiotherapist that she had given up booking online. The home page made her dizzy before she reached the button.

The clinic's own patients were exactly the people the design affected most, and none of them had said so before.

The parallax was removed for everyone. The sliding sections were switched off for visitors with reduced motion set and cut to a short fade for everyone else, and the carousel became a single photograph.

The booking pages were stripped of motion entirely. Everything was then checked on an iPhone and a Mac with the setting on, to confirm every section still appeared.

What the standards say

WCAG, the accessibility guidelines most rules refer to, already covers part of this.

If something starts moving on its own and keeps going past five seconds beside other content, visitors must be able to pause, stop or hide it.

That rule catches most carousels and background video, and it sits at the basic level of both WCAG 2.0 and 2.1.

WCAG 2.1 adds a criterion at its highest level for motion triggered by interaction, such as parallax on scroll: it should be possible to switch it off unless it is essential.

Flashing more than three times a second falls under a separate and stricter rule, since it can trigger seizures.

When to remove motion altogether

Respecting the setting protects the visitors who know to switch it on. Many people affected by motion have never heard of it.

So ask of each moving element what it tells the visitor. A menu that slides open shows where it came from, and a short animation can confirm an item went into the cart.

A drifting background tells nobody anything. Neither does a heading that flies in from the left.

Motion that carries no information is a cost with no return, and on booking, contact and payment pages it should go for everyone.

A lighter page as well

There is a side benefit. Parallax effects, scroll animations and sliders usually depend on scripts that every visitor downloads, whether or not anything moves for them.

Removing them makes the page lighter and quicker to use on a phone, which helps every visitor, not only the ones motion bothers.

The counter-case

Some businesses show motion because motion is the work.

A videographer, an animation studio or an events company may need moving images on the page. There, the answer is to let visitors start the video themselves and respect the setting, not to hide the portfolio.

A site whose only movement is a menu sliding open, or a gentle fade on a photograph, has nothing urgent to change.

For everyone else, respect the reduce motion setting and remove the movement that tells visitors nothing.

The check

1. Switch on Reduce Motion on your phone.
2. Visit the home page and scroll slowly.
3. List everything that still moves by itself.
4. Confirm every section still appears with the setting on.
5. Add a pause control to anything that autoplays.
6. Remove motion from booking and contact pages.
7. Ask whoever maintains the site to respect the setting.

Step four is the one that catches the worst failure. A page whose sections never appear with motion reduced is worse for those visitors than the motion was.

Choosing colours that every visitor can read follows the same thinking as colour contrast in the brand palette.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.