The "dialog box" is just that:

An opportunity to have a meaningful - and often necessary dialogue between borg and human.

It's popular nowadays to reduce the User Interface and interaction complexity to nil. But sometimes you just gotta think and make choices. The dialog box - often called "the dialog" - is an established norm for having a conversation with your app.

Our conversation with the borg may be intrusive (it interrupts the workflow process) or supplementary (it provides optional information).

Modal popups

Intrusive dialogs are called "modal" because they prevent you from moving on until you have acknowledged them. A modal popup seizes the focus of the entire desktop (i.e. You can only act on the modal window). There is no browser level closebutton; you must click within the page in order to close the modal popup window. There are 3 main types of Modal popups: Confirmation, Message, and Data Entry

1. Confirmation popup

A critical action is about to be performed. You must click an [OK] button in order to continue with the action or click a [Cancel] button to abort.
The decision point may be simple, or it may be tied to remedies. Here are some examples:

You exit a formentry page without saving your changes.

Screen: "You have not saved the changes you made on this page."

• [ Save the Changes ] continues the exit path
  
• [ Ignore the Changes ] aborts the process and returns to the mainwindow page
  

You have selected a group of items to delete.

Screen: "Delete the following Items: <list of items to be deleted ...>"

• [ Delete ] deletes the items
  
• [ Do not Delete ] aborts the process and returns to the mainwindow page
  

You have edited a formentry page, but the Validation process identifies errors.

Screen: "The following errors have been found: <list of error fields ...>"

There are two alternative solutions:

Return to mainwindow with the error fields tagged
Allow editing of the error fields within the modal popup

2. Message popup

This modal popup temporarily interrupts and pauses the workflow, but does not alter it. You must read message and click the [Continue] button in order to dismiss the popup and continue. (Labeling the button as “OK” is not appropriate, since you have no choice in the matter.)

The Notification

You have just done something and the system wants to emphasize that action or its result.

Screen: "You have created a new contract: CONTRACT-12345"

• [ Continue ] button
  

The Warning

This is an escalated form of the Notification. You're about to do something dangerous or dramatic. You should be offered the opportunity to take an alternate path.

Screen: "You are about to wipe out your entire computer memory."

• [ OK ] button should provide a clarification that emphasizes the seriousness of this choice, s.a. [ It's your funeral! ]
  
• [ Alternative path ] button should also indicate good advice and your options, s.a. [ You may want to try something else... ]
  

3. Data Entry popup

This modal popup allows you to select an appropriate value for a field on the Main window. It's a critical part of the workflow. In most cases, you just click on the desired value in the popup and it automatically closes itself and populates the target field ("implicit OK").

Calendar date selection

You click on a “calendar” icon next to a target datefield in the mainWindow. The calendar pops up.

• The Calendar allows you to navigate from month to month.
  
• Click on a datebox to close the calendar popup and populate the selectedDate into the target datefield in the mainwindow.
  
• This is an "implicit OK”. Once you select a date, it's done. No need to click twice.
  
• [ Cancel ] button
  

List Lookup

You click on a “lookup” icon next to a target field in the mainWindow. The Lookup panel pops up. This example describes a situation in which you might select several items, so the [ OK ] button is appropriate.

• The lookup may contain several filtering tools to assist in the search.
  
• Once the data item(s) have been selected, click on the “OK” button to close the Lookup popup and populate the target field in the MainWindow.
  
• [ OK ] [ Cancel ] buttons
  
  

Non-modal windows

A non-modal window just opens as another browser window on the desktop. It usually has a browser level closeButton. The non-modal window does not interfere with your interaction - it's supplementary. It just adds information. The non-modal window is always optional.

Subsidiary (dependent) window

Display relevant information about an item without leaving the page, such as preview, detail or reference information. The dependent subsidiary window must close when you leave the main page.

Detail Info

You want to see (drilldown) details on a record.

• Click on an item for “more info”. The information pops up.
  
• When you leave the source page, the popup closes.
  
• [ Close ] button
  

Subsidiary (persistent) window

The dependent subsidiary window remains open when you leave the main page. In this example, we assume that you want help and guidance ... until you don't want it any more. So the help/guidance service remains active until you tell it to go away.

Help windows

Such as: Glossary, FAQ’s, Procedural, HelpViewer

• Click on the “help” icon. Relevant information pops up.
  
• When you leave the source page, the popup remains open and is refreshed with context-sensitive info about the new source page.
  

Labels

Although OK / Cancel is an "industry standard" for button labels, it's far better to provide meaningful, contextual titles that tell you what will happen. "Truth in packaging."

 

Disclaimer

Most of this content was originally captured as a "best practices" document circa 1997. I guess it sort of looks the part ... boring-esque. But still kinda valid.