This article is a continuation of “Motion Design: An Intro to UX Choreography”
Since I published my last UXPA Magazine article on motion design about a year ago, I’ve had many conversations about how to make motion design accessible. Accessibility is not only a hot topic in my office, but also a design requirement that we discuss nearly every day. That’s because I work for Alaska Airlines, and since 2016, all US-based airlines are required to make their websites accessible.
In the first article, I made the case that motion design is not simply decoration, but carries huge user experience implications because it directs spacial understanding, hierarchy, communication, and emotional impact. Motion design is used in macro-interaction models, transitions, micro-interactions, branding elements, and more.
While motion can greatly strengthen design when done properly, it can have a huge impact on accessibility. Accessibility is a unique and rewarding challenge that ultimately improves the overall design of a system. It’s an important facet of inclusive design, and ensures that all people, regardless of ability level or technology, can use your system with as little friction as possible. Although it can seem like a hindrance at times, designing motion for accessibility will ultimately push you to be more thoughtful and thorough.
Accessibility Factors to Consider
People experience the internet in many ways. For a majority of people, they see the visual design on a screen and use peripherals or touchscreens to take action on a system. But for people who are blind or have vision challenges, need assistive technology to interact with a system, have vestibular disorders, or have spacial comprehension challenges, interacting with a system that most people find easy can be challenging or impossible. Motion design adds a layer of complexity to that, so it’s important to understand how motion design can negatively impact some users in order to design with those challenges in mind.
The most common accessibility challenges in motion design are listed below, but keep in mind that there may be other considerations depending on your specific use cases and industry.
- Screen reader performance. Blind or low vision users often use assistive technology, such as screen readers, to get information online. How well the screen reader works depends on how well the code on a page is marked up. Motion and other micro-interactions can trip up screen readers, cause information to be read out of order, not to be read at all, or cause delays in system processing time. Specifically, screen readers can miss events like partial page loads, temporary animated overlays (like toasts or banners), and animated state changes. When that happens, users can miss critical information—a situation that can be harmful, or at least extremely frustrating.
- Vestibular disorders. Vestibular disorders affect the parts of the inner ear and brain that process the sensory information involved with controlling balance and eye movements (source: vestibular.org). People with vestibular disorders may experience motion design in an interface to be very unpleasant, nauseating, and/or disorienting to various degrees.
- Object association. Motion design that is either too drastic, fast, or both can cause confusion and add to a user’s cognitive load because they have to work to figure out what just happened.
- Screen zooming. Users who have low vision but are still sighted may sometimes use screen magnification to read text or look at images more clearly. Depending how much the screen is zoomed, or how responsive the site is, will cause more or less of a portion of the screen to be out of view. If animated events like a notification or toast come in and appear off screen, the user may not see it. Additionally, if an animation event occurs in a zoomed portion of the screen, the animation may take up most of the viewing area and be visually overwhelming to the user (see Figure 1).
The most important thing to remember is that everybody experiences the internet differently. Just because something may be routine or easy for you doesn’t mean it is routine or easy for everybody. By understanding some of the big challenges people face with everyday web design, you can start to be more sympathetic and thoughtful in your design choices.
UX Choreography Key Functions
When planning motion design for user experience, I like to think of it as “UX choreography” so that I remember its role in UX design. UX choreography is different than animated videos or other artistic expression. Motion design in an interface is meant to reinforce hierarchy, strengthen core communication, and reduce cognitive load for the user. The following three key functions should be considered for every motion design project and be well understood.
- Spacial motion design helps orient a user. Spacial motion design applies our basic understanding of physical space and translates it into a digital system to help the user remember where they are, how they move forward, and how to get back to where they came from. For example, if page transitions always swipe from right to left as the user advances, their mental model would likely anticipate that going back would make the screen swipe the opposite direction, left to right. When done well, users don’t have to think about spacial motion design. But if the motion is counter-intuitive, it can be jolting.
- Functional motion design reinforces hierarchy, attention, hints at micro-interaction possibilities, provides system feedback, and more. It includes mostly micro-interactions, but also includes the motion-based relationships between sections, components, and drawers—like when a user clicks a filter control and the rest of the page rearranges as a result. For example, if a user clicks on a submit button and a loading animation signals that the system is processing their request, a motion like a loading bar or spinner wheel will help the user to understand what is going on and how long it might take.
- Delightful motion design is the little bit of polish, branding, and personality that is layered into the interface to give the user a sense of feeling or excitement about using a system. Delightful motion design should be used very sparingly and strategically, but when it is done well it can make the experience memorable and special. Some brands like to hide “Easter eggs” in their delightful motion design opportunities, or may feature their mascot, logo, or other brand features. Delightful motion design is best used when the user isn’t being asked to process a lot of information, so loading screens, 404 pages, or other moments of cognitive pause are great opportunities for something special and delightful.
Accessible Motion Design Recommendations
In addition to the three key UX choreography functions, there are many ways you can adjust motion design to make it accessible. These recommendations are a technology-agnostic guide of best practices that should make up the foundation of your motion accessibility strategy.
- Parallax is awful. Parallax is an optical illusion to give a sense of depth. It is rarely done well and even more rarely accessible. Avoid it unless absolutely necessary, and use it sparingly if you use it at all. Parallax can cause nausea or disorientation. In fact, when Apple’s iOS 7 first came out featuring parallax backgrounds, there was an outpouring of requests to be able to limit motion in the interface (which Apple quickly released).
- Keep motion design to less than 1/3 of a viewport. Motion design that is large or fills the screen can disorient and nauseate people. Keep any animations small and simple, and make sure that they scale with any responsive adjustments for different size screens.
- Let users trigger motion. Motion design is best when it is subtle and happens after a user has taken an action. Motion design that auto-plays or is unexpected can be unpleasant for many people.
- Keep animation at the point of focus. Animation should be used to direct a user’s attention to the most important thing on the screen that they may need to interact with. If the primary function on a screen is static and a lot of unrelated motion is happening elsewhere, users can be distracted and confused.
- Offer settings to reduce motion. If you’re designing for a native app or are supporting certain browsers that allow for reduced motion settings (Safari is releasing better reduce motion tools within the next year, and other browsers are likely to follow), consider designing an easy way for your users to reduce or turn off your motion design. Just be sure that if the user disables motion that they can still understand and use the interface without it.
- Use motion design to make the interaction easier to understand. Motion design can either increase or decrease cognitive load, depending on how well you design it. Motion design that distracts or overwhelms a user will add to it, whereas subtle motion design that is used to communicate system processing, feedback, state changes, or next steps can have a positive effect. It’s a great idea to usability test your interface with users with motion-related disabilities to get well-rounded feedback.
- Test everything with a screen reader. Sometimes it’s hard to predict how a screen reader will handle micro-interactions (like in-field form validation) and partial page loads. Testing a system with a screen reader (and with screen reader users) can help you catch issues that may arise. Since screen reader performance is only as good as how the page is coded, work closely with your developers for this step and it will make it much faster and more accurate.
Motion design is a great example of the idea that designing for accessibility will make the designs better for everyone. At first, meeting accessibility standards may seem like an unwanted constraint to your design ideas, but incorporating good accessibility practices into your motion design workflow can help you add polish and maturity to the overall system in a way that is useful for all users.
