Alerts are more compact, ephemeral notifications that appear over the top of the users workspace and disappear automatically after a period of time.
Anatomy
Usage
Alerts should be used for time-sensitive messages to notify the user, but never in cases that require user action, as they will disappear after a period of time and reside in the notification center.
Examples:
“Your item was deleted [Undo]”
“Your changes were saved succesfully”
“The user was invited [Revoke]”
States
-
Visible (internal timer counting)
-
Awaiting input
-
click to pause auto-dismiss (timer paused)
-
click optional Action link
-
click to dismiss
-
-
Dismissed (not visible)
- Resides in notification center, marked as read.
-
Timed-out (not visible)
- Resides in notification centre, marked as unread.
Behaviours
The Alert appears, for example as a ‘toast’, and resides for a period of time (n seconds, to be determined), before disappearing. Hovering the alert ‘pauses’ its dismiss timer. The alert can be clicked anywhere to ‘pause’ - after which it must be dismissed manually. The text can be read and the optional action links can be clicked.
The title and body are mandatory - it should be possible for a user to derive some meaning from the notification at-a-glance, and then read more for further details.
It would be possible for product owners to configure which alerts make their way into the notification centre - for example an ephemeral alert “Saved! Your work was auto-saved” could disappear or be dismissed without making it to the notification centre - this could be configured by product owners per alert type.