Create Accessible Experiences
Learning Objectives
After completing this unit, you’ll be able to:
- Explain the importance of accessibility in Kinetics.
- Describe the three categories of accessible Kinetics.
- Identify best practices for designing accessible experiences.
Accessible and Inclusive
The Salesforce Kinetics System is an inclusive system and perspective that works for a range of abilities and can improve the experience for users with cognitive disabilities. It helps orient users within a user interface (UI), guide them to a call to action, and establishes relationships/hierarchy by unifying page elements.
Through its commitment to accessibility, the Salesforce Kinetics System also enhances the trust and dependability between a user and UI as a motion design language intentionally designed to support users of all visual ranges. However, if designers and developers don't prioritize the functionality/utility value of the design, the resulting motion can cause headaches, nausea, dizziness, vertigo, or even seizures for users with vestibular disorders.
Three Categories
The Salesforce Kinetics System offers three categories of motion to define accessible experiences: Classic, Utilitarian, and Reduced Animation.
Classic
Classic motion is an out-of-the-box experience that displays the full spectrum of motion, a combination of both functional and decorative animations in a component or an experience. For example, when a user interacts with an icon button within an expandable list, its background scales and changes color to blue on a hover. When the user clicks the icon button, a ripple animation plays in the border and background of the button. And an expandable field opens underneath the first icon in response to the user's click.
An example of classic motion within the user interface.
Utilitarian
Utilitarian motion offers a more restrained experience, displaying only the most crucial feedback and guidance for users. Utilitarian motion leaves out any movement users may construe as decorative or secondary. For example, when a user interacts with a button icon within an expandable list, its background scales and changes to blue on a hover. With a click, an expandable field opens underneath the related item and its background scales and changes color to blue.
An example of utilitarian motion within the user interface.
Reduced Animation
Reduced animation offers an experience of no motion if the user chooses to see only a static UI. For example, as a user interacts with a button icon, its background changes instantly to blue on a hover. On a click, a new field appears underneath the related item. Users can choose to turn off animations on the browser level. This is a great option for users who suffer from vestibular disorders or those who are generally affected by seeing animations on screen.
An example of reduced animation within the user interface.
Functional and Safe
In addition to the categories above, Salesforce Kinetics System guidelines also follow specific Web Content Accessibility Guidelines (WCAG) to reduce the chance of seizures in users with vestibular disorders and accommodate users with a system-level preference to turn off all animation. This includes outlining best practices for motion design, including:
- Flashing or blinking animation
- Moving, blinking, or scrolling animation that plays automatically
- Auto-updating and auto-playing information, presented in parallel with other content
- Format for animation
- Animation to inform the user
- Parallax animation
Follow the best practices outlined below to ensure your motion design experiences are both functional and safe for all users.
Best Practices
Flashing or Blinking Animation
- Do: Create clear, simple, and purposeful animations that minimize interruptions to the user flow, such as a simple animation of a red dot on an alert icon.
- Avoid: Any flashing, blinking, or animation cycling faster than three times per second.
Moving, Blinking, or Scrolling Animation That Plays Automatically
- Do: Include a mechanism for users to pause, stop, or hide if it lasts more than five seconds, and you present in parallel with other content, unless it's part of an activity where it’s essential.
- Avoid: Playing the animation for longer than five seconds, or on a continuous loop, without giving the user any way to pause or stop it.
Auto-Updating and Auto-playing Information, Presented in Parallel with Other Content
- Do: Ensure there is a mechanism for the user to pause, stop, hide, or control the frequency of the update, unless the auto-updating is part of an activity where it is essential.
- Avoid: Adding nonessential, auto-updating information without designing a static version and alternate text to support the user’s reduced motion preferences.
Format for Animation
- Do: Use video clips the user can press to start and pause for noninteractive animations to provide supplementary information.
- Avoid: Gifs that are on a constant loop.
Animation to Inform the User
- Do: Include additional static elements, such as text and images, to convey the same information as the animation.
- Avoid: Using the animation alone.
Parallax Animation
- Do: Design as subtle punctuation to the scrolling movement at the end of, or the beginning, of a transition and include the ability to turn off nonessential animations as a sitewide setting.
- Avoid: Relying on parallax animation alone to convey interaction feedback or essential information.
When you follow Salesforce Kinetics System guidelines and best practices, you set yourself and your team up for success in designing functional motion that delights users and is accessible for all.