Modal window

Last updated

In user interface design for computer applications, a modal window is a graphical control element subordinate to an application's main window.

Contents

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 interaction designers argue they are ineffective for that use. [1] Modal windows are prone to mode errors. [1] [2] [3]

On the Web, they often show images in detail, such as those implemented by Lightbox library, or are used for hover ads. [4] [5]

The opposite of modal is modeless . Modeless windows don't block the main window, so the user can switch their focus between them, treating them as palette windows.

Relevance and use

Use cases

Frequent uses of modal windows include:

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 alert dialogs are particular culprits of 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 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. [12] Modal windows are intended to grab the user's full attention. [13] 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 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. 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. [15]

See also

Related Research Articles

<span class="mw-page-title-main">Graphical user interface</span> User interface allowing interaction through graphical icons and visual indicators

A graphical user interface, or GUI, is a form of user interface that allows users to interact with electronic devices through graphical icons and visual indicators such as secondary notation. In many applications, GUIs are used instead of text-based UIs, which are based on typed command labels or text navigation. GUIs were introduced in reaction to the perceived steep learning curve of command-line interfaces (CLIs), which require commands to be typed on a computer keyboard.

<span class="mw-page-title-main">History of the graphical user interface</span>

The history of the graphical user interface, understood as the use of graphic icons and a pointing device to control a computer, covers a five-decade span of incremental refinements, built on some constant core principles. Several vendors have created their own windowing systems based on independent code, but with basic elements in common that define the WIMP "window, icon, menu and pointing device" paradigm.

<span class="mw-page-title-main">Operating system</span> Software that manages computer hardware resources

An operating system (OS) is system software that manages computer hardware and software resources, and provides common services for computer programs.

<span class="mw-page-title-main">User interface</span> Means by which a user interacts with and controls a machine

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 from the human end, while the machine simultaneously feeds back information that aids the operators' decision-making process. Examples of this broad concept of user interfaces include the interactive aspects of computer operating systems, hand tools, heavy machinery operator controls and process controls. The design considerations applicable when creating user interfaces are related to, or involve such disciplines as, ergonomics and psychology.

AppleScript is a scripting language created by Apple Inc. that facilitates automated control over scriptable Mac applications. First introduced in System 7, it is currently included in all versions of macOS as part of a package of system automation tools. The term "AppleScript" may refer to the language itself, to an individual script written in the language, or, informally, to the macOS Open Scripting Architecture that underlies the language.

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 removes the selected data from its original position, and the copy command creates a duplicate; in both cases the selected data is kept in temporary storage called the clipboard. Clipboard data is later inserted wherever a paste command is issued. The data remains available to any application supporting the feature, thus allowing easy data transfer between applications.

<span class="mw-page-title-main">Dialog box</span> User interface element

The dialog box is a graphical control element in the form of a small window that communicates information to the user and prompts them for a response.

<span class="mw-page-title-main">Text-based user interface</span> Type of interface based on outputting to or controlling a text display

In computing, text-based user interfaces (TUI), is a retronym describing a type of user interface (UI) common as an early form of human–computer interaction, before the advent of bitmapped displays and modern conventional graphical user interfaces (GUIs). Like modern GUIs, they can use the entire screen area and may accept mouse and other inputs. They may also use color and often structure the display using box-drawing characters such as ┌ and ╣. The modern context of use is usually a terminal emulator.

<span class="mw-page-title-main">Graphical widget</span> Element of interaction in a graphical user interface

A graphical widget in a graphical user interface is an element of interaction, such as a button or a scroll bar. Controls are software components that a computer user interacts with through direct manipulation to read or edit information about an application. User interface libraries such as Windows Presentation Foundation, Qt, GTK, and Cocoa, contain a collection of controls and the logic to render these.

Common User Access (CUA) is a standard for user interfaces to operating systems and computer programs. It was developed by IBM and first published in 1987 as part of their Systems Application Architecture. Used originally in the MVS/ESA, VM/CMS, OS/400, OS/2 and Microsoft Windows operating systems, parts of the CUA standard are now implemented in programs for other operating systems, including variants of Unix. It is also used by Java AWT and Swing.

An alert dialog box is a special dialog box that is displayed in a graphical user interface when something unexpected occurred that requires immediate user action.

<span class="mw-page-title-main">Human interface guidelines</span> Software development documents

Human interface guidelines (HIG) are software development documents which offer application developers a set of recommendations. Their aim is to improve the experience for the users by making application interfaces more intuitive, learnable, and consistent. Most guides limit themselves to defining a common look and feel for applications in a particular desktop environment. The guides enumerate specific policies. Policies are sometimes based on studies of human–computer interaction, but most are based on conventions chosen by the platform developers preferences.

