It’s no secret that a lot of people consider scrolljacking and parallax effects annoying and overused. But what if motion does more than just annoy you? What if it also makes you ill?
That’s a reality that people with visually-triggered vestibular disorders have to deal with. As animated interfaces increasingly become the norm, more people have begun to notice that large-scale motion on screen can cause them dizziness, nausea, headaches, or worse. For some, the symptoms can last long after the animation is over. Yikes.
The idea that animation in our interfaces is capable of making our users dizzy wasn’t something we had to contend with much when the web was predominantly a static medium. It’s actually a fairly new revelation in most tech circles. Even Apple discovered this the hard way when the animated transitions in iOS 7 started making some people sick. Just like other elements of design, the way you use animation can have an impact on how accessible the end product is to your audience, especially if they suffer from a vestibular disorder.
A vesti-what disorder?#section2
Any disease, damage, or injury to the vestibular system—the system around our inner ear and brain that processes sensory information involved in controlling balance and eye movements—falls under the umbrella of a vestibular disorder. There is a long list of specific vestibular disorders, including benign paroxysmal positional vertigo (BPPV) and labyrinthitis. The a11y project discusses the definition of vestibular disorders as well.
These disorders can affect people of all ages, and the severity and symptoms vary from individual to individual. Estimating an exact number of people touched by this, let alone what percentage of your specific audience may be affected, can be difficult to pin down. According to vestibular.org, approximately 8 million American adults report a chronic problem with balance, while an additional 2.4 million report a chronic problem with dizziness.
It’s also worth noting that people with vestibular disorders aren’t the only ones who can be potentially triggered by animation on screen. Animations can have an impact on those with epilepsy and migraine sensitivities as well.
Identifying potentially triggering animation#section3
To get a better idea of what sorts of web animation are triggering for people with vestibular disorders, I chatted with Greg Tarnoff and Craig Grannell about their experiences. Greg, who experiences vertigo and migraines, is an accessibility and UX consultant, writer, and speaker. Craig, who experiences dizziness, is a writer and editor who has written about the effects of iOS’s animations for publications like the Guardian. Both of them have been vocal about how interface animations affect people with vestibular disorders.
Greg identified Vimeo’s Cameo, Ice and Sky, and RD Construction as troublesome due to their large areas of motion and the parallax-like effects of background and foreground moving at different speeds.
For Craig, the carousel on Apple.com poses a big problem, especially when it flicks back to the first picture. There are no controls to pause or stop that particular carousel, so there’s no way to avoid it.
The iPhone product page, with its parallax-ish background animations and scrolljacking (where the backgrounds animate in at a speed unrelated to your scrolling efforts), causes problems as well.
Craig also describes the horizontal scroll on wired.co.uk as “a nasty surprise” if you’re not prepared for it. Seeing a huge horizontal shift when you’re scrolling downward is certainly a drastic departure from expectations.
In contrast, Solarbeat was characterized as only “mildly annoying.” And Macaw’s Scarlet site wasn’t much of an issue at all beyond minor problems with the opening animation.
Different people have different conditions and reactions, of course. But these examples show that the triggers are more nuanced than one might think if one simply assumes that any or all animation will be problematic. Three factors, in particular, play a big role: the relative size of the movement, the direction of movement, and the perceived distance an animated object covers.
Relative size of movement#section4
Animations that move an object across a large amount of space are most apt to trigger a negative response for someone suffering from a vestibular disorder. The physical size of screen matters less than the size of the motion relative to the screen space available—so a small button with a 3D rotation probably won’t cause trouble, but a full-screen wipe transition covering the entire screen likely would. Animation that involves only non-moving properties, like opacity, color, and blurs, are unlikely to be problematic.
Mismatched directions and speed#section5
Exaggerated parallax and scrolljacking animations are highly likely to be triggering. Much of the time, these effects involve background objects moving at a different speed than foreground objects, sometimes drastically. Animations that move a different direction than the user is scrolling, or in a way not directly linked to the speed at which the user is scrolling, also tend to be problematic. It’s not much of a stretch to see how that could be disorienting.
The amount of spatial distance covered by an animation is a factor as well. It’s virtual space, of course, but animations covering a large perceived distance can be triggering. For example, iOS 7’s 3D zoom transitions caused trouble because of the amount of virtual space covered so quickly.
Your brain on animation#section7
None of this is to say that we shouldn’t use animations in our websites. Not one person I spoke with said that they want to see all interface animation eliminated. In fact, some still very much appreciate it from a design perspective.
A good animated solution often just feels like it’s easier to use and understand. That’s more than just a gut feeling—there’s science behind it, too!
On a basic level, animating an element’s movement makes its path visible on screen. Your user doesn’t have to keep track of the movement in their head. Instead, that effort is essentially off-loaded from their brain to the animation you created on screen. When you reduce cognitive load, you free up users’ working memory resources to focus on other things—like learning new skills and retaining information.
Beyond the cognitive load benefits, other studies show that animation can improve decision-making (PDF) and even help people learn and remember spatial relationships (PDF). Animating between states can also help prevent change blindness. In short: animation can free up your brain power and make an interface easier to understand—the benefits can’t be ignored.
Designing safer motion#section8
There are a few things we can do a to make animated movements easier on folks who find it triggering.
Your UI animations should be designed with purpose and have a reason for being there. (That’s a given, right?) If some part of your interface is moving, there should be a design-focused reason why. There are plenty of ways animation can add to the user experience in addition to its storytelling and demonstrational abilities. Starting with thoughtful, purposeful motion also sets you up well for having accessible animations.
Provide meaningful context#section10
A link billed as “the most spintastic WebGL experiment ever” likely contains large amounts of movement, and people can make an informed decision as to whether following that link is worth the risk to them or not.
But not all animation is hidden behind links. Identifying context gets trickier when motion becomes more and more commonplace. With no reasonable expectation of encountering moving content—large movements in a news article, for example—a person suffering from a vestibular disorder may find themselves dealing with an unexpected onset of symptoms.
If you aren’t certain the context is clear, adding it explicitly could be helpful as well. The a11y project suggests providing “an indicator of what movement will happen on the site when a user takes action.” Setting user expectations is important.
Give control to users#section11
If you do have large amounts of movement that cover a lot of visual ground, consider offering an option to turn off, or reduce, motion. There are plenty of cases where large amounts of motion make perfectly good design sense. Providing what essentially boils down to an alternative way to view that content, or a little extra control, can be a big help for anyone sensitive to motion.
This can be accomplished via a button or toggle switch to reduce or turn off animation globally on your site. Think of it like taking the pause controls the WCAG recommends for animations and applying them on a global level. This does take a little more work on your part, but it offers an important option. If it means the difference between being able to spend time with your content or not, even for a small number of users, then it’s worth the effort.
Exactly how much work it takes to implement a toggle will vary based on the web animation option (or options) you’re using, of course. As an exploration of this idea, Greg Tarnoff developed a prototype of a potential toggle switch that could be used by any site.
A simple toggle that’s consistent across many sites would make it easy for someone sensitive to animation to quickly and easily reduce animation. If it’s something you’d like to see made, too, fork the pen and add to the idea. This sort of thing can only be improved with more minds contributing to it.
A little help from browsers?#section12
Even if you have the best of intentions, you might not have the technical skills or time to pull off an effective animation toggle. While it’s a responsible thing to do, the potential effort it requires starts to make it feel like a temporary solution.
Greg’s toggle solution is a good approach, but browsers could provide a more universal and easier-to-implement version. Our browser could notify users of highly animated content without any additional changes or effort required from the developer.
More granular control could come from proposals like User Queries or User Context. Browsers could let developers customize the desired behavior for both motion-full and motion-light versions of their sites based on an API that exposes user preferences.
Addressing this issue at the browser level may not be as far-fetched as it sounds initially. Thanks to the Web Animation API, we already have some very helpful controls in the developer tools for Chrome and Firefox to pause and play animation globally. A user-facing version of this would be a big step toward giving users control over how much animation they encounter.
In April 2015, Google Accessibility released the Animation Control extension for Chrome that targets on image formats like .gif and SMIL animated SVG. Combine that with the global controls in Dev Tools, and the possibility of browser-based controls doesn’t sound too far off.
From what I’m told by those who actually need it, iOS’s “reduce animation” toggle leaves much to be desired. Maybe browsers can do a better job of it? I would love to see the web solve this in a way that shows the operating system makers who’s boss.
Make wonderful new things, responsibly!#section13
On the web, more than in any other medium, the flexibility and control are there for you to design creatively and responsibly at the same time. We absolutely can innovate and push the web forward designing kick-ass interface animations while still being responsible designers. As a web animator, you can have your animation cake and eat it too—with a little creative thinking.
11 Reader Comments
This is fantastic! Thank you! Too many times I’ve been asked “well how much animation is too much?” and been tempted to say “any”, but this gives me (and the people asking me) some more solid guidelines on how we can approach animation responsibly.
Thanks for writing this and spreading the word Val! One of the things I’ve been pushing the last week is to use hashtags #DZY and #SZR to indicate links that may induce vertigo or seizures respectively due to animation or movement on the site. Consider them the #NSFW and #TW equivalents for the motion sensitive.
Thanks Anne! That’s exactly the sort of question I was looking to answer when researching this. Glad I could help!
Happy to help spread the word, Greg. And thanks for all your help with the research! I like the idea of the hashtags to indicate potentially triggering links. I’m going to start using them in the next UI Animation Newsletter too.
As an FYI, now that I’m looking at this article on a computer and not a phone, the great header illustration by Sue Lockwood actually triggers me with the “double line” 3Dish thing going on in the middle tweening steps. Sometimes even the allusion to motion can be enough.
Great read. My team is looking at how to tackle this issue internally. We came up with a toggle button similar to the demo provided. Web accessibility is a big focus here in Canada!
@greg Me too and I made it. I actually can’t look at it very long.
@Carlin, hit me up if you have questions or get something going. I was going to OSS a library (https://github.com/gtarnoff/omrijs) but have been wicked busy. I’d love to see that come to life in a reusable way.
A great article and a perfect topic for a project I am working on. I know that flashing lights and such can cause seizures but I never really considered how even the examples provided can be troubling to people with vertigo etc. Good point to really help others understand why more is not always better.
Hope I can be heard above the spammers. Great article that explains clearly what happens for me on animated web pages or apps. I am not aware of having any of the medical conditions you mention. I think what happens for me is that, because of the involuntary motion, my eyes are trying to focus on something that is not focusable. I have no trouble watching most animated films, but do tend to have to trouble with videos that flash frequently between light and dark.
That’s a great illo at the top. I think it might trigger some people that don’t get triggered by the animation issue.
@greg thanks for the github share, like it.
Got something to say?
We have turned off comments, but you can see what folks had to say before we did so.
More from ALA
Personalization Pyramid: A Framework for Designing with User Data
Mobile-First CSS: Is It Time for a Rethink?
Designers, (Re)define Success First
Breaking Out of the Box
How to Sell UX Research with Two Simple Questions