Alert dialog box
Encyclopedia
An alert dialog is a colloquial (though commonly accepted) 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 the user can only respond in one way: by closing it. Closing an alert dialog will provide access to the original window, which is not available while the alert dialog is presented.
Alert dialogs that block the application are regarded as a bad design solution by usability
practitioners, since they are prone to produce mode errors. Also when used as error dialogs, they have been shown to be ineffective in their goals to inform users about an error condition or protect from a destructive operation.
Warning and question alerts typically offer two opposite options to close the dialog ("Allow/Deny", "OK/Cancel", "Yes/No") with the implicit assumption that one will proceed with the paused process that triggered the dialog, and the other one will interrupt the process without action.
A good practice in interface design
, often included in Human Interface Guidelines
, is to label each option with the precise effect that it will have on the process (for example, "Save/Don't save" in a dialog triggered while editing a document with unsaved changes).
to spawn an alert dialog. The argument to the method is the text to be displayed in the window.
A dialog created this way will contain a yellow triangle warning symbol (similar to those found on electrical devices), the text of the warning message, and a single button saying "OK" which will close the window.
Such a dialog also assumes control over the user interface, preventing the user from proceeding with any other task in the application until the dialog window is closed.
Used along with a technique to execute it in a web page, the following JavaScript code:
will create the following alert dialog (when viewed with Mozilla Firefox
running on Windows XP
):
This is explained by a common complaint about the wording of the message in the alert box, which is often incomprehensible to the user. In applications without proper user-centered design
, the developers decide the text of the message, including terms and concepts from the mental model
of the programmer, not of the user's view of the world. Since the dialog doesn't work to accomplish the user needs, the common reaction will be to dismiss the alert without further consideration.
Dangerous actions should be undoable wherever possible; a modal dialog that appears unexpectedly or which is dismissed by habituation
will not protect from the dangerous action. This problem can be avoided by providing an Undo
action instead of a warning.
Another recognized problem is that, as a modal window
, the dialog blocks all workflow
in the program until it is closed. Users may not recognize that the dialog requires their attention, leading to confusion about the main window being non-responsive, or causing loss of the user's data input. This often happens in data entry forms after an error alert produced by invalid data. The preferred design include changing a visual aspect of the input element to reflect an invalid entry (such as applying a red border), or adding a character such as an asterisk
next to the input element that needs to be corrected.
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...
that occurs in a graphical user interface
Graphical user interface
In computing, a graphical user interface is a type of user interface that allows users to interact with electronic devices with images rather than text commands. GUIs can be used in computers, hand-held devices such as MP3 players, portable media players or gaming devices, household appliances and...
. It is also known as an alert box, alert window, error dialog, alert popup
Popup
Popup or pop-up could refer to:* Batted ball, a type of hit ball in baseball* Hidden headlamps, also called pop-up headlamps* Pop-up book, or movable books* Pop Up, a 2007 album by Yelle* Popup camper, a type of recreational vehicle...
or plainly alert.
The typical alert dialog provides information in a separate box
Window (computing)
In computing, a window is a visual area containing some kind of user interface. It usually has a rectangular shape that can overlap with the area of other windows...
to the user, after which the user can only respond in one way: by closing it. Closing an alert dialog will provide access to the original window, which is not available while the alert dialog is presented.
Alert dialogs that block the application are regarded as a bad design solution by usability
Usability
Usability is the ease of use and learnability of a human-made object. The object of use can be a software application, website, book, tool, machine, process, or anything a human interacts with. A usability study may be conducted as a primary job function by a usability analyst or as a secondary job...
practitioners, since they are prone to produce mode errors. Also when used as error dialogs, they have been shown to be ineffective in their goals to inform users about an error condition or protect from a destructive operation.
Usage
Alerts have several typical uses:- Error: informs the user than an operation could not continue or complete due to some insurmountable error.
- WarningConfirmation dialog boxConfirmation dialog is a dialog box that asks user to approve requested operation. Usually this dialog appears before a potentially dangerous operation is performed...
: alerts that the current course of action could be in some way dangerous or detrimental, often offering the option of not proceeding. - Info: presents a general notification about a recent event.
- Question: elicits some kind of response from the user, required to complete the current process.
Warning and question alerts typically offer two opposite options to close the dialog ("Allow/Deny", "OK/Cancel", "Yes/No") with the implicit assumption that one will proceed with the paused process that triggered the dialog, and the other one will interrupt the process without action.
A good practice in interface design
Interface design
Interface design deals with the process of developing a method for two modules in a system to connect and communicate. These modules can apply to hardware, software or the interface between a user and a machine...
, often included in Human Interface Guidelines
Human Interface Guidelines
Human interface guidelines 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...
, is to label each option with the precise effect that it will have on the process (for example, "Save/Don't save" in a dialog triggered while editing a document with unsaved changes).
Example
alert is the name of the method used in JavaScriptJavaScript
JavaScript is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles....
to spawn an alert dialog. The argument to the method is the text to be displayed in the window.
A dialog created this way will contain a yellow triangle warning symbol (similar to those found on electrical devices), the text of the warning message, and a single button saying "OK" which will close the window.
Such a dialog also assumes control over the user interface, preventing the user from proceeding with any other task in the application until the dialog window is closed.
Used along with a technique to execute it in a web page, the following JavaScript code:
alert('This alert dialog tells you something important.');will create the following alert dialog (when viewed with Mozilla Firefox
Mozilla Firefox
Mozilla Firefox is a free and open source web browser descended from the Mozilla Application Suite and managed by Mozilla Corporation. , Firefox is the second most widely used browser, with approximately 25% of worldwide usage share of web browsers...
running on Windows XP
Windows XP
Windows XP is an operating system produced by Microsoft for use on personal computers, including home and business desktops, laptops and media centers. First released to computer manufacturers on August 24, 2001, it is the second most popular version of Windows, based on installed user base...
):
Criticism
Modal alert dialogs are generally frowned upon by experts in usability and human-computer interaction, since they are prone to produce mode errors due to their unrequested nature. A study to appear at the Proceedings of the Human Factors and Ergonomics Society showed that when a user dialog appears, the primary goal of users is typically to get rid of them as soon as possible even without any analysis of the causes for the dialog appearance. When asked, users dismissed any dialog box as a distraction from their assigned task.This is explained by a common complaint about the wording of the message in the alert box, which is often incomprehensible to the user. In applications without proper user-centered design
User-centered design
In broad terms, user-centered design or pervasive usability is a design philosophy and a process in which the needs, wants, and limitations of end users of a product are given extensive attention at each stage of the design process...
, the developers decide the text of the message, including terms and concepts from the mental model
Mental model
A mental model is an explanation of someone's thought process about how something works in the real world. It is a representation of the surrounding world, the relationships between its various parts and a person's intuitive perception about his or her own acts and their consequences...
of the programmer, not of the user's view of the world. Since the dialog doesn't work to accomplish the user needs, the common reaction will be to dismiss the alert without further consideration.
Dangerous actions should be undoable wherever possible; a modal dialog 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. This problem can be avoided by providing an Undo
Undo
Undo is a command in many computer programs. It erases the last change done to the document reverting it to an older state. In some more advanced programs such as graphic processing, undo will negate the last command done to the file being edited....
action instead of a warning.
Another recognized problem is that, as a modal window
Modal window
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...
, the dialog blocks all 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...
in the program until it is closed. Users may not recognize that the dialog requires their attention, leading to confusion about the main window being non-responsive, or causing loss of the user's data input. This often happens in data entry forms after an error alert produced by invalid data. The preferred design include changing a visual aspect of the input element to reflect an invalid entry (such as applying a red border), or adding a character such as 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...
next to the input element that needs to be corrected.
External links
- Designing Around Dialogs, a presentation about the usage problems of alert dialogs.