Design for all » Inclusive usability » Motion

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/why-motion-on-websites-and-digital-content-is-a-problem/

Reading recommendations: Animation on the web and vestibular disorders - Manuel Matuzović

matuzo.at/blog/reading-recommendations-animation-on-the-web-and-vestibular-disorders/

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

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.
2019

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/@sheribyrnehaber/accessibility-and-motion-484bd322e77d

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:

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

page://e02254a1

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.
2022

Last edited: Dec 2022