Modal Panel

 

Example of the Modal Panel UX pattern.

Problem

People are easily distracted, so you have to grab their full attention sometimes.

Solution

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

Context

  • You have some content that you think people need to give their full attention to and to acknowledge before allowing them to continue with your solution.
  • You need some information pertinent to what people are trying to achieve that doesn’t fit well into the main visual flow.
  • You need to get critical confirmation for a selected action.

Rationale

The underlying rationale behind all modal panels is to try to capture folks’ 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 extra work (requiring extra attention and action). Many applications have abused them in the past, especially as regards confirmation dialogs. Avoid confirmation dialogs (e.g., “Are you sure you want to do X?”) if you can—prefer Undo or something like a recycling bin where possible or, if it is easy to recreate, they’re probably not needed.

Implementation

Explore other alternatives to modal panels first. Consider Undo 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 place them where they belong in that flow. For instance, if people 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 they are focusing at that time. Whatever people 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.

You may want to filter out the underlying view 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 they need that surrounding information, don’t filter. If the surrounding information would be more distracting than helpful, consider filtering it.

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 you choose probably depends on your platform. Windows has facilities for easily creating modal window dialogs. Mac 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.

It should follow standard platform conventions. For instance, on Windows, the convention is to have the affirmative action in the bottom right of the panel as the right-most command; on Mac, it is more conventional to be at the bottom right but left-most command. Similarly, if it is a popup style new window dialog, the placement of the window commands is top left for Mac and top right for Windows, and for those kind you typically do not provide maximize and minimize capabilities—only close, which should usually equate to a “Cancel” command if one applies.

Web conventions are less standard, but since the majority of computer users use Windows, you may want to err with that convention unless you have a very clear path to completion or you know your target audience uses mostly Macs or some other platform (such as mobile). You could consider using Primary Action on the Web modal panels to better draw out the primary action.

The modal panel should prevent further interaction with or navigation through the solution. Part of the purpose of these is to require people to focus on them and take some relevant action. If people will potentially need to access other parts of the solution, you should probably not make the panel modal.

The number of possible actions should usually be very few, often related to one specific task. Most typically these dialogs involve reading some sort of prompt or related information, possibly entering a bit of very targeted information, and then choosing either a confirm/ok/apply or a cancel action. In choosing one of these completion-type actions, you should return people to the point of departure for that panel. If you have a cancel-type action, you should also map it to the Escape key, and on the Web you can try to map it to the Back command using one of the DHTML navigation libraries.

Because they are so disruptive, you should usually try to only trigger modal dialogs 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.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

ASP.NET

Modal Panel pattern is implemented in the ASP.NET WebDialogWindow control. Check out the samples browser to see it in action.

Silverlight

You can use the NetAdvantage for Silverlight xamWebDialogWindow control for this.

 

Examples

The Picasa Picture Viewer replaces the default Windows Picture Viewer by integrating with the Windows Explorer and allows the user to view an image with a double click. The program opens a semi-transparent full screen window with the image centered, allowing the user to get instant full view of the selected picture while not losing the background context. The opened window doesn't look like a common window in a sense that it doesn’t have a border or extra buttons, it has just a close button on top right.

http://quince.infragistics.com/117u

Example of the Modal Panel UX Pattern Example of the Modal Panel UX Pattern

Quince uses modal panels in a few places. The one shown here is the interactive pattern viewer.

http://quince.infragistics.com/117l

Example of the Modal Panel UX Pattern Example of the Modal Panel UX Pattern

This is the other kind of modal panel we use in Quince. You can see it is the more traditional approach with the window chrome because we didn't need a full screen experience on these.

http://quince.infragistics.com/11bp

Example of the Modal Panel UX Pattern Example of the Modal Panel UX Pattern

The primary example is from Scrivener. Although the Preferences dialog is not, itself, modal, the file chooser dialog for picking the citations manager is.

http://quince.infragistics.com/10w6

Example of the Modal Panel UX Pattern Example of the Modal Panel UX Pattern

This is the modal options dialog from Microsoft Outlook 2007. Note the familiar actions at the bottom right; the limited title bar options (close and help, in this case).

http://quince.infragistics.com/11fp

Example of the Modal Panel UX Pattern Example of the Modal Panel UX Pattern

This one from Flickr shows how you can edit the photo’s properties in a modal panel. The Flickr designers decided that it would be more straightforward to edit it in a modal panel than navigating to a new page to do it. Note how the page in the back is dimmed to highlight the fact that it’s disabled.

http://quince.infragistics.com/11bh

Example of the Modal Panel UX Pattern Example of the Modal Panel UX Pattern

The popular Lightbox JavaScript library uses a modal panel approach for showing the images, although it is a bit different in that the only action is to close, so they make it where you can click pretty much anywhere to close it.

http://quince.infragistics.com/110i

Example of the Modal Panel UX Pattern Example of the Modal Panel UX Pattern

Infragistics ASP.NET toolkit has a built-in WebDialogWindow control to help simplify the implementation of modal panels on the Web.

http://quince.infragistics.com/110k

Example of the Modal Panel UX Pattern Example of the Modal Panel UX Pattern

Yahoo mail shows a modal window with tips when you try to reply an email. An interesting behavior is that when you click the back button, it closes the modal window instead of going to the previous page. This is probably the expected behavior by most Web users, so you should consider it for your own modal panels on the Web.

http://quince.infragistics.com/119a

Example of the Modal Panel UX Pattern Example of the Modal Panel UX Pattern

Gmail uses a modal panel when you choose to report a message as phishing. Unlike most desktop modal panels, this one does not have any dialog commands in the top-right, but the action buttons are pretty clear so that should not be a problem.

http://quince.infragistics.com/11bw

Example of the Modal Panel UX Pattern Example of the Modal Panel UX Pattern

Lookups are another common use for modal panels. Microsoft CRM uses one with a Large Set Single Selector that lets people select a contact from a list. When looking up a related value requires sophisticated search or when you could want to trigger additional actions from the lookup, like with the Properties button, it’s common to use modal panels.

http://quince.infragistics.com/112s

Example of the Modal Panel UX Pattern Example of the Modal Panel UX Pattern

Sources

Jennifer Tidwell, Designing Interfaces

Tags

Usability, Navigation, Data Entry, Builders and Editors, Interaction Design, Visual Hierarchy.