JavaScript Dialogs Must Die
There are three types of JavaScript dialogs: prompts, alerts, and confirms. A prompt displays a field to collect information from the user, while alerts and confirms can only display messages. An alert box has a single button labeled “OK”, while a confirm provides both “OK” and “Cancel”.
Developers tend to be rather fond of these boxes because they are so easy to implement. Unfortunately, they are not optimal methods by which to communicate with the user. Let’s take a simple confirmation dialog for example. We’ll say that the user has just pressed a button that will delete something. Assuming there is no undo feature, best practice is to display a modal confirmation dialog that asks the user if they are sure they want to delete it. Because the button labels are not customizable, the message must be written as a question that can be answered with “OK” and “Cancel”. So, you end up with a message like “You’re about to delete something. Are you sure?”
I typically specify custom alert dialogs that are implemented as divs. This gives me the freedom to state the message as I see fit. More importantly, it allows me to customize the button labels to be more specific to the action the user is completing. Let’s face it, we’re often deluged with dialogs, and we tend to quickly dismiss them without reading them word for word. I’m much less likely to make a mistake if the button is labeled “Delete”, rather than “OK”.
Finally, the dialogs can become much more useful than simply confirming an action. For example, if the item being deleted is a node in a hierarchy containing other items, I could specify a dialog that provides specific options.
The node Foo has the following children:
Fee
Fi
Fo
Fum
(Delete Node and Children) (Delete Node Only) (Cancel)
The ease of implementing a JavaScript dialog is no excuse for poor usability. The flexibility to provide tailored messages, button labels specific to the actions they perform, and additional actions makes the extra effort worth it.
