Messaging priority and placement
Pilot

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

Table of messaging priorities and types
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 Callout 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.
Current components:

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: