In
user interface
In the industrial design field of human–computer interaction, a user interface (UI) is the space where interactions between humans and machines occur. The goal of this interaction is to allow effective operation and control of the machine fro ...
design, a modal window is a
graphical control element subordinate to an application's
main window.
A modal window creates a
mode that disables user interaction with the main window but keeps it visible, with the modal window as a
child window in front of it. Users ''must'' interact with the modal window before they can return to the
parent
A parent is either the progenitor of a child or, in humans, it can refer to a caregiver or legal guardian, generally called an adoptive parent or step-parent. Parents who are progenitors are First-degree relative, first-degree relatives and have ...
window. This avoids interrupting the
workflow
Workflow is a generic term for orchestrated and repeatable patterns of activity, enabled by the systematic organization of resources into processes that transform materials, provide services, or process information. It can be depicted as a seque ...
on the main window. Modal windows are sometimes called heavy windows or modal dialogs because they often display a
dialog box
In computing, a dialog box (also simply dialog) is a graphical control element in the form of a small window that communicates information to the user and prompts them for a response.
Dialog boxes are classified as " modal" or "modeless", dep ...
.
User interfaces typically use modal windows to command user awareness and to display emergency states, though
interaction designers argue they are ineffective for that use.
[ Modal windows are prone to ]mode error
In user interface design, a mode is a distinct setting within a computer program or any physical machine interface, in which the same user input will produce perceived results different from those that it would in other settings. Modal interfac ...
s.
On the Web, they often show images in detail, such as those implemented by Lightbox library, or are used for hover ads.[
The opposite of modal is ]modeless
In user interface design, a mode is a distinct setting within a computer program or any physical machine interface, in which the same user input will produce perceived results different from those that it would in other settings. Modal interfac ...
. Modeless windows don't block the main window, so the user can switch their focus
Focus (: foci or focuses) may refer to:
Arts
* Focus or Focus Festival, former name of the Adelaide Fringe arts festival in East Australia Film
*Focus (2001 film), ''Focus'' (2001 film), a 2001 film based on the Arthur Miller novel
*Focus (2015 ...
between them, treating them as palette window
The graphical control element palette window, also known as utility window or floating palette, floats on top of all regular windows and offers ready access tools, commands or information for the current application.
Applications use palette w ...
s.
Relevance and use
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
A password, sometimes called a passcode, is secret data, typically a string of characters, usually used to confirm a user's identity. Traditionally, passwords were expected to be memorized, but the large number of password-protected services t ...
in a login
In computer security, logging in (or logging on, signing in, or signing on) is the process by which an individual gains access to a computer system or program by identifying and authenticating themselves.
Typically, user credential ...
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 some usability experts criticize it as ineffective for its intended use (protection against errors in destructive actions) due to habituation
Habituation is a form of non-associative learning in which an organism’s non-reinforced response to an inconsequential stimulus decreases after repeated or prolonged presentations of that stimulus. For example, organisms may habituate to re ...
. They recommend making the action reversible (providing an "undo" option) 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 windowsthey 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 must be dismissed before the user can continue to work in the window, but the rest of the application stays usable. Thus they create a mode inside the window that contains 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 error
In user interface design, a mode is a distinct setting within a computer program or any physical machine interface, in which the same user input will produce perceived results different from those that it would in other settings. Modal interfac ...
s[ with potentially severe consequences. Usability practitioners prescribe that dangerous actions should be undoable wherever possible; an alert box that appears unexpectedly or is dismissed by ]habituation
Habituation is a form of non-associative learning in which an organism’s non-reinforced response to an inconsequential stimulus decreases after repeated or prolonged presentations of that stimulus. For example, organisms may habituate to re ...
doesn't 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
The asterisk ( ), from Late Latin , from Ancient Greek , , "little star", is a Typography, typographical symbol. It is so called because it resembles a conventional image of a star (heraldry), heraldic star.
Computer scientists and Mathematici ...
, 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.
Problems
A modal window blocks all other workflows
Workflow is a generic term for orchestrated and repeatable patterns of activity, enabled by the systematic organization of resources into processes that transform materials, provide services, or process information. It can be depicted as a sequen ...
in the top-level program until the modal window is closed, as opposed to modeless
In user interface design, a mode is a distinct setting within a computer program or any physical machine interface, in which the same user input will produce perceived results different from those that it would in other settings. Modal interfac ...
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 user interface design, a mode is a distinct setting within a computer program or any physical machine interface, in which the same user input will produce perceived results different from those that it would in other settings. Modal interfac ...
). In severe cases, the modal window appears 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 by darkening the background behind the window or allowing any mouse click outside of the modal window to force the modal 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 that window back, and they grab input focus, which often prevents use of a system's cut, copy, and paste
Cut, copy, and paste are essential commands of modern human–computer interaction and user interface design. They offer an interprocess communication technique for transferring data through a computer's user interface. The ''cut'' command rem ...
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
On computer keyboards, the enter key and return key are two closely related keys with overlapping and distinct functions dependent on operating system and application.
Functions
The return key has its origins in two typewriter functions: c ...
(or in rare cases the presence of a newline
A newline (frequently called line ending, end of line (EOL), next line (NEL) or line break) is a control character or sequence of control characters in character encoding specifications such as ASCII, EBCDIC, Unicode, etc. This character, or ...
in pasted input) as a cue to accept the input and process it—or, in rare cases, may intercept a mouse click intended for a different application that has suddenly been covered. Such interception, called focus stealing (or stealing focus) can compromise privacy and security practices, as well as capture inappropriate, out-of-context input that can cause undefined, arbitrary results in the program that generated the modal window.
Depending on the specifics of implementation, modal windows can violate the principle of least surprise.
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 could be placed near the graphical control element that triggers its activation.
Using a semi-transparent dark background can obscure information in the main window, so it is best used only when that information would be distracting. A semi-transparent background can be made less intrusive by having the whole background area function as a close button: this is standard on most mobile operating systems, avoids making the user feel trapped, and makes modal windows feel less like malicious pop-ups.
Design should follow common practices in the platform the program is running on. Microsoft Windows
Windows is a Product lining, product line of Proprietary software, proprietary graphical user interface, graphical operating systems developed and marketed by Microsoft. It is grouped into families and subfamilies that cater to particular sec ...
uses standard controls for modal window dialogs, with affirmative action buttons at the lower right of the panel. Mac OS X
macOS, previously OS X and originally Mac OS X, is a Unix, Unix-based operating system developed and marketed by Apple Inc., Apple since 2001. It is the current operating system for Apple's Mac (computer), Mac computers. With ...
uses modal sheets with affirmative action buttons being the right-most command.
See also
* Application posture
* Popover (GUI)
References
{{DEFAULTSORT:Modal Window
Graphical user interface elements