Design Transitions

How to Move from One View to Another

Transitions are the most common motion you’ll deal with. A transition occurs anytime there’s a change to the state of the view. Transitions can be as simple as a single component entering the view, or as complex as a complete view change. Wherever there are two consecutive artboards in your design, there’s a transition.

Panel Transitions in Lightning

When designing a transition, consider these things:
Space: The three-dimensional stage on which elements will be choreographed. This tells you where things live on and off screen, and the direction of motion.
Hierarchy: The relative importance of each element. This tells you how to sequence the elements.
Emphasis: The elements that really need to stand out or create visual appeal. This tells you about the quality of acceleration.
Latency: Elements that aren’t yet downloaded before the transition begins. This tells you if spinners or stencils will be part of the transition.
Fatigue: A transition will feel plodding if it’s too frequent. This tells you to consider a simpler alternate transition for subsequent runs.

Space

Before you animate anything, you should understand how your composition is staged: the layers of your app. This is the spatial model. The model tells you where elements live on and off screen, and the direction in which they enter and exit the view. The model helps users orient themselves to state changes, building their spatial intuition for where features live throughout the app.

In the lightning design system the spatial model definitions consists of two types:

• Components float on multiple levels
• Components live on page level relative to a parent element on that page.

Multi-level components:
In Salesforce, lightning design systems components may exist on 4 levels higher than the standard page.
Components that live on their individual page levels will gravitate towards the center of the page when triggered, thus guiding users through a more holistically weighted experience and improving visual scan-ability of information

Level 1 : Docked Composer and Docked Utility bar

Level 2: Panels

Level 3: Toasts & Notifications

Level 4:Modals

Relative components:
Components that originate from a parent element will float elevated above the same page level as the parent element. These components will move in relation to the parent component when triggered

Hierarchy

The way you sequence elements tells users about the importance of each element. At one end of the spectrum, you can have everything enter at the same time. while at the other, they can be sequenced one at a time.

No Hierarchy: Parallel Sequencing

Use parallel sequencing to show a direct relationship between elements.

Synchronizing progress indicator with directional modal

Moderate Hierarchy: Staggered Sequencing

Use staggered sequencing to show direction or punctuation.

Points:

• Creates fluidity
• Direction stagger: like elements evenly sequenced for a directional domino effect.
• Punctuation stagger: unlike elements; last element in sequence gets the most attention. This can be achieved by using offsets and delays in duration

Dev tips:

• You can use direction staggers with looped nth-child delays in SCSS, or promise-based delays in JavaScript. The SCSS approach works well when there’s a known, fixed number of items to be staggered. The JavaScript approach is better when the staggered items are dynamically loaded, or the items aren’t of the same class.

Strong Hierarchy: Serial Sequencing

Use serial sequencing to draw attention to another part of the experience.

Points:

• For cause-and-effect relationships between elements.
• Minimizing change blindness.
• Like staggered sequencing, punctuates the last element, but serial sequencing makes this effect more pronounced. Transfers momentum of the flow; changes focus of the experience. This is very important for experiences that may consist of changes that happen out-of-view

Directing users to errors on In-App Guidance

Emphasis

Use emphasis to bring special focus to parts of the page that needs immediate attention
Points:

• Emphasis can create urgency: alerts, toasts, notifications
• Emphasis can create visual interest and break monotony: celebrations, brand moments
• Analogy: lead actors vs supporting actors vs extras. Most motion is done by the support and extras: subtle, functional. Your lead role is saved for something very special; it’s the one that stands out and is remembered.

Examples:
Urgency: Toast modes for neutral, warning, error, and success. The extra dip in the movement provides more force to the rhythm, bringing extra focus into the action.

Notification alerts: The vibration emphasis around the red circled alert signifies a call out for attention.

Visual Interest: Success in Progress Ring. The loading animation provides context for completing a task and the burst provides the emphasis necessary to give the success more impact.

Success as depicted in progress ring

Latency

Motion can be used to provide a fluid transition for the user when they are presented with new information. But remember that some elements won’t already be downloaded when the transition begins. In Kinetics, we aim to use experiences that improve the perceived latency of our pages. We can do this by turning what tends to feel like passive waiting to active waiting by offering users something to do in the interim as contents load.

• A branded loading experience provides a great way to keep users engaged while loading full pages. Use branded loading sequences within key user flows where users tend to spend more time
• If information will take a while to load, your transition will need spinners or stencils.

You can’t always sequence elements that load. Consider elegant ways of handling how individual sections on a page loads. Fading in new content, gradually increasing space for new content.

Loading in Pop-overs: When there is a lot of information, load content as it becomes available and fade in the new content

Scrolling through content:

• Progressively load content as users scroll. Loading information at the top of the page first and gradually loading the rest of the page will reduce wait times and quickly provide content for users to look at
• It is important to not use GIFs while showing visuals as they cannot be paused or played and are rarely small in file size, thereby contributing to increased page load times
• By default, pause any media that may be playing off screen until the user scrolls to the relevant section. You can pause and play animations by setting animation-play-state property to paused using CSS and JavaScript on the element with the animation style.
• CSS Example in code

  • element { animation: happy-animation 2s linear; }
    element.paused { animation-play-state: paused; }

• JavaScript example in code

  • // then if/when element is in the viewport
    element.classList.remove('paused');

• Alternatively, in JavaScript, set the property in JS

  • // on element load
    element.style.animationPlayState = 'paused';
    
    // then if/when element is in viewport
    element.style.animationPlayState = 'play';

Create anticipation with Spinners

• Pair with text to progressively communicate with the user
• Add variations in speed, acceleration or spinner elements to avoid monotonous repetition

Create anticipation with Stencil:

• The place holder UI has to be an accurate representation of the final UI to enable a smooth fade transition to content and avoid misleading the user. For instance don’t use stencils for empty states as it contradicts user expectations
• Load content by revealing information through progressive disclosure. For example, you can fade the stencil first to the predominant color, then to the blurred version of the content, and then to the final UI

You can use one or more loading treatments in combination to improve perceived loading times on dense pages:

• Determinate progress bars can be used to tell the user when a page is fully loaded at the top of the page along with the use of stencils or spinners to depict the loading of individual UI elements. Doing this might mitigate cognitive load for the user in dense UI pages by letting them know how much of the page is fully loaded.
• Spinners and stencils can be used in combination for different types of content. A spinner may be better suited for large areas with varying content type, whereas a stencil maybe better suited for standard UI structures

When to use Spinners and Stencils:

To learn about Lightning Design System best practices for stencils and spinner, refer to the design guidelines.

Fatigue

Consider the context of the transition, and whether it might run several times over within a short time frame. Would this annoy or bore users? If so, consider a simpler alternate transition for subsequent runs, or eliminating subsequent transitions altogether.

Examples:

• SLDS panel transitions. List item staggers in only when the panel opens, not every time you navigate back from a subview