Notifications are feedback boxes that communicate a message from a user action. They inform and guide the user and provide critical information necessary in context. They appear at the top of the page under the header allowing the user to continue with their work.

Design and behaviour

Notification’s width is 100% of the grid. The content aligns to the center. A close icon is located always on the right part of the notification. Notifications can include a link if needed. Notifications should always have an icon on the left part so makes them more understandable to the user and allows a better experience in case the user has some kind of color blindness. That icon should reflect the nature of the notification, that can be an error, a warning, a success or completed action or an information.

Multiple notifications

When more than one notification should appear on screen at the same time, the multiple notifications module starts to work. It allows showing multiple notifications in an ordered and clean manner. Allowing the user not being overwhelmed by multiple notifications at sight. This component lets the user focus at one notification at a time. The user must dismiss the notifications one by one. A pagination shows the number of total notifications and the current notification the user is watching.

Header example

Header example with empty array and timeout

Multiline example

Usage and best practices

• Notifications are used when the user has made some interaction with the system and the system respond to them by giving feedback about the action taken by the user. In case the user haven’t interacted, but the system needs to send any message use Alerts.
• Notification’s message should be clear, short, concise and technicaly understandable by the user.
• Keep the message in one line.
• If you need to introduce more text add a link with the ‘…More’ text. Then the box will grow in height to fit the content. Limit the lines of the message to a maximum of 5.
• The message has to be related to the context that triggered its appereance so use terms that were used when the user started the action.
• If there is only one notification text is aligned to the center. In case there two or more and pagination component appears align messages to the left to avoid eye movement. The separation between the icon and the pagination box is 20px.