A List Apart

Menu
Illustration of a person running, jumping, and falling

Illustration by Sue Lockwood

Designing Safer Web Animation For Motion Sensitivity

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?

Article Continues Below

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?

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

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

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

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.

Distance covered

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

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

There are a few things we can do a to make animated movements easier on folks who find it triggering.

Be purposeful

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

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

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?

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.

Browser notification of animation on page.

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!

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.

17 Reader Comments

Load Comments