A new Lightning Design System feature, Kinetics, has recently been launched by Salesforce. This design system will help Salesforce developers harness the benefits of motion and animation so that users can interact with their systems more effectively. The purpose of this guide is to explain what Salesforce Kinetics is, and what benefits you can expect from it.
What Is Salesforce Kinetics?
Designers and developers use Kinetics, the study of motion, to create animation experiences within user interfaces (UI). Many of the devices and apps you use regularly display animation examples. Think about how you receive a visual cue when you click a button on a web page, such as it enlarging or changing color, or when you receive a critical message.
Developers and designers follow established guidelines and best practices to ensure these visual experiences are cohesive and consistent. For the purpose of creating recognizable motion designs, the Salesforce Kinetics System outlines guidelines, patterns, best practices, and tools.
Salesforce wants to ensure the visual experience delivered through a UI is cohesive and consistent by introducing motion design guidelines to the existing Lightning Design System.
Motion Design Improves the Salesforce UX
- The Blindness of Change
Animation can help overcome change blindness, which many users experience. It is much more likely that a short blink of a red dot will draw the user’s attention to a notification bell than a static one, since our visual systems are so tuned to motion.
- Latency
Communication of state changes is crucial for a user to understand when the system is ready to accept input and to improve perceived latency.
A “loading” animated placeholder may be a solution to the problem.
- Parallel Sequencing
Some business processes require complex user flows, challenge users’ cognitive resources, or take up too much screen real estate.
Although animation alone is not a substitute for visual navigation, it can be used as a supplemental cue to make navigation more intuitive. It is possible to show relationships between elements by using parallel sequencing.
A user works through long content that can be broken up into sections with a visual progress indicator. User progress through the modal content is visually synchronized with the progress indicator on the left as the user selects the next content.
- Guidance
Finally, animations can make UI elements easier to understand for users.
An appropriate action or suggestion is indicated by the direction of the motion. When scrolling down a list view, continuous motion indicates there is more to see, if they choose to look.
What is the Effectiveness of Kinetics?
An A/B test with interactive prototyped purchase journeys, conducted platform-agnostic, published astonishing results. A couple of animations were added to the user flow to enhance the user experience, and this reduced the amount of errors by more than two thirds. It is possible for your contact center to receive 200 support tickets a day due to customers getting lost in the purchase process. Typically, your agents respond to one customer query within four minutes, which means they need over 13 hours to complete all of them.
