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).
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.)
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
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
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
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.
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.
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.
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.”
Consider: You’re presented with a dialog that says:
“Big problem ahead. Cancel this operation.”
[ OK ] [ Cancel ]
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.
© The Communication Studio LLC