Understand the Salesforce Kinetics System Design Process

Learning Objectives 

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

• Identify the scalable Kinetics patterns unique to Salesforce.
• Recognize examples of Salesforce scalable Kinetics patterns in the user interface (UI) design.
• Define storyboard.
• Explain why storyboards are key in the motion design process.

Cohesive and Consistent Visual Experiences 

In the Salesforce Kinetics System module, you learn about the established guidelines and best practices outlined in Salesforce Kinetics System guidelines. Designers and developers use these guidelines and best practices to ensure visual experiences are cohesive and consistent across a UI, including when they create custom animation within these experiences. 

Another aspect of ensuring consistency in animation across a UI is using the Salesforce scalable Kinetics patterns in your design. 

Unique, Scalable Patterns 

Salesforce Kinetics patterns are the scalable motion patterns unique to Salesforce. They reflect intentional design, using the three guiding principles of motion and four Salesforce Kinetics System personality attributes you learned about in the Salesforce Kinetics System module. 

The Salesforce scalable Kinetics patterns are border swirl, spotlight, ripple, and directional underline. 

Border Swirl

A border swirl provides feedback when a user clicks a component, like a button, drawing a border around it. You can design the border swirl to start from the bottom left of a component or use the cursor position to inform where the animation begins. Components that use this pattern include a checkbox and radio and menu buttons. 

Border swirl animation within a list of three checkboxes, three radio buttons, and a clickable icon.

Spotlight and Ripple

Spotlight and ripple patterns often complement one another. A spotlight brings components in an interaction, such as a user clicking or hovering over an icon, into sharp focus by scaling the background fill of a component. Use it to provide quick and dramatic feedback in components with a smaller surface area, like buttons, menu items, and icons. 

A ripple provides instant Kinetics feedback and reinforcement to users when interacting with a component. Components that use this pattern include buttons, menus, and progress indicators. 

Spotlight and ripple animation within navigation items and buttons, an icon, and tabs.

Directional Underline

A directional underline pattern implies the direction of origin for a component. When users move from component to component, such as between tabs on a web page, you can use the directional underline pattern to signify position and hierarchy. Components that use this pattern include tabs, progress indicators, and breadcrumbs—a secondary navigation system that shows a user's location in a site or web app. 

Directional underline animation within tabs and breadcrumbs.

Ready, Set, Motion 

To learn more about using Salesforce scalable Kinetics patterns in motion design experiences, let's follow Camila, a fictional user experience (UX) designer, and her journey in creating custom animation. 

Camila is at work on a new project for an upcoming release cycle: Design a new global navigation experience for her company’s website. And she wants to ensure she understands the Salesforce Kinetics System design process, including best practices for adding custom animation to the main navigation menu panel. To get started, she reviews Salesforce Kinetics System guidelines and learns what Salesforce scalable Kinetics patterns are already available for her design to determine what motion patterns she needs to create.

Camila wants to make sure she designs a functional, accessible experience that delights users. She also wants to create animation that her engineering team can implement with relative ease, given time and technical constraints. 

To do this, she prepares a motion brief highlighting the role and value of incorporating animation into the new global navigation experience. She includes identifying how she can use the Salesforce scalable Kinetics patterns referenced in Salesforce Kinetics System guidelines as a guide for creating custom animations for the new motion design concept. She also emphasizes how the new design project promotes the key Salesforce Kinetics System goals you learned about in the Salesforce Kinetics System module, including providing clarity and logic, guidance, promoting discoverability, and reducing cognitive load. 

• Provide clarity and logic: Include a progress indicator component in longer user flows to clarify how many tasks users have completed and how many they have left within longer user flows.
• Provide guidance: Create error notifications that sequentially highlight where there's missing input, like first and last name fields, to guide users in establishing better spatial relationships and hierarchy on a web page.
• Promote discoverability: Include a custom navigation menu panel with Salesforce scalable Kinetics patterns like ripple and spotlight animation and customized motion design to help users discover essential information quickly. When users interact with menu choices, ripple and spotlight Kinetics patterns provide Kinetics feedback, enabling users to understand the options they can select. And the custom motion design supports the team's specific use case to create animation for a custom double-panel component to help users quickly discover relevant resources.
• Reduce cognitive load: Incorporate techniques like speeding with implied direction—outlined as a transition best practice in the Salesforce Kinetics System module—to provide seamless progress through multiple pages in longer flows.

Move to Storyboard 

Camila also creates simple storyboards—chronological sequences of sketches that illustrate a concept or storyline—to illustrate her ideas. Storyboards are key in motion design because they enable you to visualize and share your design vision with others before moving into the actual design and production process. Camila develops multiple storyboard concepts to illustrate motion design options for the navigation panel, including motion design for:  

1. Navigation for the custom double-panel component, discussing how they can fade it in when users interact with menu tab options at the top of the web page.
2. Main menu items within the custom panel, discussing how they can use the ripple and spotlight animation patterns when users interact with them.
3. Navigation for the menu items within their custom panel, discussing how they can also fade in more menu items to the right when users hover over the main menu items.

Now, Camila is ready to kick off internal collaboration with the engineering team.  

Resources 

• Trailhead: Salesforce Kinetics System
• Salesforce Lightning Design System: Kinetics System Guidelines