Motion design

Motion design is a captivating and engaging medium that offers unique advantages for visual storytelling. However, it can be tricky to design motion in a way that is accessible and ensures inclusivity for all users.

In today's bite, you'll explore the benefits and challenges of accessibility in motion design and learn how to apply the power of motion design while addressing the concerns and barriers to make digital content more inclusive for everyone.

To learn more about how to make videos more accessible to perceive and control, check out our bite about the medium of video.

‍

How motion enhances accessibility

While motion is often painted in bad light within Accessibility communities because of its apparent challenges, applying motion in the right scenarios can actually greatly benefit user understanding, often requiring less energy or time to get to their goal.

They say one image says more than a thousand words, imagine 30 images a second!

Animation and video are beneficial for various groups, including individuals with low literacy levels, immigrants, older adults, children, the TikTok generation, and anyone who struggles with long blocks of text or maintaining attention. Motion has the remarkable ability to simultaneously explain and visually demonstrate concepts, offering a concise and engaging way to convey information effectively.

Micro animations

When designing for interaction, micro animations can give the user valuable feedback that helps them understand the functionality or status of an element. It can help to:

• orient the user;
• guide their attention;
• provide a more pleasing and playful experience.

‍

Common accessibility risks in motion design

Here are some things to be cautious about when using motion design:

• Not everyone can see animations, so it's important to provide alternative options.
• Fast motion can trigger dizziness, vertigo, and nausea in some individuals, particularly those with vestibular dysfunction.
• Quick and high-contrast animations, like flashing images, can trigger seizures in people with epilepsy.
• Excessive movement or the need to focus on multiple elements simultaneously (visuals, audio, text) can make it difficult for individuals with ADHD to stay focused and engaged.

Being aware of these considerations helps ensure that motion design is used responsibly and with the goal of making content accessible to as many people as possible.

‍

Motion in practice

So how should you design accessible motion?

Design

• Ensure good colour contrast.  Individuals with visual impairments and colour blindness have a harder time distinguishing shapes if they have low contrast. Make sure large text has a contrast of at least 3:1 with its background and give small text a contrast of over 4.5:1. (WCAG 1.4.3 contrast (minimum)) This also benefits those viewing the video in poor lighting conditions. Use tools like Color Oracle to check if your content is readable for people with colour blindness. Some professional software, such as Adobe Illustrator and Photoshop, have built-in features for this purpose.

Animation

• Avoid elements that blink more than three times per second. (WCAG 2.3.1 Three Flashes or Below Threshold (Level A))
• Limit the number of moving elements and avoid overwhelming the viewer's focus area. This prevents the animation from becoming too distracting.

• Avoid a "parallax" effect, where the foreground and background move at different speeds, as this is a common cause of severe motion sickness with many users.
• Avoid swiping motions across the screen, like wipe transitions or big objects flying in, as they can cause motion sickness and nausea.

• Keep your animations small. Make sure movement covers a maximum of one-third of the screen area.  Large or full-screen motion design can disorient and cause nausea.

• Give the user enough time to register visual elements and read texts that might appear on the screen. Keep in mind that people with cognitive disabilities can be slow readers. (WCAG 2.2 Enough time)

Scripting

• Use clear and concise language. Keep your language at a B1-level difficulty and explain necessary words that exceed it. (WCAG 3.1.5 Reading level) You can check your text's difficulty with HemingwayApp or IshetB1?.

• Strike the right balance between descriptive narration and relying on visual elements.

Audio

• Background Noise: Ensure a clear distinction between foreground and background sound. Maintain a minimum of 20 decibels (approximately 4 times softer) difference between the voice-over and background music or sound, excluding short sound effects lasting 1 or 2 seconds.

Voice Over

• Speak clearly and calmly.
• Pause between topics or sections.
• If you choose not to explain every visual element in your voice-over to maintain the video's pace, leave enough time in between sentences for audio description to provide additional context.

‍

When to use motion and when to avoid it.

When designing animation and interaction, especially for websites, it can be tough to determine when motion should, and shouldn't be used. When thinking about an animation, determine why it should be there.

• Does the animation give the user feedback or communicate functionality? Is movement essential for conveying meaning or information? If the answer to one or both of these is yes, go forth and animate!
• Is the motion decorative and meant to add a “Wow-factor” to your experience? Then it might be time to kill some darlings…

This might sound straightforward at first, but in reality, there is a fine line between functional and delightful motion. Strive to find a balance where the motion serves a purpose rather than simply being decorative.

One helpful mechanic you can use to enhance accessibility on websites is to respect the user’s browser setting "@prefers-reduced-motion." Using this media query on your animations enables users to view a website with all animations that aren’t essential to understand the message turned off.

‍

The video format

While this bite focuses on the content of a video, there is a lot that can be done to make your video or animation more accessible to use, like:

• Textual Alternatives;
• Transcriptions;
• Captions;
• Sign Language;
• Player Functionality;
• Avoiding Auto-play.

To learn more about making video and animation more accessible to perceive and control, check out our bite about the medium of video.

‍

By thinking about accessiblity from the start of designing video and animation, you can make big improvements very easily and contribute to an accessible world that's useable to all.