Two-Panel Selector

Physically, the display you work with is large enough to show two separate panels at once. Very small cell phone displays cannot cope with this pattern, but a screen such as the Blackberry's can.

When both panels are visible side-by-side, users can quickly shift their attention back and forth, looking now at the overall structure of the list ("How many more unread email messages do I have?"), and now at an object's details ("What does this email say?"). This tight integration has several advantages over other physical structures, such as two separate windows or One-Window Drilldown:

• It reduces physical effort. The user's eyes don't have to travel a long distance between the panels, and he can change the selection with a single mouse click or key press, rather than first navigating between windows or screens (which can take an extra mouse click).

• It reduces visual cognitive load. When a window pops to the top, or when a page's contents are completely changed (as happens with One-Window Drilldown), the user suddenly has to pay more attention to what he's now looking at; when the window stays mostly stable, as in a Two-Panel Selector, the user can focus on the smaller area that did change.

• It reduces the user's memory burden. Think about the email example again: when the user looks at just the text of an email message, there's nothing onscreen to remind him where that message is in the context of his inbox. If he wants to know, he has to remember or navigate back to the list. But if the list is already onscreen, he merely has to look, not remember. The list thus serves as a "You are here" signpost.

When the user selects an item, immediately show its contents or details in the second panel. Selection should be done with a single click. But while you're at it, give the user a way to change selection from the keyboard, particularly with the arrow keys -- this reduces both the physical effort and the time required for browsing, and contributes to keyboard-only usability.

Make the selected item visually obvious. Most GUI toolkits have a particular way of showing selection, e.g. reversing the foreground and background of the selected list item. If that doesn't look good, or if you're not using a GUI toolkit with this feature, try to make the selected item a different color and brightness than the unselected ones -- that helps it stand out.

What should the selectable list look like? It depends -- on the inherent structure of the content, or perhaps on the task to be done. For instance, most filesystem viewers show the directory hierarchy, since that's how filesystems are structured. Animation and video-editing software use interactive timelines. A GUI builder may simply use the layout canvas itself; selected objects on it then show their properties in a Property Sheet (Chapter 4) next to the canvas.

Consider using one of these models:

• Linear, usually sorted
• 2D tables, also sorted, which often let the user sort via column headers or filter according to various criteria
• A hierarchy that groups items into categories (and possibly subcategories)
• A hierarchy that reveals relationships: parent/child, etc.
• Spatial organizations, such as maps, charts, or desktop-like areas in which users can place things where they want

You can also use information-presentation patterns such as Sortable Table and Tree-Table in Two-Panel Selectors, along with simpler components such as lists and trees. Card Stack closely relates to Two-Panel Selector; so does Overview Plus Detail.

When the select-and-show concept extends through multiple panels, to facilitate navigation through a hierarchical information architecture, you get the Cascading Lists pattern.

The Windows Explorer is probably one of the most familiar uses of Two-Panel Selector. Its content is organized hierarchically, using a selectable tree; in contrast, the Mac Mail example shown above uses a selectable table, which has a strictly linear organization. In both UIs, the dark backgrounds indicate the selected item.

Nortel's Mobile Time Entry application is a rare example of Two-Panel Selector use in a handheld device. The Blackberry screen offers just enough space for two usefully sized panes; when you select an item in the top pane, its contents appear on the bottom pane. (Both are scrollable with the Blackberry's scroll wheel, barely visible on the right side.)

In practice, this interface was quite effective. The lawyers who used this time-billing application could easily find items that they wanted -- the two views together give enough context, but also enough details, to identify items quickly and accurately.