What You Need to Know About the New Salesforce Kinetics System

We developed an end-to-end motion language for Salesforce and its products.

Kinetics in Motion Series

A frame-by-frame breakdown of an animation of splashing water.

Imagine floating on a paddle board in the middle of a calm river. If you’ve never paddle boarded before, how would you know what to do next to reach your destination? What if the current picks up and gently propels you forward? The board beneath you is solid, balanced, and reassuring. You then, by instinct, figure out how to steer the paddle board toward your destination.

When a user interface incorporates motion design to capture your attention and guide you through a webpage, it can feel like floating down a calm river. The choreography of the elements on a page work together to surface key affordances, or cues, at the right time to help you reach your destination and achieve your task. This is the next evolution of interaction that our design systems team is bringing to the Salesforce product experience. We call it the Salesforce Kinetics System.

The Salesforce Kinetics personality has four key attributes: nimble, sensible, considerate, and charismatic. The guidelines can be found on the Lightning Design site.

What is the Salesforce Kinetics System?

The Salesforce Kinetics System is an end-to-end motion design identity for Salesforce and its products. It provides a foundational set of artifacts for designers and developers. It includes principles, personality definitions, best practices, styling hooks, learning modules, and motion tools. The intention is to enable the evolution and scaling of Salesforce kinetic patterns across our products, with design system components that are pre-baked with motion right out-of-the-box.

This is important because we’re always looking for ways to improve the UI experience for our customers. We use research to pinpoint gaps in our UI and identify opportunities for improving efficiency. Making useful features more discoverable and increasing the amount of user guidance in pages, for example, provide a more productive experience for our customers. We also want to decrease the volume of information we expose at a given moment to reduce the cognitive load for our users.

Motion design may be the answer to these types of UI needs. When used well, UI motion can:

• Reduce cognitive load by surfacing appropriate information at the right time.
• Quickly drive user attention to changes that occur on a page.
• Logically guide users to the next action using clever choreography between page elements.
• Provide clarity by providing timely user feedback.
• Improve the perceived latency, or response time, of a page.
• Increase the discoverability of essential features.

Adding a “contextual toast” signals success to a user and creates moments of delight.

Through user studies, we learned that our end users expect sophistication in their everyday digital experiences. When a page doesn’t meet those standards, the experience causes stress and anxiety that end users just don’t want to deal with.

Testing the Motion UI

To validate the impact of a motion UI for Salesforce, we wanted to test the effectiveness of our kinetic UI against some of our key goals: providing guidance, mitigating change blindness, providing timely user feedback, and promoting discoverability.

We performed unmoderated A/B tests across three task flows with two groups of participants for over two weeks. One group went through user tasks in a prototype of Salesforce with kinetic UI. The other went through the tasks on Salesforce without kinetic UI.

During our observations, we saw a significant increase in productivity. We also noticed a clear benefit in the areas of guidance, timely user feedback, and promotion of discoverability. Our results showed that the kinetic UI group of participants were able to complete their tasks 11.5 times faster than the non-kinetic UI group.

Even in an environment with complex architecture, kinetics improved the workflow for users.

Salesforce Kinetics Artifacts

We needed our motion design system to inform a powerful visual language that ties closely with our brand identity. Motion would have to emphasize the relationship between objects across experiences in Salesforce, which meant it would need to be distinct and strong. The kinetic principles and the kinetic personality were the first two artifacts we developed that grounded the purpose and emotions behind a motion system.

Salesforce Kinetic Principles:

• Motion is Functional — integral to providing clarity, preventing change blindness, perceived speed, and promoting discoverability.

Example of motion interaction in a Dueling Picklist Component that draws user attention to changes when a list item is moved to another list.

• Motion is Structural — Motion helps users know where they are, orienting them with a consistent spatial model, and creating kinetic continuity across pages and components.

A side panel animates in from the right side, with the content cascading from top to bottom. When an item is clicked, the content fades in and out in an implied direction to spatially situate the user within the flow.

• Motion is Expressive — Motion delights users with surprising details that turn mundane moments into something special and memorable. These details remind users that experiences are crafted by people, not machines.

A notification bell in the global header chimes with a rippling red dot to emphasize urgency.

Where the principles provide the foundational role of motion in Salesforce, the kinetics personality informs what motion feels like in the product experience. If kinetics were a person, what would it be like to have this person contribute to a conversation? We conducted an exploratory workshop with designers, developers, product managers, directors, and leadership to shape the kinetic personality.

Through the lens of Salesforce values and our design principles, we created a cluster of words that we associate with motion. Using an attribute sorting exercise, we came up with a list of adjectives that describe the motion personality in different ways. The adjectives further helped us group similar emotions together to come up with a final set of four key personality attributes: nimble, sensible, considerate, and charismatic.

Salesforce Kinetic Personality Attributes:

Lists of words associated with Kinetic personality attributes.

• Nimble (Customer Success + Efficiency): Kinetics responds with swiftness and grace, moving fluidly and effortlessly to get stuff done.

When a new item is created, a contextual success toast reveals where the new item is added while retaining the order of tasks to be done.

• Sensible (Trust + Consistency): Kinetics moves modestly and predictably, making users feel confident about their next steps.

Various icons enlarge and a circular shape highlights the icon as the cursor moves over them.

