Guidelines for Using Modal Dialogs

A dialog (or dialogue) refers to a conversation between two people. In user interfaces, a dialog is a “conversation” between the system and the people interacting with the system, and often requests information or an action from the interaction.

Regular dialogs (windows) are nonmodal (or modeless). Sometimes these dialogs are fixed in a location but usually you can move the window, minimize it, etc. while it is open. You can ignore regular dialogs and continue to focus on your task.

A modal dialog is a dialog that appears on top of the main content of an interface and moves the system into a special mode that disables the main content until the person explicitly interacts with the modal dialog. Its purpose is to focus the interaction on one important task that is usually required before any other task can be complete. It is a power tool to ensure that the experience is ‘easy and obvious to do the right thing and hard or impossible to do the wrong thing’. Here are some guidelines:

Use modal dialogs for important warnings, as a way to prevent or correct critical errors.

Whenever there is a chance that work could be lost or that an action may have destructive, irreversible consequences, interrupt the task to avoid a disaster.

To determine what error is severe enough to warrant a modal dialog, consider the following:

  • Would the problem be easier or harder to correct if attention is taken away from the task? It is always good to prevent usage error before it happens, if possible. However, once the error was made, it may be easier to fix it if the error message is presented within the main content instead of in a modal dialog. For example, an error in a form should be reported on the page, next to where it occurred, so that you can refer to the error message while you fix the problem. But informing you that your computer will be restarted in 10 seconds could be displayed in a modal dialog, to make sure that you noticed the message.

  • Is the action irreversible? Irreversible action often results in the loss of information, which can be especially damaging for complex and time-intensive tasks. For example, failing to add an item to a cart might be unfortunate for an ecommerce business, but not irreversible to its customer while overwriting a file or failing to save changes to hundreds of slides are both irreversible actions, and, thus, an interruption is much needed, and often welcomed.

Use modal dialogs to request the entering of information critical to continuing the current process.

When missing information prevents the system from continuing a process, a modal dialog can prompt for that information.

For example, uses a modal window to interrupt the login information when that attempts to save an item to a list of favorites.

Uses modal dialogs whenever a task in which further steps are required before continuing. For example, when a there is an attempt to mark an item as a “favorite,” and the customer is not logged in, a dialog appears in order to gain the required information to conduct the desired action.

Use modal dialogs to ask for information that, when provided, could significantly lessen work or effort.

Modals can work effectively when the information being requested or presented is relevant or can streamline the completion of the current task.

In the case of a real-estate website, you can browse property listings without having an account or real-estate agent. However, when you attempt to contact an agent for a listing, the site displays a modal dialog asking you whether you already have an agent. This information is not critical to the immediate next step (contacting the listing agent), but it can still be valuable in streamlining future interactions. The dialog uses progressive profiling and presents one easy-to-answer question at a time. These questions are low-commitment and focused on relevant details.

Avoid modal dialogs for complex decision making that requires additional sources of information unavailable in the modal.

Modal dialogs should be used for short, direct dialogs. If a modal requires complex research or consult additional sources of information (potentially blocked by the modal), then it’s not the right UI element for that interaction.

In situations where the task is not critical, a nonmodal dialog might be appropriate. Nonmodal dialogs are less offensive than modal ones because they allow you to continue your activity and ignore them if they are irrelevant. However, they can still be disruptive, especially if they obscure important information on the screen or if they require too complex interactions. Moreover, some nonmodal dialogs do not translate well across devices and browsers — for example, a nonmodal window in Chrome on a desktop may become a modal one in Safari on an iPhone.

When it comes to deciding to use dialogs, consider the context and the workflow. Avoid unnecessarily interruptions and make it easy to solve problems and accomplish goals. If an organization wishes to make sustainable progress toward their business goals, their customers’ goals must be prioritized during these design decisions.

When it comes to modal dialogs, consider this: no one likes to be interrupted, but if you must, make sure it’s worth the cost. Fessenden, Therese. Modal & Nonmodal Dialogs: When (& When Not) to Use Them. Nielsen Norman