Notifications

Notifications

Notifications are banners stating there is an issue, success, or major status change within the current case or screen.

Notifications come in six different varieties.

Notification styles example. Blue used for general information, light red used for errors, issues, and negative notices. Green used for success or positive notices. Marigold used for warnings, but not errors. Purple used for something that may be inactive, withdrawn, or deprecated. Strong red used for only the most serious of messaging such as critical failures and the like, typically at the app-level.

Usage

Notifications are to be used sparingly and only for important information. They should appear at the top of the page and should be relevant to the entire action or assignment.

Instructions, and tooltips for actions should be written as actions or commands. Examples for a tooltip would be: "View item", "Edit record", or "Configure section".

Messages should end in a period. They can be configured to be dismissed.

Confirmation messages

Use the green status section to inform the user of success of a case and or when a task has been successfully completed.

Example of a confirmation message

Inactive or deprecation messages

If the case is inactive or has been deprecated use the purple status section.

Example of a case being archived message

Error messages

Use the red status section to inform the user of errors in processing or that a failure in the process has occurred. Error messages should precisely state what the problem is, and how the user can solve it.

Client side errors appear during inline validation. Case level errors are server side errors triggered on attempt of advancing the flow.

Example of a single error message Example of multiple error messages

If an action determines a major change (i.e. deletion/discard) or permanent action, provide the user with an additional confirmation to denote the change they wish to make.

Example of a modal message

If an error is on the server side in a modal, follow the case/page level notifications.

Example of an error message

Errors can be on form inputs as well.

Example of errors on form inputs

Last updated: Jul 2018

Offline

Users need to be informed if they are offline (or have otherwise lost their connection) so they know their data isn't currently syncing.

Offline indicator example

Any element that is not able to refresh because it is offline should show a custom state to inform the user of this status and is presented as an empty state. The icon and text can be customized for the needs of a specific application, but the treatment should remain the same. In the next release, the loss of connection icon will be added to the core icon font.

Section with no connection example

Last updated: May 2017

Next: Pagination