The Right Way to Design a Modal Confirmation Dialog
There are a few bad practices designers often commit on modal confirmation dialogs. If you don’t correct them, you’ll leave your users bewildered to where they cannot act with certainty.
Confirming data is essential when it involves monetary transactions and sensitive items. For instance, ordering a registration renewal sticker requires the user to verify their address. If there are typos, they’ll fail to receive the sticker and could face legal consequences. A modal confirmation dialog is needed to ensure that the address is correct.
A common mistake is to design the dialog as a “yes” or “no” question. Asking users, “Is this address correct?” only allows you to provide users with a “yes” and “no” button. These buttons do not have specific action labels that indicate what happens when the user clicks them. Instead, the dialog reads like a survey question.
It’s better to provide options that have a response to the confirmation. For example, a better response for “yes” is to say, “Address Is Correct.” A better response for “no” is to say “Edit Address” because if the address is incorrect, they need to go back and edit it.
Using task-oriented responses as labels allows users to confirm their address with less confusion and cognitive effort. There’s no question about what the labels mean or what the buttons will do.
It’s unnecessary to ask a question in the dialog if the title is task-specific. A title that says “Confirmation” is vague and fails to convey the specific task. However, if it says “Confirm Your Address,” the user knows what they’re doing in the modal. Instead of asking the user a question that makes them think, it’s telling the user to perform the task of confirming.
The way you display the user’s address also affects confirmation. Small-sized text in a plain format will blend in with the dialog text. As a result, it makes it harder for users to scan and spot typos in the address.
Increasing the font size and applying a medium font weight allows users to view the address clearly. Also, placing the text on an off-white background lets users focus better on the address, making typos easier to spot.
A good modal confirmation dialog uses task-oriented language. The modal title, dialog text, and button labels should all convey to users the task they’re performing and what data they’re confirming. Follow this best practice and you’ll enable users to act on your confirmation dialogs with certainty.
For more insightful design articles, get a subscription to the official UX Movement Newsletter on Substack