app design confirmation dialog box

Are you sure you want to do this? Microcopy for confirmation dialogues

Confirmation dialogue boxes usually pop up after users take some kind of significant action. The messages are there to verify that users truly intended to perform that action, and are (fully) aware of its consequences.

A confirmation dialogue box basically loops the user back to the moment of choice and makes them take the same action, again. This is a friction we deliberately create because it ultimately serves the user's best interest.

Reconfirm vs. Undo

Sometimes we can give users c redit for knowing exactly what they're doing. In these times, an undo functionality, available for a few moments after the action is made, serves the user better than a confirmation box.

The undo option comes in the form of a toast message that appears at the bottom or the top of the screen and fades out after a few seconds, so it doesn't require additional action or even attention from the user.

Here's an undo toast from Google Calendar. It pops up after deleting an event without any other participants. The second undo toast pops up when moving pictures to the bin in Google Photos:

This one is from Dropbox:

For more inspiration take a look at this post by Keren Rijensky, showing other UX models for deleting.

When to use a confirmation box and when an undo toast

I posted this question to the WE — Women Experience Facebook Group and got some great answers (thanks ladies!). I've summarized them here as four key considerations:

1. Reversibility — when users are about to take an irreversible action, like permanently deleting an item with no option to restore it, or sending a report that can no longer be changed, we should ask them in advance if they understand what's about to happen. But if the action is reversible, for example moving a deleted item to a trashcan folder that the user can easily restore later, we can only use an undo toast.

2. Severity — when users take an action that will result in critical consequences, or a huge loss that will have system-wide and/or long-term repercussions, we should certainly stop them and ask if this is truly what they intended to do. On the other hand, if it's a local action with short term consequences, we can consider letting users go ahead with it without getting in their way.

3. Complexity — when users are about to take an action that will result in complex consequences, for example, affecting the configuration of other devices, we should use a pop up message beforehand. By doing so, we give users the opportunity to read, consider and understand the consequences of what they're about to do. If the consequences of an action are super-easy to understand, short or even non-existent, we can consider a short and sweet toast message.

4. Frequency — frequent actions, like managing emails, will quickly become annoying if users are asked to reconfirm every step. On products or features they use daily, there is also a low probability that users will accidentally take an unintended action. On the other hand, in cases of infrequent actions users don't quite remember how to use, a confirmation box can be a safer solution than an undo toast that can be easily missed.

In addition to these categories, some products also allow alternatives for an action, instead of canceling it altogether (thanks for this input, Efri Eltahan). I'll soon show some examples.

The anatomy of a confirmation dialogue box

A confirmation dialogue box includes two or three elements:

Headline
One or two explanation lines (optional)
Buttons

Element #1: the headline

The headline should ask (or inform) about one main action we'd like to reconfirm.

It should be as simple as possible, and most importantly clear and unambiguous.

In most cases (though, not in all), the headline should be phrased as a binary dichotomous question, with two options that are distinguishable from one another, and easy to choose between: Yes/No, Stay/Leave, Continue/Go Back.

It will really be helpful to already think about the buttons at this stage and make sure that the question we ask in the headline has two good, unambiguous answers to use later as copy for the buttons.

Don't settle for a generic headline like Warning or Are you sure.

Be as specific as possible regarding the action at hand.

Avoid useless introductions in your confirmation boxes, like Do you want to…, This action will…, and again, Are you sure.

Start off with what's important.

This is an excellent example from Twitter, clear cut and simple:

Why is it important to remove redundant opening lines?

1. We're delaying users by adding an extra step, so we should be succinct in phrasing and use a language that's quickly and easily understood — Asking Are you sure adds that unrequired extra layer of complexity (even a bit on the emotional level).

2. To keep the message straightforward — these actions might have significant consequences, therefore the wording should be clear, straightforward and unequivocal. Any additional wording but the main question will blur the key message.

3. We shouldn't undermine the users' confidence in the product, or in themselves — these questions imply the users might not really know or understand how to handle the product.

4. Because they don't add any value.

Continue with cancellation

Notice how the word Cancel is very ambiguous in actions related to deleting or removing.

This is especially true when accompanied by words like Undo or Delete, because of the double negative. It's not clear what is canceled: the action, or the cancellation of the action. A better option might be Back, Stay, No, Leave, Quit, or any other action that is instinctively clear in context.

The word Continue can also be too generic and unclear, so try to be accurate and mention a specific action.

Element #2: the explanation (optional)

If you don't have anything new to say in addition to the headline, don't force an explanation.

Unfortunately, many systems use only one template for confirmation boxes, containing all three elements. This forces writers to add an explanation even when it's not necessary. Start with creating two templates — one with an explanation line and one without — and use them as needed. If you really can't change the system, at least don't repeat yourself. For example:

**When should you use an explanation**

When users take an action that triggers other actions they should know about. For example:

Deleting linked items — when a user deletes an item, but perhaps doesn't know that this will delete additional items somehow linked to it.

