July 30, 2019 | Day 2 – Session 1

SVG animation talk

She’s going to talk about 2 things we don’t think go together: Motion & Inclusive design

It’s a misconception that inclusivity and accessibility come with a cost in terms of design or motion (how we want it to look).
We can be purposeful, creative, and do all kinds of things with motion and also be accessible.

It has to do with how we address the task at hand and how we use the tools we now have at our disposal.

The impact of inclusive design solidified one day last year when she was walking her dog and listening to Episode 226 of the podcast 99% Invisible. Summary of a story in the episode: How fighter planes came to exist the way that they do. In the 20’s when they were signed, they designed the cockpits to fit the average pilot in the 1920s.

This worked until around WWII and military aviation expanded, planes got fancier, they needed more planes, and were expecting this great explosion of effectiveness from the new planes and pilots. They saw a decline in performance instead, so the investigated things like – maybe this is just dangerous and that’s the deal, or maybe pilots need more training because the planes are more complex, and then finally they looked at the cockpits. They realized that they needed to find the new average size of pilots.

Then they ALSO asked the question of how many of these pilots fit all 10 of the average measurements, and out of 4000 pilots NONE fit those 10 average measurements. So then they tried to see how many of those pilots fit just 3 of those average measurements, and it was still less than 5%!!

So then they started making cockpits with adjustable seats, adjustable pedals, adjustable steering wheels (or whatever that’s called).

If you’re designing for the average pilot, you’re designing for NO ONE.

And then she had an ah-ha moment that what if there’s no average user for us either!

The assumption that people will adapt themselves to fit the software we make is not something we can assume anymore. Back at the beginning of the web we probably could assume this – and that there probably was an average user. But definitely not anymore.

Inclusive design is designing a diversity of ways to participate – Susan Goltsman (paraphrased)

One day it might seem unimaginable that we just didn’t always design a diversity of ways to interact with our sites.

So we’re going tot turn this lens onto motion.

This talk is not about why animation is bad or why we shouldn’t use it. It’s about how we can use animation responsibly in light of creating various ways to participate.

Animation helps with: Visual continuity, reducing cognitive load, guiding tasks, connecting across contexts, etc.
Books: SVG Aviations (Sarah Drasner), Designing Interface Animation (Val Head)


WCAG
Web Content Accessibility Guidelines – If you haven’t looked at these in a while go back and check them out.

We’re going to discuss a few guidelines:

  1. Pause, Stop, Hide. If you have anything that is moving automatically you must provide controls to pause, stop, or hide that thing.
    1. Auto-advancing carousels
    2. Autoplaying videos
    3. Animated background videos or animations
  2. Three flashes or below threshold. This stems from broadcast days where they realized if they flash the screen a bunch of times, people can have seizures, that’s really bad. This guideline is that don’t flash anything but if you have to, there are guidelines on how many times you can flash and also the placement and size constraint of where you can flash. Flashing the color red is much more serious than other colors and has its own guideline.
    1. An example given was a commercial that appeared in an article with severe flashing and changing of colors that was a really cool
    2. Some people put a front-door on this stuff saying ‘are you sure you want to play this because there’s flashing lights are you cool with that?’ But taking this appear
  3. Animation from interactions. This is regarding stuff that users have to trigger in a way (the first two guidelines we discussed were about automatic stuff that you can’t really trigger/control). Allow animation to be disabled unless it’s
    1. Motion animation does not include changes of color, blurring, or opacity. All animation is motion but not all motion is animation (you can change a property without it moving).

How do we meet this criteria?

  1. Avoid using unnecessary animation
  2. Provide a control for users to turn off non-essential animations from user interaction
  3. Take advantage of the reduce motion feature in the user-agent or operating system

Why did we get here?
Over the last few years we’ve come to realize that there’s a significant group of our audience that can be made physically sick by motion on the screen. This can be related to a balance disorder, or other reasons.

