Should there be a difference in the relative sizes of the buttons in a confirmation dialog?

Question

I understand the idea behind having the more likely to be used action on a page slightly larger or in a different style in order to guide the user to it (for example having a button for save but a small text link for cancel).

When say an administrator hits delete I have a confirmation dialog appearing asking if they are sure they want to do that and presenting them with two options, 'Yes, Delete this' and 'No, Keep this'. At the moment these are the same size and style and therefore the same weight on the page.

I was wondering if that should be the case or should I assume that the administrator is not an idiot and that if they have hit delete confirming this action is the most important part of his next step and therefore should be given a greater weighting on the page?

Answer 1

Luke Wroblewski wrote an article called Primary & Secondary actions on web forms that talks specifically about this problem. His data is based on research from eye-tracking studies.

The conclusion is basically that there should be differences in visual weight between the two so that you can interpret, at a glance, which call to action is more significant. He also talks a bit about positioning and order.

As for which button should have more weight, it's up to you to determine the situation. It's usually good practice to be very conservative about buttons when dealing with CRUD operations like deleting something, but you probably know best (or you should test) which situation is more likely to occur. If deletion happens more frequently, then perhaps it should be the primary action.

See Michael's answer below for some good references to platform guidelines which specify how you should decide which should be the primary action.

For more discussion on similar issues with buttons, see these questions:

• Submit a Button and Cancel a Link… Too Confusing?
• OK/Cancel on left/right
• Default button: OK or cancel?

Answer 2

If this is a desktop thick-client app, or it’s important to be consistent with desktop apps, then the Windows 7 UX guidelines specify that for risky actions, the most visually prominent button should be the “safe choice” (page 384). Specifically, the safe choice should be the default button, which is both more visually prominent than other buttons, and also activated by the Enter key. Similarly, Apple’s HIG says the most prominent button should that which “represents the action that the user is most likely to perform if that action isn’t potentially dangerous. [emphasis in original].” It specifically recommends against making a button prominent “if it causes a loss of user data” (p245).

So, the more prominent button should be "No, Keep This," right?

On the other hand, I have to agree with you that chances are the user is not an idiot and 90%+ of the time they really want to delete the object. The result is that users will get in the habit of clicking the confirm button of your confirmation message without really thinking or even reading the message, a habit many users already have. That defeats the purpose of having the message in the first place. Furthermore, with the exception of slips-of-the-mouse, users often don’t know that they’re making a mistake until after the action is committed and they see the result in the parent window (e.g., “Oops. Deleted the wrong thing”). Such confirmations do little other than waste user effort and teach bad habits.

If at all possible don’t have any confirmation for delete. Instead, have a clear and easy way to undo deletes.