[:en]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).

Figure 1. When a user magnifies their screen, most of the viewport can go out of view.

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.

Figure 2. Example of an animated loading bar, which is common to convey system processing status.

• 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.

Figure 3. MailChimp uses a delightful piece of animation featuring their chimp mascot, but only when the system is processing or you reach a 404 page.

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.[:zh]动作能够使交互更易于理解，因此如果运用得当，它可以大大增强设计，但它也有可能对可用性产生负面影响。简单的准则可以帮助您提高用户体验动作编排的包容性。例如，将动作动画放在焦点上，不要让它填满整个屏幕。用户操作应该触发动作 – 用户应该能够随心所欲地减少动作量（并且他们的设备或浏览器有这个设置）。

文章全文为英文版[:KO]상호작용을 더 쉽게 이해할 수 있게 함으로써 동작이 제대로 수행되면 디자인을 크게 강화시킬 수 있지만, 접근성에 부정적인 영향을 줄 수도 있습니다. UX 연출을 더 포괄적인 것으로 만드는 데 도움이 되는 간단한 가이드라인이 있습니다. 예를 들어, 모션 애니메이션을 포커스 지점에 놓고 전체 화면을 가득 채우게 하지 마십시오. 사용자의 동작이 모션을 작동시켜야 하며 사용자는 원할 때 모션의 양을 줄일 수 있어야 합니다(그리고 장치 또는 브라우저에 이에 대한 설정이 있어야 합니다).

전체 기사는 영어로만 제공됩니다.[:pt]Embora o movimento possa reforçar grandemente o design quando feito corretamente, facilitando a compreensão das interações, ele também pode ter um impacto negativo na acessibilidade. Orientações simples podem ajudar a tornar a coreografia da experiência do usuário mais inclusiva. Por exemplo, coloque a animação do movimento em foco e não deixe que ela preencha toda a tela. As ações do usuário devem acionar o movimento, e os usuários devem ser capazes de reduzir a quantidade de movimento conforme desejarem (e o dispositivo ou navegador deles tem uma configuração para isso).

O artigo completo está disponível somente em inglês.[:ja]モーションは適切に用いられれば、デザインの効果を著しく高めることができるが、インタラクションをわかりやすくすることは、アクセシビリティにマイナスの影響を与えることにもなりかねない。UXコレオグラフィーをより全体最適にするためには、例えばモーションアニメーションは焦点となる位置に配し、画面いっぱいに表示することは避けるといった、シンプルなガイドラインが役立つ。モーションはユーザーアクションによって引き起こされ、ユーザーは自分の意思で（そしてデバイスやブラウザの設定により）モーションの量を削減できなければならない。

原文は英語だけになります[:es]Si bien el movimiento puede fortalecer en gran medida el diseño cuando se hace de forma adecuada, facilitar la comprensión de las interacciones puede tener una repercusión negativa en la accesibilidad. Algunas simples pautas pueden ayudarlo a hacer más inclusiva la coreografía de la experiencia de usuario. Por ejemplo, coloque la animación de movimiento en el punto de enfoque y no deje que llene toda la pantalla. Las acciones del usuario activarán el movimiento, y los usuarios podrán disminuir la cantidad de movimiento cuando lo deseen (y cuando sus dispositivos o navegadores estén configurados para esto).

La versión completa de este artículo está sólo disponible en inglés[:]

Topics: Usability, Cognitive Disability, Accessibility
Published in: September, 2017 in [:en]UX at Scale[:zh]规模化用户体验[:KO]크기에 따른 UX[:pt]Experiência do Usuário em Escala[:ja]UXの拡充[:es]Experiencia de Usuario a Escala[:]