👋🏽 We wrote a book! Order Wireframing for Everyone today →

Balsamiq

Toggle navigation

Alert Dialog Guidelines

Alert dialogs are pop-ups that allow for communication between the user and the system. This includes giving the user feedback about an action they are about to take or raising awareness around an issue.

Applies to:
Alert Box
Alert Box (Android)

Built-in alert dialogs

“Built-in” refers to the system’s default interface or controls. For example, iOS has different controls from Android, macOS, or Windows. So, built-in alert dialogs refer to the default system design of alert dialogs.

Android alert dialog

The built-in design of Android alert messages aligns the text to the left and places the buttons on the right.

iOS alert dialog

The iOS alert dialog center-aligns the text and draws clear lines between the buttons and the text.


Types of alert dialogs

There are 3 main types of alert dialogs, made up of 3 types of actions.

These actions are:

  • Primary action: This action continues or starts the desired journey. This can also be called a positive action.
  • Secondary or dismissive action: This action reverses or cancels an action started by the primary action. This is also called a negative action.
  • Tertiary action: The tertiary action will usually take the user on an indirect user journey. This is also called a neutral action.

Most alert dialogs have 2 types of explanatory text: a title and sub-copy. More advanced users will just look at the title copy, while newer users tend to look at both the sub-copy and title.

One action alert

This type of alert has only one button. It’s usually used when the user just has to acknowledge something or when the action they have to take is outside the realm of the device (e.g., connect to a charger). The system will usually use it to acknowledge that the user has read the alert and has dismissed it. This might be a primary or a secondary action, depending on the content of the alert. Examples of the button label include "Ok," and "Close."

Two action alert

This alert has 2 buttons. The primary action will usually be used to continue a journey or accept a permission. The secondary action is used to cancel or dismiss the action.

Common primary actions button labels include "Allow," "Ok," "Delete," "Accept," "Submit," "Yes." Common secondary actions button labels include "Don’t allow," "Decline," "Cancel," "Ignore," "No."

Three action alert

In a 3 action alert, the primary and secondary buttons are usually similar to those of 2 action alerts. The tertiary button is typically used to give the user more information or to postpone a notification.

Common tertiary actions are "Learn more" and “Remind me later."


Uses

Alert dialogs pop up as a result of a user’s action or because of a system issue. Here are a few of their more popular uses.

Permission

A permission alert will usually appear when an application is trying to access system information or another application. This should also let the user know if there are any unintended consequences from accepting it.

Example: When a social media app asks permission to use the phone’s camera.

Destruction confirmation

Before deleting anything, it’s good practice to give the user an extra layer of confirmation in case they made a mistake by hitting the "Delete" button the first time.

Example: You are going to delete an app.

System or network problem

Sometimes, an app will crash or lag due to a system or network issue. If something is going wrong, the system needs to send feedback to the user. Usually, there is nothing for the user to act on apart from acknowledging the issue.

Example: Maps can’t determine your location because of a network issue.

Awareness

This alert dialog appears when the system wants to let you know about an imminent problem. Ideally, you want to give the user something to action if possible. This could be part of the dialog itself (e.g., tapping a "Low power mode" button) or an external action (e.g., connecting your phone to a charger).

Example: Your phone lets you know that you have 20% battery left.


Best practices

There are a few best practices when it comes to alert dialogs.

Limit use

Most people find alert dialogs annoying at the best of times, so try to limit the number of times they are shown in a user journey.

Should be dismissable if appropriate

When designing alerts, make sure they are dismissible. Not having an obvious way to close an alert can frustrate and annoy users.

Use descriptive button names

Where possible, you want the button labels to describe the action they will perform. For example, while "OK" might be an appropriate label when the user merely needs to acknowledge something, it’s not user-friendly to use it in a delete confirmation.

Use clear language

Before writing any copy for an interface, you should always refer to your brand guidelines. As a general rule, your language should be clear and comprehensible to your users.

You can also consider using more informal words when needed. For example, Microsoft Windows Style and Tone guidelines suggest using "please" and "sorry" when it would be regarded as curt not to or when there is a severe issue or inconvenience for the user.


By Tess Gadd
Got questions or feedback? Email learn@balsamiq.com.