Best practices for designing effective confirmations

Best practices for designing effective confirmations

Confirmations ask a user to verify whether they want to proceed or cancel a requested action. They can help alleviate uncertainty about things that have happened or are about to happen, and can prevent users from making mistakes they might regret.

Do all actions need a confirmation?

No, not all actions warrant a confirmation or an acknowledgment as you should avoid overwhelming users. If you bombard them with confirmations for every single action they take, they will not read it and disregard the dialog completely, potentially making a mistake. Confirmations are often used for destructive actions, like deleting a file, or consequential actions, like publishing a page.

Best UX practices:

  • Make each option as clear as possible
  • Use a verb whenever possible instead of Yes or OK because your buttons will make much more sense if users only skim read the explanatory text or title. Additionally, the action buttons should clearly indicate the outcome of the action. Image Source: https://material.io/guidelines/components/dialogs.html#dialogs-alerts Image Source: Material Guidelines

  • Explain the outcome of the action in the body, making it valuable and relevant. For example, Deleting this photo will permanently remove it from your album called Disney World Holiday.

  • Make sure you stay consistent with your writing throughout your site or app in regards title case vs. sentence case. Don’t mix and match the two - you don’t want to appear inconsistent with your brand. John Saito wrote a good article all about making a case for letter case, which you should read.

  • From experience using cancel can in fact cause some confusion. When committing a destructive action, like discarding changes, users may mistake Cancel for the intended action instead of cancelling the confirmation dialog. Consider using a term like Go back or Not right now, which may be friendlier and clearer.

Using a term like **Go back** or **Not right now** may be friendlier and clearer than Cancel

Using a term like Go back or Not right now may be friendlier and clearer than Cancel.

  • Placing the secondary action button on the left and the primary action button on the right maps to the ‘Back’ and ‘Next’ button functions the user expects. When users click secondary action buttons, they expect the application to do nothing and take them back to their original screen like ‘Back’ buttons. When users click primary action buttons, they expect the application to do the action the button says, and take them forward to the next screen.

  • Placing the buttons together makes it easier for users to see both buttons too allowing users to efficiently compare both actions in a single glance to choose the best action to take.

  • Use Google Trends to help decide which terms to use if you are unsure. For example, should I use Sign in, Sign on, Log in, or Log on? Just enter all of these terms, separated by commas. Google Trends compares how often people search for these terms on Google.

Google Trends results

As you can see above sign in wins the battle here. People are more likely to use sign in when referring to this action, so if you want your words to match user expectations, sign in is probably a safer choice than the other options.

Conclusion

In some situations, when a user invokes an action in your app, it’s a good idea to confirm or acknowledge that action through text. By following the tips above you’ll be making a big difference to your user’s experience.

Neil Berry


Senior UX Designer @cafonline. Previously Senior Designer @newsfromfta. I blog about UX, design, and the latest tech.

Do you want to understand the best way to convert visitors to customers in 2018?

Let's design something incredible together.