The Nuclear Option: An alternative to confirmation dialogs…

Yesterday, we identified a function that is needed on an admin web UI, but which has dire consequences. The user needs to “activate a model”… but doing so moves the process into another step of the workflow, in an irreversible manner. It was important to make sure that users didn’t click it prematurely.

My manager said: “We should do a little confirmation dialog for that one…”
My blood started boiling.

Confirmation dialogs are one of the most hated interaction methods. You’ve run into them, from the classic “Are you sure you want to delete this file?” , to long-winded technical explanations of consequences, that scare you to no end.

To me, it sounds as stupid as saying: “Doing this will do what you wanted it to do, are you sure?”

Of course, an accidental click can sometimes cause irreparable damage. But the confirmation dialog is a poor way to deal with that. Alan Cooper has a delicious section on that topic in his book “About Face“. There’s many problems with them, the biggest one being that users learn to dismiss them. He tells the classic story:

User: Delete this file.
System: Are you sure?
User: Yes, you idiot! Do as I say!
System: Are you really sure?
User: DUH! YES!
System: The file is gone forever.
User: Oops!

The issue here is that the confirmation dialog becomes part of the action, in the user’s mind. After dealing with it a few times, the user learns to consider them an annoyance that must be squashed immediately, not a time to reflect and reconsider. So while confirmation dialogs are, for the UI designer, a tried and tested way to cover one’s ass, they don’t really help the end user avoid mistakes.

Cooper’s conclusions are:

• Don’t use confirmation dialogs
• Allow undo’s instead

And I agree with him. But there isn’t always a budget for coding in undo for every action. And in a multi-user, real-time online system, undo isn’t always possible. So what is one to do?

Looking into real-life examples, I found the flip-up switch cover, as used in nuclear plants and fighter jets, to be the most compelling metaphor. These switches are hidden under a red plastic cover that can be flipped up before the switch can be activated. It’s pretty easy to re-create this kind of behavior with Javascript, and the visual aspects can go a long way in communicating the non-trivial nature of the button.

Here’s what I came up with:

[Click here to reset]

Besides being fun, I think this solves the problem nicely:

• It takes two clicks, on the same spot, to activate.
• A mouseout will flip the cover back down.
• The animation subtly reinforces that this is a special case.

Feel free to steal the inline javascript code on this page, but not the graphics.

Please, let me know your thoughts!