Alert dialog box

Alert dialog box

An alert dialog (or dialogue) 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.


Alerts have several typical uses [ [ Java Look and Feel Design Guidelines, second edition.] ] :
* Error: informs the user than an operation could not continue or complete due to some insurmountable error.
* Warning: alerts that the current course of action could be in some way dangerous or detrimental, and to offer the option of not proceeding.
* Info: presents a general notification about a recent event.
* Question: to elicit from the user a piece of information, 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, 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).


alert() is the name of the method used in JavaScript 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 running on Windows XP):


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 [ [ Fake popup study sadly confirms most users are idiots] Ars Technica, September 23, 2008] 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, 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. [Raymond Chen, The Old New Thing: [ The default answer to every dialog box is "Cancel"] ]

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. [cite book | last = Raskin| first = Jef | title = The Humane Interface | publisher = Addison Wesley | date = 2000 | isbn = 0201379376 ] This problem can be avoided by providing an Undo action instead of a warning. [Aza Raskin, A List Apart: [ Never Use a Warning When you Mean Undo] ]

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. [cite book | last = Cooper | first = Alan | title = About Face 2.0: The Essentials of Interaction Design | publisher = Wiley | date = March 17, 2003 | isbn = 0764526413 ]


External links

* [ Designing Around Dialogs] , a presentation about the usage problems of alert dialogs.

Wikimedia Foundation. 2010.

Игры ⚽ Поможем сделать НИР

Look at other dictionaries:

  • Dialog box — Example of a dialog box of gedit. 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 informa …   Wikipedia

  • Confirmation dialog box — Confirmation dialog (sometimes called warning alert boxes)[1] is a dialog box that asks user to approve requested operation. Usually this dialog appears before a potentially dangerous operation is performed (program termination, file deletion,… …   Wikipedia

  • Alert — may refer to:* A warning, such as Red alert * An alert state * Alerts in the field of Information technology refers to the aggregation of reminders, notifications, etc. * Alert dialog box, a type of dialog box used in graphical user interfaces *… …   Wikipedia

  • File dialog — A save as file dialog from GTK+. The file browser is hidden inside a disclosure widget. In computing, a file dialog (also called File Selector/Chooser, file requester, or open and save dialog) is a dialog box that allows users to choose a file… …   Wikipedia

  • Combo box — A generic combo box A combo box is a commonly used graphical user interface widget (or control). It is a combination of a drop down list or list box and a single line textbox, allowing the user to either type a value directly into the control or… …   Wikipedia

  • 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. Modal windows are often… …   Wikipedia

  • Mouseover — In computing a mouseover, mouse hover or hover box refers to a GUI event that is raised when the user moves or hovers the cursor over a particular area of the GUI. The technique is particularly common in web browsers where the URL of a hyperlink… …   Wikipedia

  • Client-side JavaScript — (CSJS) is JavaScript that runs on the client side. While JavaScript was originally created to run this way, the term was coined because the language is no longer limited to just client side, since server side JavaScript (SSJS) is now available.… …   Wikipedia

  • GUI widget — This article is about reusable components for building user interfaces. For small desktop/web applications, see widget engine. For other uses, see widget (disambiguation). Various widgets …   Wikipedia

  • Disclosure widget — in the GNOME file dialog. A disclosure widget or expander is a graphical user interface element (widget) that is used to show or hide a collection of child widgets in a specific area of the interface. The widget hides non essential settings or… …   Wikipedia

Share the article and excerpts

Direct link
Do a right-click on the link above
and select “Copy Link”