Your Interactive Makes Me Sick – article online
Accessibility for Vestibular Disorders: How My Temporary Disability Changed My Perspective – A List Apart Article

Vestibular Disorders defined:
Any disease, damage, or injury to the vestibular system, permanent or temporary, that affects our balance and controlling eye movement (paraphrase).

Also usually people don’t self-define having a vestibular disorder, they usually just say they’re motion sensitive or get motion sick.

So why does motion on the screen cause issues for these people? Motion on the screen creates a mismatch between what their brain knows (I’m sitting still), and what you’re seeing. Some people’s brains can’t handle one thing moving (screen motion) and another thing not (their body).

None of the people she’s talked to with these disorders say ‘don’t let anything move ever’, they just ask for a way to participate in it without it making her sick.

Motion that is potentially triggering:

  • Scaling and zooming – general this means scaling/zooming to a great extent like when you go into an app on your iPhone and the icon is small and then it gets thrown at you and fills the whole screen in a fraction of a second.
  • Spinning and vortex effects – ex: Viljami S. Design website, Lunar Popups
  • Multi-speed or multi-directional movement – ex: everest website – when you scroll down some elements move upwards and some background elements move the opposite direction. Multi-speed refers to parallax. Parallax pretty much universally is a trigger for people with motion sensitivity. This isn’t to say that parallax is always bad, it’s just that it’s pretty much always going to be a trigger for some people, so if we’re going to use it it would be nice if we could give them way to opt out of that so they could still get to the content?
    • Helpful parallax article: ungroup.com/articles/parallax-usability lists what parallax is good for and then what it lacks / what it’s not good for.
  • Constant animation near text – so something like a pull-quote in an article that has a cool looping interaction of coins dropping out of letters but it loops endlessly because they don’t know when people will get to that part of the article.
  • Large movements – relative to the screen size itself. Big page transitions, opening an app, anything that’s moving more than half of the stuff on the screen at once. It also may be fine on a big screen but not ok on a small screen because of proportion against screen size.

Responsive design for motion – article Val wrote a while back for ALA
What’s not listed in the article: animated color changes, opacity fades, small movements… these are the most common things you’ll do for your baseline UI animations. These things are typically not triggering.

Prefers-reduced-motion query: this is a tool we have to help us design intelligently around these things. This is pretty new. Browser support is pretty good, Safari, Firefox, Chrome support it. Coming soon for Edge and Android.
A reduce motion setting was added to iOS in 2013 and then later i 2015 this was added to MacOS. Go into Display settings on your computer and check off ‘reduce motion’ box.

How do we use it?
CSS:

@media (prefers-reduced-motion: reduce) {
/ * alternative behavior like stop animation and provide alternative styling */
}

in JS:

let motionQuery = MatchMedia(‘(prefers-reduced-motin)’);

…..

prefers-reduce-motion can have 2 values: no-preference (false) or reduce (true)

This doesn’t give us a lot of options because the only value we can really rely on is reduce, otherwise we don’t know if they’re ok with animation or they just haven’t found the ‘reduce motion’ checkbox.

Browsers cannot do this for us automatically in any way that won’t break our stuff. It’s really hard to turn off motion if you don’t understand the context in which is appears in. It’s more nuanced than just turning motion off and on which is why browsers don’t do it.

WCAG recommends we respect reduced motion.
Reduce is not the same as remove. Remove can often mean ‘broken’. Reducing is the more nuanced and better way of respecting reduced motion.

But why can’t you just turn everything off?
Setting animation and transitions to none for users who have prefers-reduced-motion set to reduce doesn’t solve the issue. It’s a bulldozer effect. It’s not good. There are many things it COULD break but one thing it definitely will. If you have content that is offscreen and you use animation or transitions to get that content on screen, if you turn off animation and transitions that content will just never arrive on screen and the reduced-motion person will never see it.

This image requires alt text, but the alt text is currently blank. Either add alt text or mark the image as decorative.

An idea instead:

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

