Messaging priority and placement
Priority
In order to avoid too many messages stacked on the screen, we prioritize which messages to send first based on the severity of the issue.
What goes first
Priority | Status type |
Highest | Error |
High | Warning |
Medium | Success |
Low | Recommendations |
Lowest | Info |
Prominence and placement
Prominence of a message is determined by its severity. The amount of time it remains on screen is also determined by severity.
Overlays
Blocking content—the most prominent
Messages that block the surface below them are placed in the center of the screen, both vertically and horizontally. They should be used sparingly to avoid blocking people from productivity and inspiration.
Current components:
Blocking content slows a person down from their usual flow, so here are some guidelines on when it’s okay to block content.
When to use
Example wireframe
To confirm that someone wants to peform a destructive/irreversible action
When an issue is so severe that it’s hard to continue with a good experience
To warn a person of something that can have serious consequences before they continue
As an interstitial that leads to a much better experience we think a person shouldn’t miss
When not to use
Example wireframe
To acknowledge completion of a task that doesn’t require follow up, like pinning to a board. Use Toast instead.
To provide general information and recommendations. Use BannerCallout instead.
To show an error or warning that applies to a section of a page, or that doesn’t severely limit the user experience.
Not blocking content
Ephemeral—less prominent
Small overlays that appear for a short period of time, usually 3–5 seconds depending on content. They do not prevent a user from accessing the main content and navigation on the surface underneath.
Current components:
On surface
Top of the page—very prominent
Place messages at the top of a page, below the main app nav if the alert or information applies to the entire page. Avoid stacking messages so that a person’s view isn’t cluttered and they can’t focus on the main information they came to see and interact with. Show the highest-severity ones first.
Ephemeral—less prominent
Place messages at the top of a page, below the main app nav if the alert or information applies to the entire page. Avoid stacking messages so that a person’s view isn’t cluttered and they can’t focus on the main information they came to see and interact with. Show the highest-severity ones first.
Current components: