45

What exactly is a modal dialog window and when should you use it? Are there certain cases where you should refrain from using one?

Improve this question

6 Answers 6

Reset to default
46

A modal dialog is a window that forces the user to interact with it before they can go back to using the parent application. A great example of this would be a prompt for saving, or the "open file" dialog.

enter image description here

They are often used when a user is forced to make an important decision. Say you were working on a document in Microsoft Word, and you chose to exit Word before saving. A modal dialog would pop up and ask you to either Save, Don't Save, or Cancel. Until you make your decision you cannot use the application, and it will not close.

Improve this answer
2
  • Side question - how do most devs pronounce 'modal' in this respect? Is it pronounced the same as 'model' in model view controller or is it 'moe-dal'?
    – Kyle Vassella
    Nov 21, 2017 at 23:21
  • 3
    Pronounced moe-dal not model
    – Matt Rockwell
    Nov 30, 2017 at 20:29
15

I agree with Matt that a file dialog should be a modal dialog.

Modal dialogs should be used when the user takes an action that needs additional information to be completed correctly. The print dialog, is also a good example. Or the 'options' dialogs in loads of programs.

When to use modal dialogs is a bit tricky to define, but to me it should be used sparingly, and avoided whenever possible. Look at Fraser's example of the Facebook image loader... that's not necessary as it can be done asynchronous.

Rule of thumb: whenever additional info is needed to complete an action.

Improve this answer
4
  • 3
    Definately to be avoided unless absolutely necessary - which they are sometimes, but make sure you can justify them. And make sure there is a cancel option.
    – Schroedingers Cat
    Sep 28, 2011 at 15:47
  • From a technical point of view, it is always possible to avoid. Even the print dialog could be perfectly made modeless. Which would in fact be very awkward. I think it should be exactly the other way around. Make a dialog modeless if it has added value to be able to continue working with the application.
    – Bart Gijssens
    Sep 29, 2011 at 12:23
  • @BaGi, maybe you can, but if it becomes awkward, the UX goes down. We have to apply logic to each individual situation (and experiment).
    – GUI Junkie
    Sep 29, 2011 at 12:34
  • Modal file dialogs are very awkward IMHO. I often want to use information from a web page (or whatever) for the filename of the to-be saved object. E.g. article titles and authors, because pdfs/images/etc will often just have semi-random identifiers as default filename. A modal dialog box prevents access to this information, for what reason?
    – BlackShift
    Apr 16, 2018 at 9:23
13

Matt already said what a modal dialog is.

As to when it should be used: The rule of thumb is "When no other action makes sense until the user completes that dialog". Read carefully, it does not talk about what you wish the user to do! Many dialogs in Mac are not modal where their counterparts in Windows are modal. This is not to say that Mac is better, but to say that many dialog designers needlessly force the user to complete an action that the user might want to postpone until she is ready.

Examples: 1) a SSH program requires the password to connect to the server. That may be implemented via a modal dialog, though you could argue that opening the options configuration makes sense whether the user is connected or not. A judgement call really.

2) A multi-tabbed browser should not implement HTTP 401 basic authentication via a modal dialog. A user may well want to open another tab to read the password from an activation email.

3) A print dialog in a multi-document interface should not be modal. If the user wants to print two documents, one with 1000 pages and one with 5, but wrongly starts with the 1000 page document, you should not require her to cancel the dialog (and all settings she gave) just so she can print the smaller job first.

Improve this answer
1
  • 1
    Mac OS X's Sheets are a great example of your third point. They're document-modal -- you can't do anything else in that document until you finish the dialog -- but since they're attached to the window, you can still interact with other documents even in the same application.
    – SilverWolf
    Dec 2, 2018 at 22:48
3

Matt answered the question as to what it is. As to when to use it, it's useful when you need the user to focus on one task and one task alone. On the web, a modal is often centered on the screen with the rest of the page being grayed to focus attention on itself and visually imply that the background won't be used until you complete this modal task.

Where they shouldn't be used is somewhat highly dependent on context of your particular project. Where I've seen it abused is when it's used as a replacement for a normal page flow. Example where a user may trigger a task on the main page to launch a modal that then makes an AJAX form to load a form that then steps through 3 modal screens before finishing. In that example, sending the user to a separate page was probably the better option.

Improve this answer
0

The modal dialog is a secondary window that opens on the main one. In order to proceed further with a set of task, the user has to interact with it in order to return back to main window.

For reference: https://uxplanet.org/5-essential-ux-rules-for-dialog-design-4de258c22116

http://uxmovement.com/forms/best-practices-for-modal-windows/

Improve this answer
-1

A modal dialog window is like a popup except it occurs within the browser window unlike a popup which "pops out" of the screen. A modal dialog window also traditionally have an overlay between itself and the content of the web page in order to give the modal window more prominence.

They can be used for a variety of different things but usually when the user will want to return quickly to the page the modal window came from.

See below for an example of Facebook's style modal window.

enter image description here

Improve this answer
4
  • 4
    That is not a modal dialog - it is a modal progress bar. A dialog requires interaction before finishing.
    – Schroedingers Cat
    Sep 28, 2011 at 15:48
  • 4
    also you're mixing a bit pop-up and modal dialog. modal dialogs existend long before the web, no need to explain them in a web-only context
    – Erion
    Sep 28, 2011 at 20:35
  • 2
    Modal dialog and a modal progress bar are the same except of the content. I wasn't drawing attention to the progress bar, just the styling. I'm not mixing pop-ups and modals. If you read my post again you'll may understand it better.
    – Fraser
    Sep 29, 2011 at 13:45
  • 1
    Misinformed answer. In agreement with Schroedingers Cat and @Erion on this.
    – DigiKev
    Jan 21, 2012 at 11:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.