Task Dialogs

Problem

Users can be easily distracted; there are instances where it is necessary to grab their full attention.

Solution

Display a panel front and center that requires users to focus on and take action before continuing.

HTML code here
	

CSS code here
	

Why

The underlying rationale behind the dialog box is to try to capture user attention, get them to focus on a priority topic, and then take some kind of action, even if the action is simply closing/dismissing the dialog.

Dialog boxes quite often use modals; they should be used sparingly because they disrupt the flow and create extra work (requiring extra attention and action). Avoid confirmation dialogs (e.g., "Are you sure you want to do this?") whenever possible.

How

Explore other alternatives to modal panels first. Consider using an "Undo" control or a recycling bin/trash can from which deleted items can be recovered. Alternatively, consider not deleting objects/records, especially if they're hard to create; instead, mark them as inactive and provide a way to reactivate them.

Since modal panels are typically part of some larger flow, you should placing the dialog boxes contained within them in that flow. For instance, if users are filling out a long form that contains some control that triggers the dialog box, it's best to display the panel near or over that control because that is where the user is focusing at that time. Whatever users do to trigger it, the key is to position it at the most likely point of focus to minimize their effort to refocus on the new element.

The panel itself can be a new popup window/dialog, a simple overlay, or some other panel that comes into view and clearly demands attention. What is chosen depends on the platform. Windows has facilities for easily creating modal window dialogs. Macintosh has these and modal panels that slide into view. The Web has JavaScript-driven modal dialogs that can be new windows or just HTML overlays in the same window.

Because dialog boxes can be so disruptive, only trigger them based on actions that imply such a dialog will take place. If the dialog is unexpected (as most confirmation dialogs are), it will quickly be seen as a nuisance - something that is getting in the way of accomplishing a goal. Sometimes there are viable reasons to incur this negative impact; just weigh it consciously before introducing it.

Examples