When should you use a modal dialog box?

Question

There seems to be an increasing use of modal dialog boxes on the web, but when should you use them? Why would you choose to use them instead of inline controls or another page, and when should you completely avoid them?

Answer 1

My rule of thumb would be to use a modal window when there is a dead end for the functionality. For instance, when you update profile information, set up an account etc.

Answer 2

Modal dialogs should only be used when the user is required to make a choice or needs to know something specific before continuing. Warnings about how something that they are choosing to do can potentially cause problems (like deleting something permanently) and things like that.

Logging in to access a secured section of the site (or to post a comment on a page) is also okay, as long as you do it correctly.

Answer 3

The most general rules I could think of would be:

• Modal dialogs can make sense when they help you keeping the flow (i.e. you don't have to leave the page you're on).

• Don't use modal dialogs for things that should be linkable or searchable (as the URL doesn't change, it can't be linked externally and that includes search engines).

Edit: Also take a look at facebook, with a few exceptions I think they handle it pretty well.

Answer 4

I have found that modals are best to use when you are trying to isolate an action by the user. By using a modal you capture the focus of the user and this allows you to remove secondary distractions, such as navigation, utility links, images or other components that could distract from what you want the user to see or experience.

As far as when NOT to use a modal you will just have to use your best judgment on that one. I don't think you can apply strict rules to something like that.

Answer 5

I use a combination of inline editing, soft modals, full modals and floating windows.

1. Inline editing. If possible, always try to use this. It requires the least amount of context switching. It's quick.
2. Soft modals. Example: Windows Start Menus. They are rich controls and can have forms, but they spawn off a single menu and can be dismissed by clicking anywhere. These are good to use from menus.
3. Full Modals. These mask the entire screen and allow ONLY interaction with the modal. I use these when I want to focus the user on one task and not continue without filling in the form.
4. Floating Windows. These are good for status messages. They float on the UI but can be moved around and minimized. Use these for things that need to persist as you travel around the application.

I hope this is helpful.

Answer 6

This is a great question but the answers are too subjective. Does anyone have any quantitative evidence for any of these comments?

I am planning to use Modals in two ways as a continuation of inline editing and as a configuration or state change in a full Modal (changing your profile settings in your account screen) .

We intend to User test a prototype very soon so may have some data to present back!

Answer 7

Some people distinguish between dialog boxes and alert boxes (an alert box typically has only one or two buttons and no other inputs, whereas a dialog has input fields of some sort). And there is a school of thought that says you should never use modal alert boxes (See "Should alert boxes be avoided at any cost?".)

Putting a form into a modal dialog can be more responsive than putting it into a separate page, since the dialog box code can be contained entirely within the previous page -- no network traffic. However I have seen many users who are confused by modal dialogs. You'll want to test with end users. Of course. :)