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