Accessibility inspired: Motion and animation

We’re working to create better experiences for everyone by taking an accessibility-inspired approach to all facets of our work. As part of our journey to embrace accessibility in design, we’re sharing a series of insights that document our process and learning.

In our last post, we talked about one of the most common design patterns on any website: text on photography. In this article, we’re going to tackle another area of web design that can often go wrong: motion and animation.

Why motion and animation matter

When used intentionally, motion and animation can create little moments of delight that ultimately create a better user experience. If they’re used too much, they can cause some major usability issues, such as making your site painfully slow to load, which can deter people from returning.

There are also some serious health considerations to consider when using motion and animation. When used incorrectly, motion can negatively impact people with dyslexia, epilepsy, migraines, motion sickness, neurodivergence, like attention deficit disorder or autism spectrum disorder and people who use screen readers. In the most extreme cases, motion can actually trigger seizures. Accessibility advocate Sheri-Byrne Haber outlines the very serious risks of using motion and animation incorrectly. If you fall into this group of people, remember that you can always opt out of animations through your operating system settings.

Prioritizing autonomy and control is one of the pillars of WCAG. This can come into play in a few different ways. One of the common ways to do this is with a toggle, which allows users with motion sensitivity to tailor their experience to suit their needs.

The key to using motion and animation is to use them intentionally. This means striking a balance between having that wow factor and being mindful of your site’s usability. When we talk about this topic, the general rule is less is more. Simple micro-interactions, which focus on a single use case of motion or animation, are the most effective way of creating delight while balancing accessibility concerns. Although these topics may seem inversely related, there is in fact a way to accomplish this.

These real-world examples show how some design decisions can negatively impact the user experience when accessibility isn’t considered.

Motion and animation gone wrong

Steer clear of trendy motion and animation that prioritizes aesthetics over function

Android uses a variety of trendy motion and animation techniques on their site, but there are a few sections in particular that are a bit much. In this example, the blue and orange-coloured shapes slide in from the left side of the page at a relatively fast rate. The duration of the animation also goes on for too long. If the goal of this is to quickly draw our attention to this panel, it has definitely achieved that. However, this particular use of motion doesn't do anything to help our understanding of the content. It's purely for aesthetics. The use of animation in the phone is the most important as it illustrates the functionality described by the content beside it.

Use motion and animation to help not hinder task completion

When animation lengthens the amount of time that it takes for someone to complete a task, that's a problem. In this example, scrolling triggers all of the elements on the GoDaddy design site. If you scroll too fast, you can't read the content. You have to scroll slowly through the site and wait for the content to come in. In this case, animation is being used for storytelling. The content gradually reveals itself as the user scrolls, but because everything is animated, it takes a while to load in. They're using animation in excess which makes for a poor (and time-consuming) user experience.

Don’t weigh your site down with too much motion and animation

Animation is delightful when used in moderation and for specific jobs. L'Oréal's site is an example of motion and animation overload. They do have an accessibility button in their super navigation which allows users to toggle animations on and off. That being said, the default experience could be improved by incorporating some foundational accessibility principles to it. Too many things are moving, from the video in the masthead of the site to the carousel of cards that load in, expand in size, then shrink back down. Because of this overzealous use of animation, the site is quite laggy.

Motion and animation done well

Use intuitive motion and animation to put the user in control

The Stanford d.School gives users the choice to toggle motion on and off, which complies with WCAG's rule that there needs to be a mechanism to stop motion. This is done through the use of a dropdown with two options, standard visuals and simplified visuals. Although their use of motion is minimal – it’s reserved for hover states on buttons to indicate that the element is interactive and for simplified background graphics – it's important to note that the overall experience of the site doesn't rely on the use of motion; it's simply enhanced by it. While we still think this is a good example, there is room improvement. The icon for the dropdown is a sun, which often indicates brightness or switching between light and dark mode, so it might not be as intuitive as it could be.

Go for simple motion and animation to enhance the user experience

Apple's use of simple motion techniques makes for an overall simple but sophisticated user experience. In this example, they've used a simple hover animation for the articles at the bottom of the page to indicate that you can click on them. On hover, the text box expands to show more information about the article and a drop shadow appears on the card. This movement draws the eye to the text area and leaves no question in our minds that this element is clickable.

Use motion and animation to inform and delight

Help Scout does a great job of using motion and animation to fulfill more than one purpose on their site. They use animation primarily to showcase the functionality of their platform. This way, users get an idea of what is available on the platform without committing to a demo. Then they use animation to add a sense of fun and whimsy to the page. In some cases, the animations are so subtle that they almost go unnoticed. The sparkle around the “What you can do with Help Scout” is a perfect example. It brings a little moment of delight to an otherwise plain page.

Using thoughtful animations on our intranet brand portal

One of the biggest reasons why we use motion and animation is to attract people’s attention. On our brand portal (which is connected to our GO modern SharePoint Intranet), we've used motion in the bell icon of our alert component to call out important information. In this case, the information on the page is explaining how to use certain slides in our PowerPoint template. This callout is important because it helps Habs accomplish the task at hand. It catches our attention without getting in the way, while still creating a sense of fun with its subtle jingle effect.

Uncompromising design

While we’ve only highlighted a few examples, we hope that this begins to break down the myth that designing for accessibility means compromising on design aesthetics and what we associate as visually pleasing. Using these techniques, among many others, you can bring in some of the positive aspects of immersive storytelling while still caring about accessibility.