This is a LITTLE better because it won’t prevent your content from going on screen, but it can still cause issues. It won’t leave content hanging but it assumes the end-state is the most important

This only works in CSS, not in JS, so if you have any
If you have anything like video or animated gifs it doesn’t help with that either.

Find animations that are potentially triggering and dealing with them individually is better.

Take a thing that’s animation (ex: something you are telling to move up), then you detect motion and say hey, instead f moving, just fade yourself).

As an example for a crazy multi-directional and multi-speed header animation, instead of even changing or removing a translation and motion, just adjust the property that is transitioning from position to opacity so the images fade in versus flying in!!

We also animate to your scroll position pretty commonly, but if you scroll really far that’s a lot of motion! But in this case we’ve enhanced the way the browser does the thing, but we could easily just fall back to what the browser already did. Which is most likely just jumping (not scrolling) down to an anchor point. This is done with js.

When she was writing this talk she wondered if she was asking people to do like 10000 more hours of work, so she did research in the Alexa Top 10 websites and followed typical user paths to see the amount of modifications that would need to be made and she was surprised at the very small amount of modifications that needed to be made for motion inclusivity.

The number of things you need to reduce is probably a lot less than you think, it may only be 4 to 5 things you need to reduce.

Videos & Animated Gifs

She also discovered that most of the triggering motion she noticed on these sites were videos and animated gifs! We can handle these with reduced motion queries as well!

Idea: reduce motion with the picture element! Replace the gif with this non-moving gif!

Some sites use 3js or canvas and that leads to animation that is more ‘all or nothing’ in terms of inclusivity, so in these cases you might want to consider creating a custom toggle.

codepen.io/marcysutton/pen/yqVVeY?editors=0010
In this pen Marcy asked ‘has this person set reduced motion? if so turn off animation’ then she also says ‘if someone clicks the button saying turn off animation, turn it off’ but also she saves that preference in local storage so if that person comes back 2 weeks later the animation stays off. Woot!!

This is the kind of thing that is easier if you do it at the beginning of a project.

Twitter even has a reduce motion ‘toggle’ in the form of a checkbox.

css-tricks.com/reduced-motion-picture-technique-take-two
Good article and example of using the picture technique to reduce motion plus some interesting conversation going on in the comments.

You can be creative with motion while still being inclusive. Keep an eye out for triggering motion and dealing with each one individually, using a toggle, we can expand the amount of users that can participate in our projects which is probably a good thing for anyone.

@vlh
https://uianimationnewsletter.com/

How To Choose A WordPress Theme For Your Website

In this guide you'll learn four tips to make choosing a WordPress theme a bit easier. This is a 5 page guide with an approximately 4 minute read.

How To Pick A WordPress Theme For Your Website • Download the Guide

How-to-choose-a-wordpress-theme-thumbnail-sm 5 page guide • 4 minute read

In this guide you'll learn four tips to make choosing a WordPress theme a bit easier.

Powered by ConvertKit

Success! Check your email for the guide.

Where To Host Your WordPress Website and Why It Matters

In this guide we discuss what makes 'good hosting' including security, speed, and support. We tell you who we use and why, and give you a coupon! YAY COUPONS! This is a 45 page guide with an approximately 3 minute read.

How To Pick A WordPress Theme For Your Website • Download the Guide

How-to-choose-a-wordpress-theme-thumbnail-sm 5 page guide • 4 minute read

In this guide you'll learn four tips to make choosing a WordPress theme a bit easier.

Powered by ConvertKit

Success! Check your email for the guide.

8 WordPress Plugins That Can Take Your Website To The Next Level

For our business clients, we install some specialized WordPress plugins. Get our list of the 8 next level plugins we love and the use case for each. 

How To Pick A WordPress Theme For Your Website • Download the Guide

How-to-choose-a-wordpress-theme-thumbnail-sm

5 page guide • 4 minute read

In this guide you'll learn four tips to make choosing a WordPress theme a bit easier.

Powered by ConvertKit

Success! Check your email for the guide.