Designing messages

People care about how products talk to them. YouTube, GitHub, and Slack all have a distinct voice, tone, and personality.

Products engage us, manage to make us feel at home, capture our attention, and earn our loyalty.

Poor messaging contributes to a poor user experience, which leads to dissatisfaction. On the other hand, good copy reflects our products' voice (personality) and enables us to build a better relationship with our audience.

In short, good messaging may not be the reason people stay with our products, but bad messaging could be the reason they decide to leave.

Use different types of messages to guide people through their tasks. Each message type has a consistent visual and writing style to help people know what to expect.

Use these guidelines to choose and write the types of messages:

• Information message — provides additional information to motivate people.

• Error message — alerts people of a problem that has occurred and informs them what to do next.

• Success message — celebrates success along with the people using our products.

• Warning message — gives advanced notice of a potential change that may result in loss of data or an error state.

• Feature discovery — lets people know about a new feature.

Use the table to identify the right component for your content.

For example:

• If you want to highlight a new feature to a user, consider a spotlight card, benefits modal, or empty state.

• If you want to tell someone they've accomplished a task, consider a flag.

Use empty states to show when there is nothing to display in a view, for example, when a board has no tasks, someone clears their inbox, or a search returns no results.

Read guidance on writing effective empty state messages.

An empty state can appear as a full-screen message or within panels, tables, and other containers.

Usage guidance for empty state component.

Use banners only for critical system-level messaging for example, warnings about loss of data or functionality.

Banners appear at the top of the screen and shift the content below them.

Usage guidance for banner component.

Use flags for confirmations, alerts, and acknowledgments that require minimal user interaction.

Flags are event-driven messages that appear by overlaying content at the bottom left of the screen, emerging from the navigation sidebar.

Usage guidance for flag component.

Use section messages to alert the user of something that has happened in a specific section of the screen.

Section messages appear above the affected area (for example, Issue experience in Jira).

Usage guidance for section message component.

Use inline messages to alert people to a required action or important information.

Inline messages consist of an icon, message, and sometimes secondary text. People can interact with the icon, title, or secondary text to reveal the full inline message.

Usage guidance for inline message component.

Use modal dialogs to present a short-term task the user needs to perform.

Modal dialogs display content in a layer above the page.

Usage guidance for modal dialog component.

Benefits modals explain the value of a significant new feature or experience change.

Read guidance on writing effective feature discovery messages.

A benefits modal focuses a person's attention on a large or impactful update.

Usage guidance for benefits modal component.

An onboarding spotlight introduces new features to users through focused messages or multi-step tours. A spotlight card is for onboarding messages that need a more flexible layout, or don't require a dialog.

Read guidance on writing effective feature discovery messages.

Usage guidance for onboarding (spotlight) component and spotlight card component.

Messages use colors and icons to help indicate content and urgency.

Make sure you use the right color role for your situation. For example, yellow typically implies a warning, while green can imply success.

Review guidelines on using icons and usage guidance for the icon component.