<i>The Humane Interface</i> 2000 book by Jef Raskin

The Humane Interface: New Directions for Designing Interactive Systems (ISBN 0-201-37937-6) is a book about user interface design written by Jef Raskin and published in 2000. It covers ergonomics, quantification, evaluation, and navigation.

<span class="mw-page-title-main">Incremental search</span> User interface method to search for text

In computing, incremental search, also known as hot search, incremental find or real-time suggestions, is a user interface interaction method to progressively search for and filter through text. As the user types text, one or more possible matches for the text are found and immediately presented to the user. This immediate feedback often allows the user to stop short of typing the entire word or phrase they were looking for. The user may also choose a closely related option from the presented list.

Archy is a software system that had a user interface that introduced a different approach for interacting with computers with respect to traditional graphical user interfaces. Designed by human-computer interface expert Jef Raskin, it embodies his ideas and established results about human-centered design described in his book The Humane Interface. These ideas include content persistence, modelessness, a nucleus with commands instead of applications, navigation using incremental text search, and a zooming user interface (ZUI). The system was being implemented at the Raskin Center for Humane Interfaces under Raskin's leadership. Since his death in February 2005 the project was continued by his team, which later shifted focus to the Ubiquity extension for the Firefox browser.

A voice-user interface (VUI) enables spoken human interaction with computers, using speech recognition to understand spoken commands and answer questions, and typically text to speech to play a reply. A voice command device is a device controlled with a voice user interface.

<span class="mw-page-title-main">Shell (computing)</span> Computer program that exposes an operating systems services to a human user or other programs

In computing, a shell is a computer program that exposes an operating system's services to a human user or other programs. In general, operating system shells use either a command-line interface (CLI) or graphical user interface (GUI), depending on a computer's role and particular operation. It is named a shell because it is the outermost layer around the operating system.

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 interface components include the Caps lock and Insert keys on the standard computer keyboard, both of which typically put the user's typing into a different mode after being pressed, then return it to the regular mode after being re-pressed.

<span class="mw-page-title-main">Error message</span> Computer message indicating an error

An error message is the information displayed when an unforeseen problem occurs, usually on a computer or other device. Modern operating systems with graphical user interfaces, often display error messages using dialog boxes. Error messages are used when user intervention is required, to indicate that a desired operation has failed, or to relay important warnings. Error messages are seen widely throughout computing, and are part of every operating system or computer hardware device. The proper design of error messages is an important topic in usability and other fields of human–computer interaction.

<span class="mw-page-title-main">Newt (programming library)</span>

Newt is a programming library for color text mode, widget-based user interfaces. Newt can be used to add stacked windows, entry widgets, checkboxes, radio buttons, labels, plain text fields, scrollbars, etc., to text user interfaces. This package also contains the shared library needed by programs built with newt, as well as a CLI application whiptail, which provides the most commonly used features of dialog. Newt is based on the slang library. It abbreviates from Not Erik's Windowing Toolkit.

References

  1. 1 2 3 4 "Never Use a Warning When you Mean Undo". alistapart.com. Retrieved 2015-10-09.
  2. ↑ Raskin, Jef (2000). The Humane Interface. United States: Addison Wesley. ISBN   0-201-37937-6.
  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. 1 2 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. ↑ Raymond Chen, The Old New Thing: The default answer to every dialog box is "Cancel"
  8. ↑ Jeff Atwood, Coding Horror: Teaching Users to Read
  9. ↑ "Sheets - Presentation - Components - Human Interface Guidelines - Design - Apple Developer". Apple Developer. Retrieved 7 September 2022.
  10. ↑ Cooper, Alan (March 17, 2003). About Face 2.0: The Essentials of Interaction Design. Wiley. ISBN   0-7645-2641-3.
  11. ↑ Raskin, Jef (2000). The Humane Interface. Addison Wesley. ISBN   0-201-37937-6.
  12. ↑ "How to Use Modality in Dialogs". Oracle Corporation.
  13. ↑ "Modal Panel". quince.infragistics.com. Archived from the original on 2013-05-06.
  14. ↑ "Modal Panel - Implementation". quince.infragistics.com. Archived from the original on 2013-05-06.
  15. ↑ Inc., Apple. "Themes - macOS - macOS - Human Interface Guidelines - Apple Developer". developer.apple.com. Retrieved 18 September 2018.{{cite web}}: |last= has generic name (help)
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.