• Considerate (Equality + Clarity): Kinetics welcomes people of all visual abilities, pushing for efficiency to improve the quality of the experience where needed, and bowing out when users would prefer to skip motion altogether. We strive to make our UI motion accessible and useful for our users of all abilities.

A carousel starts and stops moving as a user clicks a play/pause button.

• Charismatic (Innovation + Beauty): Kinetics knows when to turn up the charm — relishing in the fun moments, and turning the mundane into something memorable.

As a user clicks to mark list items complete, the completed items move to to the bottom of the list. When all the items are completed a celebratory animation plays to depict success.

The Salesforce Kinetics personality and principles became the beacon for how we create and scale our motion from the micro components (e.g., UI button) to more complex experiences (e.g., when a user has to take multiple actions on a series of pages). We began exploring motion across our design system components by focusing on their size, spatial quality, the role they perform within the UI, and the relationship they have with each other.

Creating Kinetic Patterns

Component Types: We performed studies on a set of key components that are: simple, larger with complex structures, and components that transition on the page. This supported our aim to produce scalable, identifiable, and repeatable patterns.

A example of a simple component: A Button Icon in Lightning Design System

An Activity Timeline in Lightning Design System in an example of a complex component.

Spatial Level: Our patterns also were defined by the spatial hierarchy of components and the levels in which they existed in relation to each other.

Spatial hierarchy within complex pages consisting of small, large and transitional components.

Emphasis: We defined the quality of speed and flourish for certain components based on their intended use. This played a major role in how we handled emphasis throughout our experiences.

An error toast transitions with a slight bounce to imply a level of urgency.

A progress indicator emits a rippling effect to show progress of steps and opts for a softer fill effect while stepping back.

Success is depicted with a bounce when a progress ring completes its action.

Component Library: All our motion prototypes were created in an instance of Salesforce’s Storybook, an open-source tool for building UI components and pages in isolation. This allows us to validate whether our design decisions translate well into code, and provides us with a space to manipulate duration and easing values within the tool. In the future, we hope to build an internally usable kinetic playground that enables our designers to sequence transitions using kinetic styling hooks, test interactions, and share their work with stakeholders and engineering teams

Salesforce library of kinetic patterns in prototype.

All our prototyped patterns are also currently available for reference on the Lightning Design System website.

Accessibility and Motion

Kinetics aims to be inclusive and work for a range of abilities. It can help orient users within a UI, guide them to call to actions, and create relationships/hierarchy between elements on a page. While we emphasize accessibility in defining the kinetics personality, we know that animation is a double-edged sword. If designed improperly, motion can cause headaches, nausea, dizziness, or vertigo for users with vestibular disorders. This is why we have documented motion Do’s and Don’ts within our guidelines, which are based on WCAG and UI motion best practices. We also provide browser-level control so users can opt to turn off animations.

Currently, we’re exploring the possibility of a browser toggle that allows users to control the amount of animation — from none to full animation — that they experience. In the following example, the Classic button icon’s hover and click feedback consists of a border swirl and ripple effect, offering double enforcement. The Utilitarian button offers a border swirl effect only. The Reduced button has no animation.

A slow motion render of button icons showing the differences between a the default Classic (full motion), Utilitarian (minimal kinetics), and Reduced (no kinetics).

More to Come

The Salesforce Kinetics System is just getting started. While it’s too early to know the full impact of the Kinetics System, our preliminary research suggests that including motion UI in our products can benefit many users. We have several resources that can help you skill-up on kinetics, including:

1. Our Salesforce Kinetics Systems module is now available on Trailhead. Learn basics about choreographing motion UI.
2. Our Motion Pattern Creation module provides a detailed look into how teams might create custom motion UI for their products.
3. Here is our case study on how we scaled Kinetics patterns from design systems to the Salesforce global navigation.
4. The Kinetics Principles and Guidelines documentation and Pattern Prototype Library is now available on the Lightning Design System site.

We are coming up with more information on the Salesforce Kinetics System, so please stay tuned for future updates and posts!

Acknowledgements: This massive initiative would not be possible without the help of our stakeholders across our products. A big shout out to everyone who has contributed in our process. Also, I want to call out some key players who have played crucial roles in defining the Salesforce Kinetics System: DouG Molidor, the motion engineer who can work magic with the system; James Brush our go-to consultant and motion luminary; Angie Elko and Joel Sass our enablers; the team of motion designers at Punchcut, whose partnership accelerated our process; Donielle Berg and Kim Flournoy, our knowledgeable accessibility partners; Abigail Sigler our dynamic detail-oriented mobile partner; and the team of design systems and product designers and developers whose involvement helps us scale our efforts every step of the way. A big thank you to the Relationship Design team — Nic Dimond, Kelly Thomas for the amazing Kinetics System Modules on Trailhead, as well as our editorial rockstar Hsiao-Ching Chou

More posts from the Design Systems team:

• How to Get Product Designers to Love Using Your Design System — Nancy Niu
• Creating Color Contrast Guidelines to Meet WCAG 2.1 and Beyond — kellen mannion

Salesforce Design is dedicated to elevating design and advocating for its power to create trusted relationships with users, customers, partners, and the community. We share knowledge and best practices that build social and business value. We call this next evolution of design Relationship Design. Join our Design Trailblazers community, become a certified UX designer, certified strategy designer, or work with us!