This is an investigation in to alerts and an alert component that builds on the conversations in alphagov/govuk-design-system-backlog#2
After an audit of common alerts used across portfolio products, services and other government product the following behaviours for alerts have been observed
- Alerts respond to an action a user has carried out, like user input
- Alerts require a specific action or set of actions from the user and are not passive
- Alerts are context-specific
- Alerts can be persistent or dismissible
- Alerts should draw focus to it
These behaviours, to some extent, distinguish alerts (for example, error summaries) from banners (notifications)(for example, confirmation panel).
Some use cases mentioned in the backlog could be better served by developing a banner (notification) component. Reasons being that banner notifications aren't necessarily tied to a user's action while an alert should always be.
Speaker to other designers across government, it seems there's more need for a notification component (this need is reflected in the examples presented in the backlog), rather than an alert component.
Adam Silver of MoJ suggests "A Notification component that can be turned into an alert. That is, it becomes focusable for example like the error summary."
Notification components already exists in other design systems
https://moj-design-system.herokuapp.com/components/banner
http://hmcts-design-system.herokuapp.com/components/banner
Alerts and notifications are often used interchangably, so I think it's important to be prescriptive about what alerting behaviour should be (in the Design System) to help determine its presentation and functionality. However, behaviour alone does not a component make and so coupling the alerting behaviour with a notififcation component fits with the expectation of users of design system, while also meeting some articulated needs.
This looks awesome, @DebsDee. Like you, I'm leaning towards a component called ‘Notification’ that can be configured to be alert like.
That way we can use them in multiple contexts and positions...
Here's a place where we prompt the user to do something that's quite complex to do. (Ideally, we should design the interface so that they don't need instructions like this but this is quite a complex interaction.)
Here's a positive ‘alert’ notification in response to the user doing something:
Here's a notification that shows an application status to the user:
Here's a notification that prompts the user to do a thing: