Understand Kinetics Controls
Learning Objectives
After completing this unit, you’ll be able to:
- Describe the four Kinetics controls.
- Identify best practices for Kinetics controls.
- Recognize examples of Kinetics controls in the user interface.
On the Move
The Salesforce Kinetics System uses four Kinetics controls to create choreography within a user interface (UI): light, direction, speed, and acceleration.
Light
Animation through varying opacity—levels of darkness—and color. Designers and developers also use drop shadow—a graphic effect that makes the parts of a component, like the outline of a button, appear more three-dimensional—to design animation.
A circle animates, changing from light to dark gray, casting a shadow behind it for a three-dimensional effect.
Direction
Movement along the width, height, or depth of a component—or its X, Y, or Z-axis—including rotation around it or following a specific path.
A circle enlarges and then decreases in size as three smaller circles rotate out from its center.
Speed
The distance an element, such as an on-screen icon or panel with a menu display, covers over time. You control speed by setting the duration of the motion.
Two circles move at different speeds across a screen, with motion duration set at 150 milliseconds and 250 milliseconds.
Acceleration
Naturally appearing movement, where elements, like popup messages, gradually come up to speed, then gradually come to rest. This is called “easing” in most motion design tools and includes the following categories: ease-none, ease-in, ease-out, ease-over, and ease-under.
Ease-None
Components move at a constant speed, with no perceived change in acceleration.
Example of ease-none acceleration.
Ease-In
Components build up speed before coming to a stop.
Example of ease-in acceleration.
Ease-Out
Components slow down before coming to a stop.
Example of ease-out acceleration.
Ease-Over
Components accelerate past the set animation endpoint, called a keyframe value, before stopping to create a bounce effect at the end of an animation.
Example of ease-over acceleration.
Ease-Under
Components dip down from the starting keyframe value and accelerate toward the end keyframe value before coming to a complete stop to create a bounce effect at the beginning of an animation.
Example of ease-under acceleration.
Best Practices
Designers and developers use each control to create choreography, using components like buttons, icons, toast, and popup messages, within the UI. To ensure your design reflects Salesforce Kinetics System principles, qualities, and goals and creates an accessible experience for users with vestibular issues—disorders like vertigo and dizziness that interfere with the body’s balance system—follow the best practices below.
Light: Best Practices
- Do: Use color and drop shadow changes sparingly as it can decrease UI performance.
- Avoid: Blinking effects and using acceleration and light together.
A background color changes from gray to blue when a user toggles a switch from disabled to enabled.
Direction: Best Practices
- Do: Use color and drop shadow changes sparingly as it can decrease UI performance.
- Avoid: Repeated pulsing motions and movements that traverse the entire screen or large perceived distances. Also, ensure that the motion and interaction directions are user-intuitive, working how users expect, and avoiding animation like scrolljacking—when a website overrides expected up/down scrolling patterns on a page.
A user hovers their cursor over an icon, triggering a description bubble to pop up and disappear when the user hovers off.
Speed: Best Practices
- Do: Ensure animation speed and interaction speed are user-intuitive.
- Avoid: Scrolljacking and parallax animation—an animation technique that better distinguishes primary content from background elements—that moves screen elements drastically over several distances.
A user follows an intuitive path, clicking on an accordion button to quickly reveal more information on an activity timeline.
Acceleration: Best Practices
- Do: Ensure that the motion acceleration and interaction acceleration are user-intuitive.
- Avoid: Acceleration when designing machine-like motion–opting for the ease-none category—the easing effect creates naturally appearing movement, so easing is irrelevant.
A default toast message fades in, moving intuitively from the top, settles before moving downwards, and fades out.
Now that you know the basics of Kinetics controls, you can explore how to use them in your motion design.