Get to Know the Salesforce Kinetics System

Learning Objectives

After completing this unit, you’ll be able to:

Define Kinetics.
Identify key goals of the Salesforce Kinetics System.
Define design system.
Describe how the Salesforce Kinetics System helps product and platform teams establish a foundational motion language for their design system.
Identify Salesforce Kinetic System goals in the user interface (UI) design.

What Is Kinetics?

In the design world, developers and designers use their understanding of Kinetics—the study of the laws of motion—to design animation experiences within user interfaces (UI). You see animation examples on-screen on many devices and apps you regularly use. For example, think of how a button on a web page responds with a visual cue, such as enlarging or changing color, when you click it or how a critical message appears on a page when you perform an action.

Designers and developers follow established guidelines and best practices to ensure these visual experiences are cohesive and consistent across a UI. At Salesforce, we use the guidelines, patterns, best practices, and tools outlined in the Salesforce Kinetics System to create a recognizable motion design language.

Salesforce Kinetics System

With the Salesforce Kinetics System, designers and developers create a strong and consistent visual identity to achieve the key goals below.

Goal	What It Means	Example
Promote discoverability	Enable users to quickly find essential information on a web page	When you click a page section to reveal more interactive elements like buttons or menus that relate to the next action you can take
Provide guidance	Direct user focus to important information or feedback	When your lack of input on a page triggers an error notification, and then sequentially highlights the areas that require attention
Provide clarity and logic	Establish better spatial relationships and hierarchy on a web page	When you complete all the essential steps of a task, and a progress ring prompts a success animation
Prevent change blindness	Define real-time changes to avoid change blindness—people’s tendency to miss changes when they occur far away from their focus of attention	When an action you take on-screen produces a visible effect, such as clicking a button and the background color changes, to prevent change blindness
Reduce cognitive load	Communicate information to cut down on cognitive load—the amount of mental processing power needed to understand information on a screen	When you create a new task, a contextual success message—a toast—appears where the new task is added to situate the user quickly within the page
Improve perceived latency	Use visual experiences to improve the perceived latency—the amount of time it takes for elements, such as text, to download	When you move through sections of a page and a progress indicator animates in parallel, while content fades in and out as you move through each section

Salesforce Kinetics System and Design Systems

The Salesforce Kinetics System works hand in hand with a team's design system—a collection of repeatable design patterns and reusable code, enabling them to establish a motion language from the ground up. For example, the Salesforce Kinetics System works with the Salesforce Lightning Design System (SLDS). SLDS is a framework that gives designers and developers access to key resources like components and color palettes to create UI consistent with the Salesforce Lightning principles, design language, and best practices. SLDS also consists of additional documentation to help teams understand how to create motion through artifacts. This includes:

The three guiding principles of motion and four personality attributes, which the Salesforce Kinetics System follows to create a consistent user experience across a UI. You'll learn more about these later in the module.
Accessibility and choreography—storytelling through sequenced motion—best practices, which you learn about later in this module.
Mobile and implementation guidelines, which are available in the Salesforce Kinetics System guidelines documentation.
Kinetic styling hook values, which use Cascading Style Sheets (CSS)—a type of coding language—custom properties that make it easy to customize component styling for a specific design project.

In future releases, teams will be able to use components for their design system with out-of-the-box animations supported by Salesforce Kinetics System guidelines, the three guiding principles of motion, personality attributes, consumable Kinetics styling hook values, and scalable Kinetics patterns–the Kinetics patterns unique to Salesforce. Teams will also have access to presets or templates for motion design tools like Figma, a cloud-based design tool that enables designers and developers to collaborate on projects from anywhere.

With the Salesforce Kinetics System integrated into the core of a design system, teams can provide modern and sophisticated interaction experiences while maintaining consistency in the UI language more efficiently across multiple products.

Dependable and Reliable

You can also use the Salesforce Kinetics System guidelines to build a UI that fosters a dependable user experience. This lets users create a reliable relationship with the UI through the completion of key tasks, including:

Easily navigate a UI, using specific actions to advance through a flow or even re-visit information, if needed. For example, a clear indication of a cursor’s hover creates anticipation for a clickable section, enabling users to take quick actions easily.
Discover useful information on a page, with the help of clever Kinetics choreography between elements. For example, an error notification that progressively reveals where there's missing input on a page, like first and last name fields, sequentially guides users, helping them avoid cognitive load and maintain their flow.

Two users at their laptops, one navigates the user interface, and one encounters an error notification

Using Kinetics can improve the quality of a user's experience, convey meaningful and timely information, and ultimately deepen trust in your product and brand. Trust is a fundamental part of building strong relationships with customers, and those customer relationships are key to business success.

Check out the Get to Know Relationship Design trail on Trailhead to learn more about building strong relationships by design.

Next, you learn more about the Salesforce Kinetics System, exploring its three guiding principles of motion and personality attributes.