Vestibular Issues in Parallax Design

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.

The issue was not well recognized until iOS 7 was released and overwhelmed users with an excessive amount of visual effects, especially parallax. Numerous articles were written about this issue, including iOS 7 and motion sickness by iMore. In a poll displayed on that article, about 28% of users reported having either mild or serious motion sickness with iOS7; this is not a formal study but still makes quite a statement. And at the time of writing, there are 100 comments on the article!

Pro tip! To reduce the parallax effect in iOS 7, go to Settings > General > Accessibility > Reduce Motion.

Pros and Cons

A study by Purdue University found that “although parallax scrolling enhanced certain aspects of the user experience, it did not necessarily improve the overall user experience”. Let’s take a look of pros and cons of parallax design.

Pros:

1. May possibly increase user engagement.

Cons:

1. Makes many users sick.
2. Requires additional code which makes web pages more complex longer to load.
3. Does not function smoothly across all browsers.
4. Difficult to implement with responsive and mobile design.
5. Can make it difficult or frustrating for the user to consume content due to excessive scrolling.

Recommendation

There are obviously many more negative points for using parallax design as there are positive. My recommendations are:

• Use parallax effects (and animations) with much discretion and tolerance, if at all.
• Ensure complete browser testing on desktop as well as mobile devices.

UPDATE: The CSS Reduced Motion Media Query can now be used to turn off (or reduce) animation and motion effects when a user has the setting on in the user agent, if supported.

Related Articles

• Why iOS 7 is making some users sick by The Guardian
• How the parallax effect is used in web design by TechRepublic
• A Primer To Vestibular Disorders by The Accessibility Project
• What are the symptoms of a vestibular disorder? by Vestibular Disorders Association (VEDA)
• Added Sep. 22: Balance Awareness Week and iOS8, a Storify by @Feather
• Added Sep. 23: Animation for Attention and Comprehension by Nielsen Norman Group
• Added Aug. 2015: Infinite Canvas 6: Vestibular Disorders and Accessible Animation (YouTube)
• Added Mar. 2018: Your Interactive Makes Me Sick by Eileen Webb.
• Added Dec. 2018: A Guide to Creating Accessible Animations by Anna Monus.
• Accessibility for Vestibular Disorders: How My Temporary Disability Changed My Perspective (Apr. 2019)
• Accessible Web Animation: The WCAG on Animation Explained (Sep. 2020)
• Designing With Reduced Motion For Motion Sensitivities (Sep. 2020)
• Why Motion on Websites and Digital Content Is a Problem (Dec. 2021)
• Creating Accessible UI Animations (Nov. 2023)
• Motion, parallax, and web accessibility (Oct. 2024?) by Indiana University

Related Tweets

iOS7 animations causing vertigo for some users: http://t.co/M4NASpmgc6 Given Apple #a11y focus, “disable animations” quick fix? Like IE has?

— Adrian Roselli (@aardrian) September 28, 2013

Use animation in #webdesign with caution/moderation; be sensitive to users with vestibular sensitivity: http://t.co/nqEr2Btwgp #a11y

— Web Axe (@webaxe) July 15, 2014

Web animations & parallax make people with vestibular issues sick! The only way they can turn them off is to disable CSS & JavaScript. #a11y

— Jeffrey Zeldman (@zeldman) July 25, 2014

@heydonworks @dennisl @aardrian Vestibular Disorders are a *real* concern http://t.co/2sb5CkAyK0 — Steve Buell (@SteveBuell) September 19, 2014