Modals

Problem

Users are easily distracted, so there are instances where their full attention must be obtained.

Solution

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

When

• Content requires the users' full attention to acknowledge before allowing them to continue with the application.
• Information pertinent to what users are trying to achieve doesn't fit well into the main visual flow.
• The application requires critical confirmation for a selected action.

HTML code here
	

CSS code here
	

Why

The underlying rationale behind all modal panels is to try to capture user's attention, get them to focus on what is in the panel, and then to take some kind of action, even if the action is simply closing/dismissing the dialog.

You should use modal panels sparingly because they disrupt the flow and create more work (requiring extra attention and action). Many applications have abused them in the past, especially as regards confirmation dialogs.

How

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

The underlying view should be receded in visual importance using a semi-transparent overlay; however, this is less common in desktop applications. In deciding whether or not to do this, consider how useful the surrounding information is for them to most effectively interact with the modal panel. If the user needs that surrounding information, don't fade it back. If the surrounding information would be more distracting than helpful, consider adding the overlay.

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.

Because modals can be so disruptive, they should only be triggered 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