Modal window

In user interface design, a modal window is a graphical control element subordinate to an application's main window which creates a mode where the main window can't be used. The modal window is a child window that requires users to interact with it before it can return to operating the parent application, thus preventing the workflow on the application main window. Modal windows are often called heavy windows or modal dialogs because the window is often used to display a dialog box.

Modal windows are commonly used in GUI systems to command user awareness and to display emergency states, although they have been argued to be ineffective for that use. Modal windows are prone to produce mode errors.

On the Web, they are often used to show images in detail, such as those implemented by Lightbox library.

Relevance and usage

Use cases

Frequent uses of modal windows include:

• Drawing attention to vital pieces of information. This use has been criticized as ineffective because users are bombarded with too many dialog boxes, and habituate to simply clicking "Close", "Cancel", or "OK" without reading or understanding the message.
• Blocking the application flow until information required to continue is entered, as for example a password in a login process. Another example are file dialogs to open and save files in an application.
• Collecting application configuration options in a centralized dialog. In such cases, typically the changes are applied upon closing the dialog, and access to the application is disabled while the edits are being made.
• Warning that the effects of the current action are not reversible. This is a frequent interaction pattern for modal dialogs, but it is also criticised by usability experts as being ineffective for its intended use (protection against errors in destructive actions) due to habituation. Actually making the action reversible (providing an "undo" option) is recommended instead.

Modal sheets in Mac OS X

Many features that would typically be represented by modal windows are implemented as modal transient panels called Sheets on Mac OS X. Transient windows behave similarly to modal windows – they are always on top of the parent window and are not shown in the window list, but they do not disable the use of other windows in the application. Sheets slide out of the window's title bar, and usually need to be dismissed before the window can continue to be used, but the rest of the application will stay usable. Thus they create a mode inside the window containing them, but are modeless with respect to the rest of the application.

Control of interaction flow

Modal windows are common in GUI toolkits for guiding user workflow. Alan Cooper contends that the importance of requiring the user to attend to important issues justifies restricting the user's freedom and that the alternative would increase user frustration.

Unexpected interruptions

Unexpected alert dialogs are particular culprits of mode errors with potentially severe consequences. Usability practitioners prescribe that dangerous actions should be undoable wherever possible; an alert box that appears unexpectedly or which is dismissed by habituation will not protect from the dangerous action. A modeless infobar is increasingly seen as preferable to a dialog box because it does not interrupt the user's activities, but rather allows the user to read extra information in their own time.

One proposed approach is to design every input element as a self-contained, task-oriented interaction, guided by its own specific requirements rather than by the global state of the entire application. For example, required elements might be preceded with an asterisk, elements with invalid data might acquire a red border, and so on. With this approach, users actually benefit from seeing many input elements at once — they can enter data in a way that makes sense to them, instead of having all the other unrelated elements blocked until a predefined data-entry sequence is completed.

Design

Problems

See also: Assessment of modes in computer interfaces

A modal window blocks all other workflows in the top-level program until the modal window is closed, as opposed to modeless dialogs that allow users to operate with other windows. Modal windows are intended to grab the user's full attention. Users may not recognize that a modal window requires their attention, leading to confusion about the main window being non-responsive, or causing loss of the user's data input intended for the main window (see Mode error). In some more pathological cases, the modal window will appear behind another window controlled by the same program, potentially rendering the entire program unresponsive until the modal window can be located manually.

However, many interface designers have recently taken steps to make modal windows more obvious and user friendly by darkening the background behind the window or allowing any mouse click outside of the modal window to force the window to close – a design called a Lightbox – thus alleviating those problems. Jakob Nielsen states as an advantage of modal dialogs that it improves user awareness: "When something does need fixing, it's better to make sure that the user knows about it". For this goal, the lightbox design provides strong visual contrast of the dialog over the rest of the visuals. The lightbox technique is now a common tool in website design.

Modal windows are commonly implemented in ways that block the possibility to move, minimize, iconify, or push them back; and they grab input focus, which often prevents use of a system's cut, copy, and paste facilities. This can interfere with the use of their parent applications by blocking access to other windows and data within the same application, particularly in cases where the modal window is requiring the user to input information only available in one of the windows it's covering.

For users using virtual work areas larger than their actual screens, modal windows can cause further undesirable behavior, including creating the modal on a portion of the virtual screen not currently on the display, or abruptly switching the display from what the user was working on to an entirely different section.

Modal windows tend to create an abrupt diversion of text input, especially typed input intended for other programs, into themselves. Further, modals usually interpret actuation of the enter key (or in rare cases the presence of a newline in pasted input) as a cue to accept the input and process it, or in rare cases may intercept a mouse click that was intended for a different, suddenly covered application. Such interception, called focus stealing can compromise privacy and security practices, as well as capture inappropriate, out-of-context input which can have undefined, arbitrary results in the program which created the modal window.

Modal windows, depending on the specifics of implementation, can be examples of violations of the principle of least surprise.

Recommendations

See also: Mode (computer interface) § Design recommendations

Modal dialogs are part of a task flow, and recommendations are given to place them where the focus is in that flow. For example, the window can be placed near the graphical control element that triggers its activation.

Using a semi-transparent dark background can obscure the information in the main window, so it's advised to be used only when that information would be distracting. If a semi-transparent background is desired it can be made less intrusive by having the whole background area function as a close button, this is standard on most mobile operating systems and avoids the user feeling trapped and makes modal windows feel less like malicious pop-ups.

Design should follow common practices in the current platform. Microsoft Windows uses standard controls for modal window dialogs with affirmative action buttons at the lower right of the panel. Mac OS X uses modal sheets with affirmative action buttons being the right-most command.

See also

• Application posture
• Mode (computer interface)