Notifications

Notifications are an important method of communicating with users and providing feedback.

It’s important to keep users informed and send notifications when there is an update or status change they should be aware of. Users should always be given appropriate and timely messages to help them understand whether they are moving towards their goal. Ensure your notifications are relevant, timely, and informative.

_{1. Banner
2. Dialog
3. Snackbar
4. Alert}

Principles

Relevant: Notifications should be related to the user’s goals and presented in the context of what they are doing.

Timely: Ensure users are kept up to date with prompt notifications and see critical notifications immediately.

Informative: Provide users with the context and next steps needed to understand and address the notification.

Use cases

Tip

Notifications that are too frequent or disruptive create negative experiences and drive users from platforms.

Use notifications to inform users of important status changes and updates. They should be relevant to the user and as minimally disruptive as possible. Be considerate of your users when sending a notification.

Task-generated notifications

Task-generated notifications are initiated in response to user action during a specific task. They give users direct, immediate feedback. They should be placed in the region of the page the user is working in and be related to the user’s action.

You might send a task-generated notification when:

A form is successfully submitted.
There is a problem uploading a file.
Credentials can’t be found.

System-generated notifications

These notifications are initiated by the application or system, independent of user action. They provide updates on background system status or out-of-context events that have finished.

You might send a system-generated notification when:

A background task that the user should know has been completed.
Planned system maintenance is coming soon.
A new report is ready.

Deciding which notification component to use

Notifications range in their priority and therefore should vary in their disruptiveness to users. It is important to match the urgency and priority of the information being communicated to the visual style and behavior of the notification.

Component type	Priority	Duration and interaction	Use case
`Snackbars`	Low	Usually snackbars disappear automatically. Snackbars with actions could persist until dismissed by the user.	Task-generated, System-generated
`Alerts`	Medium	Usually alerts remain until dismissed by the user, the state that caused the alert is resolved or it can remain persistent.	Task-generated
`Banners`	Prominent, Medium	Usually banners remain until dismissed by the user, the state that caused the banner is resolved or it can remain persistent.	System-generated
`Dialogs`	High	Dialogs block app usage and require the user to take an action.	Task-generated

Notification status

Notification status helps convey the information being communicated. These statuses correspond with a color and icon to provide a consistent, universal experience for users.

Status	Usage
`Information`	Provide additional information to users that may not be tied to their current action or task.
`Success`	Confirm a task was completed as expected.
`Warning`	Inform users that they are taking actions that are not desirable or might have unexpected results.
`Error`	Inform users of an error or critical failure and optionally block the user from proceeding until the issue has been resolved.

_{Notification status using the snackbar component.}

Notification message

It’s important to consider the user’s context when writing notification messages. Use language that is accessible to the user and that will be easily understood. Use a tone that is appropriate for the situation and notification.