Notifications

Notifications aim to inform the user of essential changes to system status. Providing clear and punctual feedback is a critical step in building user trust.

Usage

Properly designed notifications have three key features. They are:

• Timely: Notifications are instant and kept up-to-date.
• Relevant: Notifications are related to the user's current goal.
• Informative: Notifications give context and next steps to take.

To design notifications that meet these requirements, we need to know the urgency and priority of our message and match it with the appropriate visual style and behaviour.

The first big difference between notifications is what triggered their appearance: a user action (task) or the system.

• Task-generated notifications are useful when provigin immediate feedback to the user. They should be placed in the region of the page where the user is working. eg.: form being successfully submitted, there is a problem uploading a file, credentials cannot be found.

• System-generated notifications are used to convey information about the system, independently from user actions. eg.: loss of internet connection, planned system maintenance.

Severity

Notification status helps convey in a glance the type of information being communicated. These statuses correspond with color and icon to provide a consistent, universal experience for users. We differentiate into 5 different types of feedback:

Neutral

Convey a message in a discrete way. Usually auto-expiring and dismissable.

Informative

Convey information in a discrete way. Usually auto-expiring and dismissable.

Positive

Positive reassurance everything has gone well. Usually auto-expiring and dismissable.

Warning

Something could be not desirable or have unexpected results. If there are things the user can do about it, specify it in a clear and actionable way. Usually persistant and dismissable.

Danger

Critical failure, potentially blocking. If there are things the user can do about it, specify it in a clear and actionable way. Usually persistant and non-dismissable.

Placement

Based on placement, we can sum up notifications type in 2: global notifications and inline notifications. Both can be system-generated or task-generated.

Inline notifications

Inline snackbar are nondisruptive and confined to a specific area in the UI. Inline notifications display both task-generated and system-generated messages and persist until they are dismissed by the user or the notification is resolved.

It's important to maintain the proximity law when possible and place alert as close to the cause and the effect of the item.

Examples of inline notifications are: 'This page is temporarily not editable', error messages in forms (usually paired with helper message from the text field).

Global notifications

Global notifications express an action which is not directly related to a specific part of the UI but refers to the overall system status.

Some use cases where global notifications are used are the confirmation after a user actions, feedback when an action has been completed, app errors or sudden lost of connectivity.

According to the device type, global notifications are placed in different part of the screen.

Global notifications use a Z4 elevations so will go over everything else, but be mindful and try to avoid placing it in front of frequently used buttons, targets, or navigation inputs.

Behavior

Notifications are a useful tool for providing feedback to the user, but sometimes they can be used also to feedforward informations.

It's better not to interrupt the user while performing a task, otherwise we risk to create a frustrating experience. Offer the user interactivity only if it's necessary: as a rule of thumb notifications should be auto-expiring by default, use the persistent behaviour only if necessary.

Auto-expiring

Notifications are automatically dismissed after a certain amount of time without user interaction.

Dismissable

Notifications can be dismissed by the user by clicking on the close button or by clicking on the notification itself.

Persistent

Notifications can't be dismissed by the user in any way.

Best Practices

Only send notifications when necessary

Try to be coincise and informative: 3 lines should be enough for most of the cases (title included)

Display max 1 notifications per time