Making Motion Design Accessible
We always advocate accessibility while designing at VMware. As a result, many VMware designers and engineers make continuous efforts to ensure that our product design is not only compliant but usable for all users, including those with disabilities.
Recently, motion design has become a critical area, with growing attention from the VMware design team. To contribute to an accessible and consistent experience, we are creating a motion design library enabling other designers with the flexibility to reuse any motion assets. Additionally, VMware has a mentorship program for anyone in the company who is interested in motion design. But what are we doing about motion design accessibility?
Why does VMware care about motion design accessibility?
Motion design can play a significant role in digital solutions by translating complicated domains into a story, sometimes drastically improving user experience and understanding. Motion has been integrated into VMware products throughout workflows and results visualization. However, a small subgroup of users doesn’t always benefit from that type of motion design. In fact, motion has the potential to significantly harm their user experience. For example, people with ADHD, migraines, motion sickness, or epilepsy might experience adverse physical repercussions due to inaccessible motion.
Therefore, the use of motion must be balanced. It needs to achieve its goals for the majority of users while not harming users who might have difficulty with some motion. We saw this as both a challenge and an opportunity and as a result, VMware is transforming into a modern approach to accessibility by reconciling both groups of users with a single approach.
VMware will prioritize all accessibility needs, including motion design, in our accessibility guidelines to ensure all the motion designs and interactions are compliant and usable for all users.
What do we decide to do to develop the motion guideline?
Every project starts with an idea and a great team. Motion was one of the sixteen categories of accessibility behaviors targeted by an internal project tasked with developing a consistent approach. This internal project already built the framework for these motion recommendations to be made.
First, we started to learn by looking at the wisdom of those who had traveled our path previously outside of VMware. We did this by reviewing other existing motion design guidelines and analyzing their pros and cons. Then, after understanding some of the best industry standards available, we held a brainstorming session to list all the motion behaviors we wanted to standardize and the required tasks, then assigned each to one of our 8-person core teams.
We started by identifying the types of motion design VMware uses. We identified three overarching categories: motion for interaction, motion for illustration, and physical motion. With those categories in mind, we created a decision tree to help designers decide the best form of motion for their use cases.
After deciding the type of motion, it was time to look at two key level guidelines in WCAG (Web Content Accessibility Guidelines) pertaining to motion. Following them is absolutely critical and non-negotiable.
Always provide a choice to turn off the motion
We spent time talking about the use and value of motion. Is turning off motion a contrary perspective in the context of creating motion? Absolutely not. Different users have different reactions to motion. It is better to let users decide if they would like to see motion, while providing the choice to disable it if they are uncomfortable watching moving objects on a screen.
How do we help designers make decisions when creating motion?
The different kinds of motion and dimensions within the different types of motion impact how the user will receive the motion and whether it triggers motion-related adverse responses. We identified following a series of animation dos and don’ts in combination with the motion suppression efforts to give all users the ability to optimize their experience easily.
Motion Length:
Five seconds is an attribute to differentiate the length of a motion. If it’s longer than five seconds, including looping, it will require a player with play/pause and volume control.
Motion Speed:
Animation speed is not a WCAG guideline. But it is vital to ensure the motion is appropriate to users when the motion preference is turned on.
Focal object:
Focus on moving one object at a time and then move incrementally.
Play and pause:
There are many ways to control a motion. For example:
- Hover over to see the play/pause button;
- Play/pause button is always visible;
- Controller by a browser player. Use this syntax when implementing player for HTML5:
Reduced Motion:
Always think about a reduced motion option while creating motion. That means for certain interactions, reduced motion is an alternative choice other than turning off the motion. Here is an example of parallax.
As the motion design community keeps growing, we are using better, more complex motion in our products. So, in addition to optimizing the interactions and delights, inclusion should always be on top of mind for designers.
Special thanks to Sheri Byrne-Haber, the head of accessibility and always advocates accessibility at VMware; the core team puts everything together, and the global accessibility team reviews and shares feedback for our accessibility guidelines.
Originally published at https://octo.vmware.com on December 12, 2022.