Deleting from other accounts — when a user deletes an item from their own account, but perhaps doesn't know that it will be deleted from the accounts of others in their team.

Deleting from other devices — when a user deletes an item stored in the cloud, perhaps they don't realize that it might also be deleted from all other locations synchronized to the cloud (and if the confirmation box isn't clear enough about it, they'll forever delete their month-long vacation photos from Spain, including all the backups they were busy running the whole time. True story).

Contradicting actions — when a user modifies a setting, without necessarily realizing that it contradicts another setting and will change that one as well.

Another common example is exiting/closing without saving. If a user exits an uncompleted form or in mid-process of creating a new item, they may not know that the work they put in so far will simply be deleted, and they'll have to start over.

For example, in the following box, a user has to select at least five topics of interest before using a news app. If they select less than five and leave, the topics selected so far will be deleted. In this case, you should make them aware of the consequences:

The more critical and less reversible the action, the more attention you should give to the explanation element. Make sure to also use design features (such as colors and spaces) to nudge users to read what's important.

Here is a good example from Typeform:

In recap, if your users may not be aware of the consequences of the action they are about to take — add an explanation that clearly tells them what's going to happen.

Merging the headline and the explanation

You should assume users only read the headline and what's on the buttons. When there are significant consequences for an action, and you're concerned users might skip the explanation, include it in the headline. Alternatively, you could change the order and start with the explanation. For example:

Delete the folder and all its files?
Your information will not be saved. Leave anyway?
These photos will be deleted from all locations synchronized, including your device's photo gallery. Delete pictures permanently?

Forever and ever, to the end of eternity

If an action is irreversible, say it. Users are accustomed to recycling bins and other solutions that save them from their own hasty decisions, so if you don't offer such a solution — clearly state that the action is irreversible, forever and ever, without the option to undo, go back or restore. You should already mention it in the headline using clear words such as Forever and Permanently.

Typeform's example shown above is an excellent example of this principle.

YouTube even requires an active confirmation: the delete button is disabled until you check a box.

Have a better alternative? This is the time to offer it

If you believe the user is unnecessarily taking a destructive action, or an action unsuited for their purposes — a confirmation box is a right time and place to inform them about it.

Take a look at this example from Facebook:

Element #3: buttons

When creating buttons for confirmation dialogue boxes, follow these three guidelines:

1. Make them highly distinguished from one another, and as clear as possible

The buttons should clearly show two distinctly different options, that users can't mix up. Each should be crystal clear on its own. If the headline is well phrased, it will be much easier to present two dichotomous responses to the question at hand.

This example from AVG is just perfect:

2. Add context

If you only write Yes and No or just Continue and Cancel on the buttons, it might be enough for users that read the headline and/or the explanation, but it will not be clear (and even slightly confusing) for users that want to skip and move forward (and let's be honest — most of us are like that).

It's best to add the full context, at least on the button of the main action: Yes, end parking; Leave anyway; Yes, delete; Stop following; Yes, send, etc.

If the headline is a Yes/No question, I personally prefer to always add a Yes on the button before the verb (Yes, send) or the word Anyway afterward (Send anyway). Of course, you can also use just the verb (Send).

The following hilarious confirmation box is from Forest, a Chrome extension for preventing procrastination caused by browsing time guzzling websites during your work. The full context I added to the button (on the right) not only makes it clearer but also adds an emotional obstacle to procrastination. Because come on, who wants to deliberately kill a cute little tree? Also, the new headline is more direct, as discussed earlier in this post.

Adding context will also benefit users that are more familiar with the system. When the button presents the full context of the question, we save them the need to read the same headline over and over again.

This is the confirmation box that pops up when you delete a picture from the Galaxy photo gallery. I only need to read the main button and nothing else:

A third advantage is that words that go beyond Yes/No or Cancel/Confirm stop the users, make them pause and contemplate what they're about to do, which is a good way of preventing reckless-intuitive behavior. It's enough to add Leave to the word Yes, and you've made the user stop for a millisecond longer and rethink the action.

3. To help users easily connect the headline and the buttons, make sure to use the same verb in both

The next example from Google Photos teaches us two more principles we should keep in mind when working on confirmation dialogue boxes:

1. Continuity — take into account the wording on the button that led to the confirmation box in the first place, and create continuity by using the same wording. In this case, users click a button called Empty bin, and the confirmation box should include the word Bin for continuity.

2. Emphasize what really matters — what matters in this action is not emptying the bin, but permanently deleting everything in it. That's why it's important that the button will emphasize deleting more than emptying, and perhaps a more elegant solution altogether is unifying the language and calling it Delete bin content instead of Empty bin.

A final example for conclusion

Here's an example of a change across all three elements of a confirmation box:

The new headline — asks about a specific action in a clear way.

The new explanation — tells the users what are the consequences of their action.

The new buttons — are distinguished from one another and include the context.