A presentation at An Event Apart Seattle in in Seattle, WA, USA by Val Head
Making Motion Inclusive Val Head @vlh
Photo by Victor Lozano on Unsplash https://unsplash.com/photos/aLNqys6xAdw
Inclusive Design?
Modern thinking for modern times.
“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 ❤ UX (and accessibility and inclusion too!)
Animation helps with: Visual continuity Reducing cognitive load Guiding tasks Connecting across contexts … and more
Designing Interface Animation designinginterfaceanimation.com
WCAG
2.2.2 Pause, Stop, Hide
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
2.3.1 Three flashes or below threshold
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.
2.3.3 Animation from interactions
Animation from interactions Motion animation triggered by interaction can be disabled unless the animation is essential for functionality or the information being conveyed.
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.
Animation Motion
How to meet this criteria? • 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
source.opennews.org/articles/motion-sick/
alistapart.com/article/accessibility-for-vestibular/
Vestibular disorders defined:
Vestibular disorders defined: 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.
A mismatch
“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 source.opennews.org/articles/motion-sick/
Motion that potentially triggers
Scaling and zooming
Spinning and vortex effects
Multi-speed or multidirectional movement
Hey, about that parallax…
nngroup.com/articles/parallax-usability/
Constant animation near text
Large movements
alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity
webkit.org/blog/7551/responsive-design-for-motion/
Not on the list… animated colour changes, opacity fades, small movements
Prefers-reduced-motion
2013 iOS 7 released 2014 2015 2016
2013 iOS 7 released Reduce motion setting added to iOS 2014 2015 2016
2013 iOS 7 released Reduce motion setting added to iOS 2014 2015 prefers-reduced-motion proposed 2016 Reduce motion settings Added to macOS
Browser support: 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)
Hey… Browsers?
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
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.
for free. You
can too.