Gone are the days of frustrated users publicly sharing their feelings about the state of Salesforce UX. In adhering to high design principles, Salesforce ensures their standards are upheld by their partners, as well as themselves. In the last couple of years, they have invested in introducing this design-forward mindset to the whole ecosystem. Plenty of new design-focused content has flooded Trailhead, covering everything from value-driven strategy design, user research methods, effective prototyping, and accessibility best practices, to the Lightning Design System.
Salesforce has recently launched a new addition to the Lightning Design System, called Kinetics. It is a design system which helps those building out Salesforce systems to best harness the benefits of motion and animation; to add clarity to users’ functional interactions. In this guide, we will cover exactly what Salesforce Kinetics is, and the benefits you can expect from using it.
What Is Salesforce Kinetics?
Salesforce Kinetics provides a set of design standards for “motion design”. But what is “motion design”? Great question.
Imagine a young bird migrating to its breeding grounds for the first time. Without any help from more experienced birds, it is able to find the fastest route to the right destination, even when it is 12,000 km away. It is guided by the wind and other celestial clues. It can also “see and feel” a magnetic field generated by Earth’s molten core and use it to determine their position and direction. This is a motion design created by nature.
The motion design that can be created for Salesforce can be found in the Lightning Design System – this makes up an integral part of the study material for the UX Designer certification.
Following the set direction of modules focused on very specific design elements, Salesforce Kinetics introduces the concept of animation experiences within a user interface. In simple terms, it recommends, for example, how a button should respond to a particular user action to create clarity for the results of their interaction. It may typically consist of the choreography of specific elements that surface key affordances or cues in the right time to allow users to orient more smoothly and understand faster – by changing color or enlarging for example.
The objective of introducing such guidelines to the existing Lightning Design System is clear; Salesforce wants to make sure the delivered visual experience is cohesive and consistent across a UI by using recognizable motion design language.
Motion Design Improves the Salesforce UX
Nielsen Norman Group, one of the world’s most prominent UX authorities, distinguishes between key use cases where animation can help to form unobtrusive, yet impactful experiences through feedback, state-changes, navigation metaphors, and enhancing signifiers.
Change Blindness
Animated interfaces can be helpful to overcome a typical change blindness that many users suffer from. Since our visual systems are so attuned to motion, a short blink of a red dot is much more likely to bring the user’s attention to the notification bell than if it was static.
Latency
It’s extremely important to communicate state changes clearly so that a user can understand when the system is ready to accept input, as well as to improve perceived latency. One way of addressing the potential issue may be for example a “loading” animated placeholder.
Parallel Sequencing
Some business processes may require complex user flows, challenge users’ cognitive resources, or take up too much screen space. While animation alone is no substitute for visual navigation, it is a supplemental cue to make navigation more intuitive. Parallel sequencing is one example of how relationships between elements can be shown.
For example, long content can be broken into sections with a visual progress indicator as the user works their way through those sections. As the user selects the next content on the right, the progress indicator on the left visually synchronizes to show the user’s level of progress through the modal content.
Guidance
Lastly, animations can help users understand how to interact with UI elements. The direction of the motion signifies the type of acceptable actions or provides suggestions. For instance, continuous motion applied on a list view when scrolling visually indicates that there is in fact more to see, if they want to.
How Effective Can Kinetics Be?
I bet some of you may already have a question about value versus effort popping up in your mind. While not much Salesforce specific research has been done yet, one recent study shows that an animations-driven UI helped users complete their tasks 11.5 times faster compared to a static UI presented to a controlled group of users.
A platform-agnostic piece of research, which carried out A/B testing with interactive prototyped purchase journeys, published astonishing results. Tiny tweaks were made to the user experience by adding a couple of animations throughout the user flow, and it reduced the number of user errors by more than two thirds in the tested use case.
Now think about it at scale. Your contact center may receive 200 support tickets a day specifically because your customers get lost in a purchase flow. Your agents deal with one customer query within 4 minutes on average, which means they need over 13 hours in total to get through all of it. If we assume that the ideal scenario plays out and that all the reported user errors could be addressed by implementing appropriate animations, using the research data, we would be able to get down to almost 9 hours in reduction. Not too bad, right?
Summary
Obviously, we need to take any Kinetics data with a ‘pinch of salt’ as nothing is black and white, and animations should not be perceived in isolation. There are many other factors contributing to user experience, but it is fair to acknowledge that Kinetics brings a new perspective that we should not underestimate.
Salesforce is currently in the process of integrating Kinetics into the component blueprints which will make animations available in the standard interface automatically. All documented pattern prototypes are also accessible here and you can refer to them when you create motion patterns for your custom UI flows.
Resources
- Welcome to the Salesforce Lightning Design System (SLDS)
- Salesforce Kinetics System
- The Role of Animation and Motion in UX (nngroup.com)
- What You Need to Know About the New Salesforce Kinetics System
- How Tiny Animations Improve the User Experience
- Kinetics Pattern Prototypes
Comments: