Banner

Use the notification component to communicate a message that has little impact on the user (e.g.: confirmation that a request was sent). The notification is not used to interrupt the user’s action, but only to give the user some visual feedback. Notifications should only remain a few seconds.

Use a banner to transmit a message with more impact on the user (e.g.: delete confirmation of a file containing a lot of elements). The banner should not interrupt the user, but will appear within his field of vision. Consequently, the message and its frequency must be adapted. The banner remains and requires an action from the user to disappears.

Use the color system to give meaning to the message and allow users to consider the importance of the message.

Success messages: give a positive message to the user following a successful action.

Warning messages: give a message of vigilance in order to inform the user of a potential error or a recommendation to finish an action.

Error messages: give a negative message following an error during an action or improper use of the system and provides information for finishing the task.

Information messages: give some neutral contextual information to the user to help understand an action or to announce a minor change.

Best practices

- Use a banner or a notification to transmit only one message at a time. If the need to show numerous notifications of the same type is justified, use the expandable banner element that allows you to group many messages into one banner.

- Limit showing simultaneous messages on the screen. In cases where the messages have a highly significant frequency, opt to use a notification panel.

- Always show at least a title. You may add secondary text or an icon to provide more details.

- Be concise and sufficiently explicit in the text. Avoid using two lines of text for a simple message. To finish off the message (for example, with some instructions for resolving an error), use a secondary text.

- Show affirmative messages using consistent vocabulary and favor the active voice.

- Add a call to action if the user can perform an action quickly (e.g.: cancel the submission of a request). In this case, opt for a ghost button. Do not include more than two calls to action per message.

- Use messages sparingly, only to convey important information that is pertinent to the users. Don’t forget that although they may be useful, they still represent a significant cognitive bias on the user.

- If the information is absolutely necessary and important, and requires action from the user, use a modal.

- Always allow users to delete a message using a delete icon located to the upper right.

Placement

The notification should appear as superimposed, at the bottom center of the page.