Dialogs

by Zack on May 29, 2009

title_dialog

Modal dialogs, the ones that make it impossible to click anything else, are one of the most misused interface elements in the history of the computer. The mechanism is simple, but it can go so far wrong. However, you can make your dialogs easy to use by understanding the fundamentals and following some simple rules.

Are you sure?

Don’t forget the literal meaning of dialog: a conversation. Your dialog talks to the user. It tells them to stop what they were doing and answer a question or two. Most of the questions of the type are you sure? Are you sure you want to delete that file? Are you sure you want to close this application?

reformat_dialog

Simple question dialogs have the problem of habituation. You get used to them and just click OK or cancel without reading the dialog. Aza Raskin covers this issue well in his article Never Use a Warning When you Mean Undo. The basic idea is to make your actions undoable and remove the need for the dialog. Don’t ask are you sure, make it easy to change your mind.

For the rare times you really can’t undo then make sure the user has to stop and read the dialog by asking them a question that can’t be answered with a single button click. Would you like to reformat your hard drive? Type reformat below.

Dialogs as sentences

search_dialog

Some dialogs ask more complicated questions than are you sure. These dialogs for information like what you want to search for or where you want to save a file. You fill in the blank like Mad Libs. Each of these dialogs should make a complete sentence; they start with the title text and often end with OK. Sentences like Search system [for] ________. and Save file as ______. work well. You just need the user to fill in the blank.

Making a complete and simple sentence will make sure your dialogs remain complete and simple.

OK, Cancel, Yes, and No

delete_comment_dialog

All dialogs end with a button bar. They give the user a way to let you know they are done with the dialog. But these simple buttons can cause enormous confusion.

Dialog buttons are like a multiple choice test and you want to keep the answers unambiguous. Make sure every button is very different. Putting cancel and reset next to each other is confusing because they both seem similar. You can keep things clear and clear by making your dialog do just one thing. Even if you prompt the user for a few pieces of information they should all be along the same goal. When you want to add multiple buttons to a dialog button bar it is often a sign you should rethink the UI.

delete_post_dialog

While we’re on the topic of button names you should always make sure that the cancel button actually cancels the action. Never let the user get into trouble by pressing cancel.

Dialogs on the web

The introduction of JavaScript frameworks and better support from the browsers has made dialogs very popular in web pages. Most of the time dialogs in the web are a case of nifty. Most websites are documents and dialogs do not belong on documents. If the fundamental purpose of your website is showing people information then it shouldn’t have dialogs.

When you want to use a dialog in your website you should always ask yourself these questions:

Does it need to be a dialog? Don’t use a dialog when a new page or a link will do just as well.

Does it have to be modal? Not all questions are immediate. If the user can keep working then make the dialog mode-less or just create a new section in your page.

Is it expected? Dialogs are never helpful if they are unexpected. I won’t name names, but pages that interrupt you in the middle of reading an article fade out and then prompt you to subscribe are just annoying.

Dialogs are an easy way to ask straightforward questions, but only as long as they stay simple.

Leave a Comment

Your Comment

Your Comment Preview

Previous post:

Next post: