A presentation at An Event Apart Boston in in Boston, MA, USA by Val Head
Making Motion Inclusive Val Head @vlh
Photo by Victor Lozano on Unsplash https://unsplash.com/photos/aLNqys6xAdw
“Inclusive design doesn’t mean you’re designing one thing for all people. You’re designing a diversity of ways to participate so that everyone has a sense of belonging.” –Susan Goltsman
Animation helps with: Visual continuity Reducing cognitive load Guiding tasks Connecting across contexts … and more
Designing Interface Animation designinginterfaceanimation.com
Pause, Stop, Hide Provide a way to pause, stop, or hide any moving, blinking, scrolling content (that lasts more than 5s) unless that moving, blinking, or scrolling content is an essential activity.
Common places where this might apply: • Autoplaying videos • Animated background videos or animations • Auto-advancing carousels
Three flashes or below threshold Don’t include anything that flashes more than three times in any one second unless the flashing is below the general flash threshold red flash threshold.
Flashing animations might come up more than you initially think. This glitchy graphic flashes different colours more than three times a second. (To their credit, the article this is from was also offered in a text-only format for those sensitive to flashing.)
Sometimes we see warnings like this in front of sites or interactive pieces that include flashing animations.
This particular piece was a holiday card for an agency that included a few short interactive games. One could argue that this might not be critical or important content, so those that are sensitive to flashing weren’t missing anything by not being able to advance past the flashing warning. Does that argument hold? It depends on the content and the context of the situation.
Animation from interactions Motion animation triggered by interaction can be disabled unless the animation is essential for functionality or the information being conveyed.
This guideline differs from the two guidelines before it since it deals with animation that comes as a result of user interaction.
“motion animation” can sound like a confusing term at first, and it does have a rather long definition. The last line of the definition is one to especially take note of.
motion animation (definition): Addition of steps between conditions to create the illusion of movement or to give a sense of a smooth transition. For example, an element which moves into place or changes size while appearing is considered to be animated. An element which appears instantly without transitioning is not using animation. Motion animation does not include changes of color, blurring or opacity.
Essentially, what this definition says is that all motion is animation but not all animation is motion. It’s an important distinction to make to denote that some types of animation can be triggering and other types of animation are likely not.
• Avoid using unnecessary animation • Provide a control for users to turn off nonessential animations from user interaction •Take advantage of the reduce motion feature in the user-agent or operating system
Before we dig into following this list, let’s look at why this recommendation is being made in the first place.
Over the last few years, we’ve come to realize that some number of people can have their motion sensitivities triggered by motion on screen. To put it another way, they can suffer real physical symptoms or illness as a result to some types of motion on screen.
Elieen Web provides a first-person account here:
source.opennews.org/articles/motion-sick/
Another first-person account from someone with a temporary vestibular disorder: alistapart.com/article/accessibility-for-vestibular/
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 no one way to have a vestibular disorder. Different people have different symptoms and different triggers.
What triggers one person, may not affect another and context matters. Some folks with vestibular disorders that I talked to had no problem playing first person video games with lots of full screen motion. But when it came to opening a desktop app with a full screen wipe transition - that would be triggering.
Expectations also play a big role. When large amount of motion are encountered by surprise, the chances for them to be triggering is increased.
What causes the negative impact is not exactly the motion itself, but the mismatch the motion creates. When the motion on screen gives enough visual cues to suggest the body is moving, but we’re sitting still in a chair, that mismatch can cause symptoms for people with motion sensitivity.
“I’m not suggesting you shouldn’t make more cool interactive news stories, or use motion in interesting ways. But I’m advocating here for some guidelines to help make your story a better experience for all your readers.” –Eileen Webb
It’s helpful to better understand what types of motion are likely to be triggering, because it’s not all motion or animation that is problematic. Certain types of motion are much more likely to be triggering.
Scaling and zooming on a large scale, relative to the overall viewport size, are type of motion that commonly triggering for people with motion sensitivites.
The app opening zoom animation on iOS is one example of this. (In fact it’s an important example of this that will come up later in this talk.)
The mismatch between the flat look of the icons contrasted with the depth and speed at which the icon moves is what specifically can be triggering in this example.
Spinning and vortex effects generally don’t need to be large to be triggering. Even a small spinning effect, especially if it loops infinitely, can be triggering.
An example of spinning motion in the background of a web site header. (Remember this site, it will come up again later.)
Another, more pronounced example of a potentially triggering spinning effect. The mismatch between the spinning content and the non-moving shapes around it is what can be triggering.
Multi-speed or multidirectional movement
An example of a site that has both multi-speed and multi-directional motion on scroll.
The mention of “multi-speed” might have made you think of parallax effects. And you’d be right. Parallax effects, by their nature, involve moving different objects at different speeds and are almost universally listed as a trigger by the motion sensitive folks I’ve talked to.
An example of a parallax scrolling effect.
Parallax does have some uses - this article outlines the situations where it might be useful, along with a much longer list of places where it was not found to be useful. But no matter your reason for using parallax effects, you should consider designing methods for reducing motion because it is so commonly a triggering type of motion.
nngroup.com/articles/parallax-usability/
The constant movement of the pull quote animations and the static text create the triggering mismatch in these cases.
Large motions, relative to the overall screen size can also be triggering. If an animation causes a large amount of the overall screen real estate to move, like a full screen wipe or transition, it’s likely to be triggering.
alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity
webkit.org/blog/7551/responsive-design-for-motion/
It’s important to note what’s not on this list: Not on the list… animated colour changes, opacity fades, small movements
What is it? And where did it come from? Turns out, it’s rather new, but also very powerful.
2013 iOS 7 released and we saw article with headlines like this: “Why iOS7 is making some users sick”
Later in 2013: Reduce motion setting added to iOS
2015: prefers-reduced-motion proposed
2016: Reduce motion settings Added to macOS
Browser support is good and getting better:
Safari > 10.1, iOS Safari > 10.3, Firefox > 63, Chrome > 74
CSS @media (prefers-reduced-motion: reduce) { /*” alternative behaviour */$ }
JS let motionQuery = matchMedia(‘(prefers-reducedmotion)’); const handleReduceMotionChanged = () =>& { if (motionQuery.matches) //reduced behaviour; } motionQuery.addListener(handleReduceMotionChanged); handleReduceMotionChanged();
“The prefers-reduced-motion media feature is used to detect if the user has requested the system minimize the amount of animation or motion it uses.” no-preference (false) | reduce (true)
Respecting Reduced Motion
reduce != remove
@media (prefers-reduced-motion: reduce) { * { animation: 0s !important; transition: 0s !important; } }
Reduce where needed
.thing { … transform: translateX(-100%); transition: transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1); } @media (prefers-reduced-motion) { .thing { opacity: 0; transition: opacity 500ms cubic-bezier(0.645, 0.045, 0.355, 1); } }
Starting state .plant1 { transform: translateY(-100%); transition: $dur $ease-both; } .plant2 { transform: translateY(120%); transition: $dur $dur/6 $ease-both; } .plant3 { transform: translateY(-100%); transition: $dur $dur/3 $ease-both; }
Starting state .plant1 { transform: translateY(-100%); transition: $dur $ease-both; } .plant2 { transform: translateY(120%); transition: $dur $dur/6 $ease-both; } .plant3 { transform: translateY(-100%); transition: $dur $dur/3 $ease-both; } Ending state All the plants { transform: translateY(0); opacity:1; }
Reduced motion @media (prefers-reduced-motion: reduce) { .title span:nth-of-type(1), .title span:nth-of-type(1) { transform: translateX(0); opacity:0; } .plant1, .plant2, .plant3 { transform: translateY(0); opacity:0; } }
JavaScript let scroll = new SmoothScroll(‘a[href*=”#”]’), motionQuery = matchMedia(‘(prefers-reduced-motion)’); const handleReduceMotionChanged = () =>& { if (motionQuery.matches) scroll.destroy(); } motionQuery.addListener(handleReduceMotionChanged); handleReduceMotionChanged();
Alexa Top 10 Google Yahoo Youtube Linkedin Facebook Instagram Amazon Wikipedia Reddit Twitter
Don’t forget the videos and .gifs
Projects with more extensive motion
codepen.io/marcysutton/pen/yqVVeY?editors=0010
So I hope this has all helped you to show how we can be creative with motion, even really really creative, while still being inclusive
By keeping an eye out for potentially triggering motion and mitigating them with the reduced motion query or even a custom toggle, you can expand the audience of who can meaningfully participate in the projects you make.
Thank you! Newsletter: uianimationnewsletter.com Let’s chat on twitter: @vlh
Let’s clear the air about animation and inclusive design. It’s a common misconception that things like inclusive design and accessibility only come at the cost of design details like motion, but that’s just not the case. Whether it’s microinteractions, animated illustrations, or larger animated experiences, a little care and consideration can go a long way towards getting the best of both worlds. In this dynamic session, Val will show you how to build animated interactions with inclusivity in mind from the start. We’ll discuss how to apply web accessibility guidelines to modern web animation, when and how to implement reduced motion, and approaches to building up animated interactions for a solid standards base.
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
for free. You
can too.