Design frameworks

Emphasis

As users move throughout a digital experience, varying levels of attention are given subconsciously. Levels of emphasis are ways designers can ensure the right level of attention is given in any scenario.

Introduction

As users move throughout a digital experience, varying levels of attention are given subconsciously. Having multiple levels of emphasis ensure designers can craft experiences that allow the user to speed up or slow down at appropriate moments. 

Throughout the component documentation, and during conversations about digital experiences, designers will reference moments of no emphasis, low emphasis, medium emphasis, and high emphasis. Each level of emphasis represents a moment in which a user could and/or should interact with an element.

No Emphasis

No emphasis moments represent a piece of the experience in which a user can freely and quickly pass over without missing anything important or critical to the task at hand. These moments are great for ancillary actions or details.

Low Emphasis

Low emphasis moments represent a piece of the experience in which a user can briefly recognize some piece of content but quickly continue on without missing anything important or critical to the task at hand. These moments are great for ancillary actions or details. 

Medium Emphasis

Medium emphasis moments represent a high value (but non-critical) piece of the experience in which a user should readily see and recognize as an option, but can still quickly identify a different path forward. These moments are great for secondary actions or details.

High Emphasis

High emphasis moments represent critical pieces of the experience in which a user needs to engage to complete a task or trigger an action. These moments are the only way to present primary calls to action.

Examples

The following examples illustrate how the levels of emphasis are used throughout the documentation. Please note this is not every instance of emphasis used with components — just a handful of examples. 

The purpose of showing these examples is to demonstrate how some component variants are structured around the concept of high, medium, low, and no emphasis. Also some components represent moments of high emphasis (prompt); while others are only appropriate for lower emphasis moments (notification).

Component Emphasis Notes
Button High emphasis The main differentiator for this level of button is the background color is filled and should demand the highest level of attention in the experience.
Button Medium emphasis The main differentiator for this level of button is the transparent background color — and while it still appears as a button providing affordance for the user that an action is possible — the visual treatment allows the button to blend in with the surroundings just enough to not compete with a high emphasis button for immediate attention.
Button Low emphasis The main differentiator for this level of button is the initial lack of treatment to the container. This allows the low emphasis button to fully blend into the experience and not compete with any medium or high emphasis buttons present.
Quick Action Button No emphasis This level of emphasis actually demands no user attention at all.
Quick Action Button Low emphasis The main difference between this level of emphasis and others is the subtle border that provides some separation from the content around it without demanding much of the users attention. The border provides some affordance and an indication of where the touch/click target is, while still demanding a very low level of user attention.
Quick Action Button Medium emphasis The main difference between this level of emphasis and others is the background color has a level of opacity that allows the component to live on top of surfaces and allow underlying colors to bleed through. This makes a great option for quick actions that need to live within other components and stand out just a little, while still allowing the content around it to receive higher levels of visibility.
Quick Action Button High emphasis Serving as the highest emphasis quick action button, and only appearing within a visual grouping a single time, the main differentiator between this level of emphasis and others is the branded background color. This branded color increases the visibility and demands higher levels of the users attention.
Notification Medium emphasis Notifications are medium-emphasis messages used to communicate contextual information from the system to the user.
Prompt High emphasis Prompts are high-emphasis messages that inform users about a task and can contain critical information, require decisions, or involve multiple tasks. Used when a user is required to take an action before they can continue interacting within a workflow. They are intended to capture the user’s attention in order to inform or shift focus to a pertinent task.