Usability and accessibility » Motion

Sebastian Greger This is a living document
Last update:

While moving elements may enrich UX for some, they can be a burden or even outright dangerous to others; careful consideration needs to be taken when animating parts of a design.

Why moving parts on a website are an issue

Why Motion on Websites and Digital Content Is a Problem equalentry.com
Reading recommendations: Animation on the web and vestibular disorders - Manuel Matuzović matuzo.at

Important to remember: it’s not only moving elements, but also the movements related to scrolling – in particular when foreground and background are moving at different speeds:

Vestibular Issues in Parallax Design webaxe.org
Bookmark: “Vestibular Issues in Parallax Design”
The “Parallax effect” (the background of a website scrolling at a different speed than the rest of page) is one of these fads that suddenly gain traction amongst designers, just for looking cool – “it can be done, so let’s do it” – but without looking at the science of both how it is perceived by users and whether it really is an improvement:
Over the last year or so, a design trend in the web and mobile world has been transition animations, parallax effects, and the like. For many users, this can cause vestibular issues; the symptom is usually vertigo, or a feeling of motion sickness.
 […]

Motion design is UX design

Giving users control over motion on a website is not only a WCAG requirement, but part of respectful UX design:

Accessibility and Motion - Sheri Byrne-Haber - Medium medium.com

The prefers-reduced-motion media query

In CSS, it is possible to detect if users have set a “no motion” preference and use a media query to deliver a tailored experience:

MDN: prefers-reduced-motion developer.mozilla.org

Examples in the wild

In addition to sniffing for a browser preference, a design could also empower users to turn of motion if they prefer on the fly:

Accessibility in action: Josh Collinsworth’s “reduce motion” button
This is inclusive design in action: while some users may have set a permanent preference to disable motion, enabling a simple switch for a motion-heavy website is a great feature.

I'm Sebastian, Sociologist and Interaction Designer aiming to bring toge­ther social science and design for inclusive, privacy-focused, and sustainable "human-first" digital strategies. This is my "digital garden" with carefully curated resources. For a more stream-like outlet, see my journal.

My occasionally sent email newsletter has all of the above, and there is of course also an RSS feed or my Mastodon/Fediverse profile.