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.
- 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.
The notification should appear as superimposed, at the bottom center of the page.