Web designers

Web designers grapple with the downsides of flashy animation: motion sickness

Eileen Webb is a digital content strategist. Sometimes she is ill at work. Literally.

Ms. Webb suffers from chronic migraines, which are often made worse by certain visual stimuli. The flashy animations that seem to come out of nowhere on the web just make her nauseous.

“It’s kind of like when you’re on a swing and you have this drop in your stomach,” she said.

A small but growing number of companies are tweaking their websites and apps to accommodate users with motion sickness or sensitivities, like Ms. Webb, as well as those who want to turn off animations to save battery or help manage their ailments. attention deficit. .

Changes are occurring as businesses change their websites and applications, moving from one-size-fits-all experiences to approaches tailored to each user’s preferences and needs.

“The initial reaction was to turn the animation off completely,” Intuit said. Inc.

Global accessibility leader Ted Drake remembers when the company’s developers first learned that its products could make some people sick. “But once more and more people started to get involved, we realized we didn’t need to turn off the motion, we just needed to provide some alternate, but still delicious animation.”

Web designers began taking the needs of people with a sense of movement seriously in the early 2010s, when they discovered new styles of animation, including apps that zoomed in and out when opened and opened. closed, and an optical technique called parallax scrolling, in which the foreground and background of a page moved at different speeds – has left some sick, said Val Head, a senior design evangelist specializing in the Adobe animation user experience Inc.

Operating systems including Microsoft Body

Windows and Apple Inc.

iOS responded by adding new options such as “reduce motion,” to its settings, which dampen their own animated effects and instruct apps and websites to do the same.

The designers of Intuit, which owns financial software like TurboTax and QuickBooks, now produce two versions of almost any animation they create, with reduced motion for those who have this setting turned on, Drake said. Colleagues who suffer from motion sickness are helping determine what the reduced-motion version should look like, he said.

But the majority of websites and apps still haven’t been designed to meet system-level demands by pausing or offering alternative entertainment, Ms Head said.

And some users, including Ms. Webb, don’t want to block all movement on all sites because not all types of animation make them sick.

“I want the animations to be accepted, the same way you choose to play audio on a video on Instagram,” Ms. Webb said.

Very few websites allow users to choose on a case-by-case basis whether they want animations before they start playing, Ms. Webb said. But some that require users to log in now allow them to disable motion through their account settings.

Intuit says its designers create two different versions of almost any animation they release, including TurboTax’s odometer graphic. The animation on the right is shown to users who have enabled the “reduced motion” feature on their device.



Language learning app Duolingo Inc. added an animation on / off toggle to its app preferences in February, though it already reduces movement based on users’ device settings. Likewise, social network Discord Inc. introduced reduced motion settings in 2020, allowing users to match their animation and motion preferences to those of their operating system, reduce them in the app, or to disable them completely.

“Each person’s usage and needs are different,” said Joey Baker, Accessibility Team Leader at Discord, “so it’s good practice and important for us to allow users to enable or turn off motion reduction separately from your device settings. “

More websites will welcome users who prefer limited animation as awareness of the problem increases, predicts Adobe’s Head.

“Years ago, we weren’t all living on the web all day, all the time,” she said. “Now [that] we sort of do this, it makes sense that user preferences play a role in how websites and their designs work.

Write to Katie Deighton at [email protected]

Corrections and amplifications
Discord offered users a reduced motion settings option in 2020. An earlier version of this article incorrectly stated that the setting was introduced in March 2021. (Corrected June 24, 2021)

Copyright © 2021 Dow Jones & Company, Inc. All rights reserved. 87990cbe856818d5eddac44c7b1cdeb8