Modal window

Source: Wikipedia, the free encyclopedia.

In

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 window. This avoids interrupting the workflow on the main window. Modal windows are sometimes called heavy windows or modal dialogs because they often display a dialog box.

User interfaces typically use modal windows to command user awareness and to display emergency states, though

mode errors.[1][2][3]

On the Web, they often show images in detail, such as those implemented by

The opposite of modal is

focus between them, treating them as palette windows
.

Relevance and use

Use cases

Frequent uses of modal windows include:

Modal sheets in Mac OS X

Many features that would typically be represented by modal windows are implemented as modal transient panels called "Sheets"[9] 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 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.[10]

Unexpected interruptions

Unexpected

mode errors[1] 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 doesn't protect from the dangerous action.[11] 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.

Problems

A modal window blocks all other

Mode error
). 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[5] – 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 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 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.[14]

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.

modal sheets with affirmative action buttons being the right-most command.[15]

See also

References

  1. ^ a b c d "Never Use a Warning When you Mean Undo". alistapart.com. Retrieved 2015-10-09.
  2. .
  3. ^ "Nitpicker / The Humane Interface". nitpicker.pbworks.com. Rule 1a. Retrieved 2015-10-09.
  4. ^ Quince UX patterns explorer. "Modal Panel". Archived from the original on 2010-02-27. The popular Lightbox JavaScript library uses a modal panel approach for showing the images
  5. ^ a b Jakob Nielsen, Alertbox. "10 Best Application UIs".
  6. ^ Joel Spolsky, User Interface Design for Programmers: Designing for People Who Have Better Things To Do With Their Lives
  7. ^ Jeff Atwood, Coding Horror: Teaching Users to Read
  8. ^ "Sheets - Presentation - Components - Human Interface Guidelines - Design - Apple Developer". Apple Developer. Retrieved 7 September 2022.
  9. .
  10. .
  11. ^ "How to Use Modality in Dialogs". Oracle Corporation.
  12. ^ "Modal Panel". quince.infragistics.com. Archived from the original on 2013-05-06.
  13. ^ "Modal Panel - Implementation". quince.infragistics.com. Archived from the original on 2013-05-06.
  14. ^ Inc., Apple. "Themes - macOS - macOS - Human Interface Guidelines - Apple Developer". developer.apple.com. Retrieved 18 September 2018. {{cite web}}: |last= has generic name (help)