Page History
(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)
Notifications
Overview
Notifications in Inspire Design give users clear, visual feedback about their actions and the state of the system. They show whether a process has been completed successfully, whether a problem has occurred, or how an ongoing process is progressing.
Notifications appear as Local, Global, and Toast Notifications. Together with the Notification Icon in the header and the Notification Panel on the right side of the dashboard, they form a connected notification experience across the application.
Anatomy
Notifications within Inspire Design have four five major elements:
- The Notification Icon inside the header.
- The Notification Panel that opens on the right side of the dashboard.
- Global Notifications that exist in the form of Toast Notifications and Inline Notifications.
- Local Notifications in the form of Inline Notifications that are part of boardlets.
- Global Notifications as a pop-up at the top of the dashboard.
- Toast Notifications as a pop-up at the to-right of the dashboard.
are independent of any dashboard and appear across the entire application.
The Notification Icon, Notification Panel, and Global Notifications build a global notification flow that activates when a user receives a Global Notification.Local Notifications are tied to the dashboard and, in some cases, to the boardlet where they appear.
They are not connected to the Global Notification flow and vanish when the user leaves the dashboard.
The appearance of notification elements may vary between different types of notifications.
...
The Notification Icon is part of the header toolbar on the right side of the dashboard header.
It is always present, independent of the current dashboard.
The icon is located at the far right, immediately to the left of the overflow menu, if one is present.
...
Users can open the Notification Panel by clicking the Notification Icon in the header or on a Global Toast Notification.
It opens on the right side of the dashboard and has a fixed width.
...
The Toast Notification appears in the top-right corner and visually floats above the dashboard.
Only one Toast Notification can be visible at a time. They do not disappear automatically.
The color of the Toast Notification depends on the type of notification it contains.
The general layout stays the same between notifications, with the Progress Noti
...
- 01 Notification Icon – Signals the type of notification and matches the icon in the header, except for the progress notification.
- 02 Title
- 03 Time Stamp – Shows when the notification popped up.
- 04 Close Action – Allows the user to close the toast notification.
- 05 Description – A short text explaining the notification.
- 06 Actions – Influence the process in progress.
- 01 Notification Icon – - Signals the type of notification and matches the icon in the header, except for the progress notification.
- 02 Title
- 03 Time Stamp – - Shows when the notification popped up.
- 04 Close Action – - Allows the user to close the toast notification.
- 05 Description – - A short text explaining the notification.
- 06 Actions – - Influence the process in progress.
- 07 Progress Bar – - Actively shows updates on the progress.
Global Notification
Global Notifications appear as a bar at the top of the dashboard as a pop-up. Up to two Global Notifications can be visible at any time. They disappear after a set amount of time or if the user clicks the "close" button, if one is present.
Global notifications do not support the progress variant.
- 01 Notification Icon - Signals the type of notification and matches the icon in the header.
- 02 Title - Few words describing the notification message.
- 03 Subtitle - Additional information clarifying the intend of the message.
- 04 Close Action - Optional close button for the notification
Inline Notifications
For more information on the component of the same name: Inline Notification
Inline Notifications appear inside components or boardlets in general. Their realm of influence is limited to the space they appear in and they are not listed in the Notification Panel. Inline Notifications have four states, determined by importancethe type of notification. The content can vary by use case.
- Error Notification — Colored red; signals critical errors.
- Warning Notification — Colored orange; announces problems that may result in errors.
- Success Notification — Colored green; signals a successful process.
- System Notification — Colored blue; reports system information.
Modal Notification
The Inline Modal Notification is part of boath Local and Global Notifications.
Local Inline Notifications
Their realm of influence is limited to the dashboard or boardlet they appear in and they are not listed in the Notification Panel. Inline Notifications are not popups and thereby influence the layout of the boardlet they appear in.
Global Inline Notifications
Best Practices
Local and Global Notifications
Local Notifications are strictly tied to the dashboard they appear in and are static.
[TODO: when to use]
Global Notifications appear regardless of the current dashboard. They are not tied to a specific boardlet and not dependent on user interaction to appear. [TODO: when to use]
Inline and Toast Notifications in Global Notification
Type of Notification
Notification Flow
Static Notification
This flow starts with a static toast notification. The user can interact with the notification by clicking the close action or the notification itself.
By clicking the close action, the notification closes the pop-up, and the notification will be set as "read".
By clicking the notification itself, users open the Notification Panel.
The notification might have actions or links attached. If the user interacts with them, the action is activated, the notification closes, and it is set to "read".
Progress Notification
This flow starts with a progress toast notification. The progress is displayed in the header to the left of the notification icon and in the toast notification. During the process, the user may be able to cancel or stop the process using actions inside the toast notification.
If the notification is successful, it turns into a static success notification on completion. If an error occurs during the process, the notification turns into an error notification.
a varriation of the Dialog and appears as a centered passive modal above a dimmed background. It contains a critical message and can only be closed with the close action in the header toolba. It blocks interaction with the dashboard until it is closed.
Best Practices
Usage
Global Notification
Global Notifications give feedback on major user actions, for example saving a change inside a table. They appear at the end of a process and usually have an impact on the system, like changing data. They are always tied to user interaction or the inability for a user to perform an action.
Global Notification disappear after a set amount of time. This time should tailor to the notification length, so that users of all reading speeds can comprehend the message.
At the same time, it should only be if absolutely required, since the Global Notification is intrusive, blocking the header bar. In addition, the user should be able to close the Global Notification unless its presence is absolutely required.
Inline Notification
Inline Notifications deliver a direct response to a user action inside a larger process. One example for an Inline Action would be filling out a text field inside a form. The feedback, i.e. the notification, would be that the input is valid or invalid.
As shown in the example, Inline Notifications are used for immediate feedback on small scale user actions. They usually focus on sub-steps in a series and are tied to actions that on their own do not have a large impact.
Inline Notifications are not permanent, being deleted when the user abandons the process by for example switching dashboard. In addition, they are not displayed inside the notification panel.
These notifications usually change the layout of the boardlet they appear in, making them quite disruptive. Thereby they should only be used sparingly. For example, if a form has multiple text fields with specific requirements, they might only need one Inline Notification. This notification could then cover the message for all text fields, instead of every text field having their own notification.
It is also recommended to include the close button unless the presence of the notification is absolutely required.
Toast Notification
In contrast to Global and Inline Notifications, Toast Notifications are not focus of feedback of user actions. They inform the user about the system and background processes, for example downloading a file and the completion message afterwards. They can also include action beyond "closing" to influence the topic of the notification.
In contrast to Inline and Global Notifications, these Notifications are dynamic and live. They can replace each other, for example a success notification replacing a progress notification.
Toast Notifications are the only permanent form of notifications, being stored inside the Notification Panel. To not clutter the Notification Panel, the number of Toast Notifications sent should be no more than necessary.
Modal Notification
Modal notification is a consequence of direct user action. The trigger for the Modal Notification should be communicated clearly to the user with the use of the title or text. It is highly disruptive and therefore should only be used for critical information.
The text inside the modal notification can be longer than in other forms of notification. Despite this, it should be concise and to the point, since any type of user interaction is blocked by the overlay.
Text
Texts inside should be concise concrete, using active verbs and simple language whenever possible. They should avoid complicated or foreign words and abbreviation. Inline and Global Notifications should never have a message with multiple rows and Toast Notifications should avoid messages longer than three rowsThe user can interact with the success or error notification, for example by clicking it and turning it into a read notification.
