Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
Also, 200th question on UX Exchange! –  Philip Morton Dec 20 '09 at 10:27
2  
This question was asked nearly 2 years ago -- I'm wondering whether peoples' thoughts on usage of modals has evolved since then. –  Janel Oct 7 '11 at 10:10

7 Answers 7

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.

share|improve this answer
    
Good, and informative response. I would just like to clarify that points 2 and 4 are not actually modals. Modal dialogs force the users to interact with it before they can return to the parent application. Further reading: en.wikipedia.org/wiki/Modal_window –  Rich Feb 2 '13 at 2:02
    
Yes true, but I wanted to cover different ways the use case gets solved. –  Glen Lipka Feb 6 '13 at 19:09

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.

share|improve this answer
    
You can link to modals depending on how you construct them. –  noetix Nov 13 at 8:28

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!

share|improve this answer
    
John, out of curiosity did you ever get any data you'd like to share with us? –  Janel Jul 14 '10 at 13:28
    
If anyone has data around this please share. Thanks! –  Adriaan Jun 6 '12 at 13:39

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.

share|improve this answer

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.

share|improve this answer
1  
Your examples are specific things that I would NEVER put into a modal dialog. Updating data should never be put into something like that because there is no good way to show confirmation unless you then show a second modal dialog. –  Charles Boyung Dec 20 '09 at 17:56
1  
@Charles: That's simply not true. There are a few good ways to show a confirmation. For example one would be to show it on top of the page (like gmail does when sending or deleting a mail). A other option would be to update the modal dialog itself to show the confirmation. –  Phil Dec 20 '09 at 19:59
    
@Phil - do you actually think people see confirmations when you put them in those locations? I'm sorry, but no, they do not. –  Charles Boyung Mar 3 '10 at 6:33
1  
I agree with Charles - the confirmation message can be prominently displayed in either the original page or the lightbox (before the action is performed). If the message is missed it's because that's not been designed properly. –  tom Apr 27 '10 at 8:16
    
@charles - do you think people actually need to see the confirmations for things which they can safely assume have happened? By the way, there are other ways too, such as change-spotlight and self-healing-transition. –  Erics Oct 27 '11 at 22:35

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. :)

share|improve this answer

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.

share|improve this answer
    
I think there are many more usages for modal dialogs. It really depends on the website. For example I wireframed a messaging platform and used plenty of modal dialogs because like this you never have to leave the important content and it can't be linked or searched anyway because it's all behind a login. –  Phil Dec 20 '09 at 20:06

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.