When to use
Notifications are used to inform users about changes or updates, or to communicate a status. They usually show up in task driven flows at the top of the page or at the top of the section it applies to. Use a notification to provide the user with clear guidance so they know what to expect, what has been processed or what kind of actions are still expected.
We provide several notification types to support different scenario's. A notification can be used to present information, communicate an warning or error, or to give succesful confirmation.
Types
Information
This type of notification has the most generic purpose - to present relevant information that should stand-out in the context of use and help the user to complete a task. Unlike the other notification types, it doesn't present itself as positive or negative.
Warning
This type of notification is used to communicate non-blocking but important information to the user. As the title says, it is used to warn the user about something that might impact the journey or task completion.
Error
This type of notification is used to communicate a blocking error. This could either be a technical error that prevents the user to complete the task at hand or an error as a result of incorrect or incomplete user input. Note that for forms, field specific errors should be handled with inline error messages. However, the error notification culd be a way to indicate and/ or summarise the errors in the form.
Success
This type of notification is used to communicate a succesful conclusion of a task.
Different notification methods
There are different ways of communicating messages or feedback to users. Every method has its own purpose. It is important to know the different methods to make the correct choice for your context.
- Notification: to inform users about changes or updates, or to communicate a status. Stays in place as long as it's relevant
- Toast: used to temporarily display short messages. They don't interrupt the flow, and they don’t require user input to disappear
- Inline error (form field): to communicate a field specific error. Requires input to disappear
Layout and positioning
A notification should be positioned at the top of the section is applies to. This will guide the users attention to the notification first and keeps it close to the related content. A notification usually covers the entire containing element in terms of width.