Motion is pervasive in web and user interface design. From full-page background videos to bespoke interaction designs, you’d be hard-pressed to find a website or app that doesn’t feature some sort of motion or animation.
While the emphasis is on the presence of motion, it’s just as important to consider the reduced-motion experience during design and development.
Why it’s important
Site users may prefer reduced motion for a number of reasons. But most commonly they are:
- Attention. Many users struggle to maintain attention when faced with website animations. This difficulty can be due to attention deficit disorders or simply preferring interfaces where the design doesn’t compete with the content.
- Vestibular disorders. A vestibular disorder is an inner ear condition that can trigger symptoms like nausea, headaches, and dizziness in response to animated content.
Whatever the reason, it’s essential to respect your users’ motion preferences. Some users may only be inconvenienced or annoyed by a highly animated site. But some users may have to stop using it entirely to prevent an adverse physical reaction.
Tips for reduced motion design
When designing for reduced motion, you should consider two types of motion or animation:
- Moving, blinking, scrolling, or auto-updating information that happens automatically, without user interaction; this includes auto-playing videos and news tickers.
- Motion which occurs due to user interaction. This includes animations like parallax animations, where different sections scroll at different rates in response to user scrolling.
There are different ways to go about giving users the ability to opt out of motion. Let’s look at some of the more common approaches.
1. Design fallback content
Accessible development starts with accessible design, so it’s essential to think through the reduced motion experience while still in the design phase.
For example, say you’re designing a parallax effect for a client’s site. Don’t let this be an accessibility afterthought. Instead, tackle the issue head-on:
- Identify this as a feature that can trigger severe issues for users with vestibular disorders.
- Explore reduced motion alternatives. Instead of a parallax effect, a fade-in effect can look just as polished and keep users from getting sick.
- If the reduced motion alternative should be served up based on user settings, provide both designs and specifications to developers. Try using accessibility annotations in your designs to communicate the different animation specifications to developers.
2. Add controls to videos
One popular site component you’ll see across the web is a hero section that features auto-playing videos underneath the headline text. A design like this aims to catch users’ attention, but according to the Nielsen Norman Group, the effect can be more problematic than awe-inspiring.
When users arrive at a webpage, they don’t appreciate being surprised by video or audio content that begins playing without their consent. Video, and the accompanying audio, can confuse or distract users and interfere with their consumption of content on the page.
Instead, give users the choice of whether or not they want to interact with your content. For example, this Harvard page features a prominent control on the bottom right corner of the video that allows users to pause the auto-playing video.
This advice goes for GIF content as well. Thankfully, there are solutions out there to help manage GIF animations. One example is the Gifffer JavaScript library, which replaces default GIFs with a static image and play button.
3. Use CSS media queries and JavaScript
CSS and JavaScript allow you to query your users’ reduced motion settings. This enables you to toggle between alternate versions of a design based on a user’s system preferences.
The prefers-reduced-motion media query lets you use CSS to display or hide content based on a user’s system preferences.
The following code snippet uses a CSS media query to toggle between different versions of an animation based on user preferences.
You can query these settings in JavaScript via matchMedia(). For example, here’s how we check for the setting in Craft’s control panel before animating things:
Garnish.prefersReducedMotion = function () {
// Grab the user's reduced motion setting
const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
// Check if the media query matches or is not available.
return !mediaQuery || mediaQuery.matches;
}
We can then check a user’s motion preferences before beginning an animation:
if (Garnish.prefersReducedMotion()) {
// Serve up a low-motion version
} else {
// Animate it
}
4. Give users control over global site motion settings
Using media queries to toggle site motion is a great way to make your site more accessible. But it’s important to note that some users might not know how to update their system settings. Or, they may want to opt in or out on the spot.
One way to give users additional control over motion is to add a global toggle to turn animations on and off.
One example is the Animal Crossing website. The header includes a toggle button to enable or disable motion. When motion is enabled, the background changes via a spinning animation and characters bounce into the frame in the foreground. When the toggle is disabled, the background changes without spinning effects and characters fade in.
