Wise Design - Alert

Alert

An alert gives users an important message about their current task within the context of a screen.

When to use

Use an alert:

to tell users about something that relates to what they're currently doing
to let users know that something needs their attention
when the message is temporary (and not a permanent part of the screen)

Don't use an alert:

if the message needs to be permanently on the screen (use normal copy instead)
if the message relates to a single form field
for network or system errors (use an error screen or error state instead)

Types of alert

There are 4 different types of alert — neutral, positive, warning, and negative.  

Each has a different use case.

Neutral alert

Use a neutral alert to give users contextual hints or general information.

Positive alert

Use a positive alert to tell a user about something that’s resolved, or now available due to their action.

Negative alert

Use a negative alert to tell a user about something that will or already has negatively affected their experience.

Warning alert

Use a warning alert to warn a user about something that could negatively impact their experience.

Actions and links

An alert can include an optional link for further information or an action(s).

Single action

A single action alert is for when there is only one action to be completed.

Single

Use an information alert when your alert needs to communicate an important message or is linked to only one action.

Multiple actions

Multiple alerts are for when an alert has multiple actions to save from the user having multiple overwhelming alerts being displayed. When a user clicks on the alert a list of actions will come up in a bottom sheet. Each alert should be grouped by type.

Multiple actions

Use a navigation alert when there are multiple actions to be taken from a list — to be displayed in a bottom sheet.

Link

When there is no immediate action but there is a link associated with the alert that may direct the user to more info use a link.

Link

Use a link in your alert if you’re just directing the user to more information about your alert and not something directly actionable.

Best practice

Keep the message short and succinct.
Mind your tone with negative and warning alerts.

Don’t make an alert dismissible if the message is critical.
Don’t have more than one alert on the screen.

Only include an action when the user needs to go somewhere to fix the issue or find out more.

Placement

Alerts are contextual, so place them in close proximity to the issue or task they relate to.

If you’re using the alert to communicate information about the application as whole, place it in the top section of the screen.

Interaction

Users can only interact with alerts that include an action, or that they can dismiss.

Action

The action lets users navigate to another screen where they can perform a task or get more information.

If the alert includes an action, it makes the whole component tappable on Android and iOS, as well as on desktop and mobile web touchscreen devices.  

On web, the action text is also clickable and underlined, so it works for click-based interactions too — like using a mouse or keyboard.

Dismiss

Most alerts don’t need to be dismissible. But this functionality can be useful if we know that a user has seen the information before and may want to dismiss it.

If you choose to make an alert dismissible, you’ll need to consider what happens after it’s been dismissed.

Should the alert stay dismissed indefinitely, or reappear next time the user logs in or revisits the same screen?

Does the alert dismiss across all platforms? For example, if the user dismisses the alert on desktop, but then logs in using one of our apps, should it already be dismissed there too?

Content

Writing for different alert types

Each alert type has a different use case — sometimes you might be giving the user good news, and sometimes it might be a warning, or bad news. Depending on the alert type, you'll need to adapt our tone of voice to suit the scenario and message.

Neutral alert

Neutral alerts can be more upbeat, especially if the message is positive. Think how you can draw on the mission pillars, and add energy to the copy.

Positive alert

You've got good news, so don't be afraid to add some energy and colour to the copy. Keep it concise and punchy though — people don't have all day.

Negative alert

With negative alerts, clarity is key. Explain the situation as clearly and concisely as possible. And use everyday language that everyone will understand.

Warning alert

As with negative alerts, warning alerts need to be clear and concise. This isn't the time to be positive and playful.

Message

Message copy should:

clearly explain what the user needs to know and do
be brief — 1 or 2 short sentences is ideal, but 3 is ok if it makes the message clearer
be plain text — that means no links or other formatting (but small bits of bold are ok for
highlighting important details like dates or names)
have no title or paragraph breaks
be written in full sentences
have a full stop at the end

A warning alert with a short and clear message.

Action (optional)

Action copy should:

make it clear what will happen if the user taps or clicks
start with a verb — like ‘See’, ‘Add’, ‘Enable’
be around 1-3 words long
be in sentence case
have no full stop

Avoid using the phrase ‘Learn more’. It’s vague and doesn’t tell the user anything about where they’ll go if.

If you need to say ‘Learn more’ — like when linking to a help article — provide an aria-label on web. This gives more context to people using screenreaders.

Availability

Platform	Available
Android
iOS
Web		Web documentation