Modal window
Encyclopedia
In user interface
design, a modal window is a child window that requires users to interact with it before they 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. On the Web, they are often used to show images in detail.
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.
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).
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.
Usability analyst Alan Cooper
opposes these claims arguing that restriction of user actions for the sake of usability is an error, since this leads to user frustration for no benefit. User input is necessarily entered at one place at a time, as it requires conscious attention anyway. Users can handle complex amounts of information, given that it's presented in a well-structured and logical design, by performing a preliminary general scanning and then centering their attention in the tool required to complete a goal; complex goals will often require switching attention from one point to another.
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.
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.
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.
Design should follow common practices in the current platform. Microsoft Windows
use 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 left-most command.
User interface
The user interface, in the industrial design field of human–machine interaction, is the space where interaction between humans and machines occurs. The goal of interaction between a human and a machine at the user interface is effective operation and control of the machine, and feedback from the...
design, a modal window is a child window that requires users to interact with it before they can return to operating the parent application, thus preventing the workflow
Workflow
A workflow consists of a sequence of connected steps. It is a depiction of a sequence of operations, declared as work of a person, a group of persons, an organization of staff, or one or more simple or complex mechanisms. Workflow may be seen as any abstraction of real work...
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
Dialog box
In a graphical user interface of computers, a dialog box is a type of window used to enable reciprocal communication or "dialog" between a computer and its user. It may communicate information to the user, prompt the user for a response, or both...
.
Modal windows are commonly used in GUI systems to command user awareness and to display emergency states. On the Web, they are often used to show images in detail.
Use cases
Frequent uses of modal windows include:- Drawing attention to vital pieces of information. This use has been criticised 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 passwordPasswordA password is a secret word or string of characters that is used for authentication, to prove identity or gain access to a resource . The password should be kept secret from those not allowed access....
in a loginLogging (computer security)In computer security, a login or logon is the process by which individual access to a computer system is controlled by identifying and authentifying the user referring to credentials presented by the user.A user can log in to a system to obtain access and can then log out or log off In computer...
process. Another example are file dialogFile dialogIn computing, a file dialog is a dialog box that allows users to choose a file from the file system...
s 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 patternInteraction design patternInteraction design patterns are a way to describe solutions to common usability or accessibility problems in a specific context. They document interaction models that make it easier for users to understand an interface and accomplish their tasks.-History:...
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 transientTransient screen
A transient screen is a pop-up screen such as a notification or dialog screen on a mobile phone.It covers only part of the screen as well as dimming the remaining area...
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.
Criticism
A modal window blocks all other workflowWorkflow
A workflow consists of a sequence of connected steps. It is a depiction of a sequence of operations, declared as work of a person, a group of persons, an organization of staff, or one or more simple or complex mechanisms. Workflow may be seen as any abstraction of real work...
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).
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
Lightbox (JavaScript)
Lightbox, and the newer Lightbox 2, is a JavaScript application used to display large images using modal dialogs. The script has gained widespread popularity due to its simple yet elegant style and easy implementation...
– 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.
Control of interaction flow
Modal windows are an integral part of common GUI toolkits and are frequently used when designing user workflow. Believing that too many active modeless dialogs can lead users into confusion, proponents of modal windows advocate reducing the amount of user input at a given time. This, they argue, can reduce user confusion, while minimizing the likelihood of an error as a result of having too many modeless windows open concurrently.Usability analyst Alan Cooper
Alan Cooper
Alan Cooper is known for his role in humanizing technology through his groundbreaking work in software design. Widely recognized as the “Father of Visual Basic," Cooper is the author of the books, About Face 3: The Essentials of Interaction Design and The Inmates Are Running the Asylum: Why...
opposes these claims arguing that restriction of user actions for the sake of usability is an error, since this leads to user frustration for no benefit. User input is necessarily entered at one place at a time, as it requires conscious attention anyway. Users can handle complex amounts of information, given that it's presented in a well-structured and logical design, by performing a preliminary general scanning and then centering their attention in the tool required to complete a goal; complex goals will often require switching attention from one point to another.
Unexpected interruptions
Unexpected alert dialogsAlert dialog box
An alert dialog is a colloquial term for a particular type of dialog box that occurs in a graphical user interface. It is also known as an alert box, alert window, error dialog, alert popup or plainly alert.The typical alert dialog provides information in a separate box to the user, after which...
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
Habituation
Habituation can be defined as a process or as a procedure. As a process it is defined as a decrease in an elicited behavior resulting from the repeated presentation of an eliciting stimulus...
will not protect from the dangerous action.
One proposed approach is to design every input element as a self-contained, task-oriented
Task analysis
Task analysis is the analysis of how a task is accomplished, including a detailed description of both manual and mental activities, task and element durations, task frequency, task allocation, task complexity, environmental conditions, necessary clothing and equipment, and any other unique factors...
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
Asterisk
An asterisk is a typographical symbol or glyph. It is so called because it resembles a conventional image of a star. Computer scientists and mathematicians often pronounce it as star...
, 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 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 GUI control 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.
Design should follow common practices in the current platform. Microsoft Windows
Microsoft Windows
Microsoft Windows is a series of operating systems produced by Microsoft.Microsoft introduced an operating environment named Windows on November 20, 1985 as an add-on to MS-DOS in response to the growing interest in graphical user interfaces . Microsoft Windows came to dominate the world's personal...
use standard controls for modal window dialogs with affirmative action buttons at the lower right of the panel. Mac OS X
Mac OS X
Mac OS X is a series of Unix-based operating systems and graphical user interfaces developed, marketed, and sold by Apple Inc. Since 2002, has been included with all new Macintosh computer systems...
uses modal sheets with affirmative action buttons being the left-most command.