6

Designing Safer Web Animation For Motion Sensitivity

 3 years ago
source link: https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Designing Safer Web Animation For Motion Sensitivity

by Val HeadSeptember 08, 2015April 30, 2020

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.

Distance covered#section6

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.

Be purposeful#section9

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.

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!#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.

Recently by Val Head

Designing Interface Animation

“How your brand moves tells its story.” In this excerpt from her new book, Designing Interface Animation: Meaningful Motion for User Experience, author Val Head focuses on how motion can help bring a brand to life and make it memorable.

Further reading about Accessibility

Color Craft & Counterpoint: A Designer’s Life with Color Vision Deficiency

There's a common cognitive dissonance about design: that good design can't come from designers with color vision deficiencies. Much to the contrary, people with CVDs are far more aware of color and usability gaps, and can be invaluable during the design process. Sharing his first hand perspective as a color blind web professional, Noah Glushien discusses his career, living with CVDs, and how to enhance projects.

Building the Woke Web: Web Accessibility, Inclusion & Social Justice

From banking to civil services to education, the internet intersects every part of our lives in a way that was unthinkable 20 years ago. And yet the web remains inaccessible to vast swathes of people, with code issues far from the only roadblock. Olu explores the complexity of true accessibility, and offers a thoughtful approach to building a safer and more welcoming web.

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK