Making Motion Inclusive

Slide 1

Making Motion Inclusive Val Head @vlh

Photo by Victor Lozano on Unsplash https://unsplash.com/photos/aLNqys6xAdw

Slide 2

Slide 3

Inclusive Design?

Slide 4

Modern thinking for modern times.

Slide 5

“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

Slide 6

Animation ❤ UX (and accessibility and inclusion too!)

Slide 7

Animation helps with: Visual continuity Reducing cognitive load Guiding tasks Connecting across contexts … and more

Slide 8

Designing Interface Animation designinginterfaceanimation.com

Slide 9

WCAG

Slide 10

2.2.2 Pause, Stop, Hide

Slide 11

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.

Slide 12

Common places where this might apply: • Autoplaying videos • Animated background videos or animations • Auto-advancing carousels

Slide 13

2.3.1 Three flashes or below threshold

Slide 14

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.

Slide 15

Slide 16

Slide 17

Slide 18

2.3.3 Animation from interactions

Slide 19

Animation from interactions Motion animation triggered by interaction can be disabled unless the animation is essential for functionality or the information being conveyed.

Slide 20

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.

Slide 21

Animation Motion

Slide 22

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

Slide 23

source.opennews.org/articles/motion-sick/

Slide 24

alistapart.com/article/accessibility-for-vestibular/

Slide 25

Vestibular disorders defined:

Slide 26

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.

Slide 27

A mismatch

Slide 28

“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/

Slide 29

Motion that potentially triggers

Slide 30

Scaling and zooming

Slide 31

Slide 32

Spinning and vortex effects

Slide 33

Slide 34

Slide 35

Multi-speed or multidirectional movement

Slide 36

Slide 37

Hey, about that parallax…

Slide 38

Slide 39

nngroup.com/articles/parallax-usability/

Slide 40

Constant animation near text

Slide 41

Slide 42

Large movements

Slide 43

alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity

Slide 44

webkit.org/blog/7551/responsive-design-for-motion/

Slide 45

Not on the list… animated colour changes, opacity fades, small movements

Slide 46

Prefers-reduced-motion

Slide 47

2013 iOS 7 released 2014 2015 2016

Slide 48

2013 iOS 7 released Reduce motion setting added to iOS 2014 2015 2016

Slide 49

2013 iOS 7 released Reduce motion setting added to iOS 2014 2015 prefers-reduced-motion proposed 2016 Reduce motion settings Added to macOS

Slide 50

Slide 51

Slide 52

Browser support: Safari > 10.1, iOS Safari > 10.3, Firefox > 63, Chrome > 74

Slide 53

CSS @media (prefers-reduced-motion: reduce) { /*” alternative behaviour */$ }

Slide 54

JS let motionQuery = matchMedia(‘(prefers-reducedmotion)’); const handleReduceMotionChanged = () =>& { if (motionQuery.matches) //reduced behaviour; } motionQuery.addListener(handleReduceMotionChanged); handleReduceMotionChanged();

Slide 55

“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)

Slide 56

Hey… Browsers?

Slide 57

Respecting Reduced Motion

Slide 58

reduce != remove

Slide 59

Slide 60

Slide 61

@media (prefers-reduced-motion: reduce) { * { animation: 0s !important; transition: 0s !important; } }

Slide 62

Reduce where needed

Slide 63

Slide 64

Slide 65

.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); } }

Slide 66

Slide 67

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; }

Slide 68

Slide 69

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; } }

Slide 70

Slide 71

Slide 72

JavaScript let scroll = new SmoothScroll(‘a[href*=”#”]’), motionQuery = matchMedia(‘(prefers-reduced-motion)’); const handleReduceMotionChanged = () =>& { if (motionQuery.matches) scroll.destroy(); } motionQuery.addListener(handleReduceMotionChanged); handleReduceMotionChanged();