Two-Panel Selector

Example of the Two-Panel Selector UX pattern.

Problem

People need to work with a list of things.

Solution

Use two panels, one that shows a list of things and one that shows the contents of what’s selected in the other.

Context

  • You have enough space in the interface to accommodate two panels.
  • You don’t have a reason to obscure the list while working with an item as you might with Hub and Spoke or One-Window Drilldown.

Rationale

This is one of those patterns that’s just everywhere, which can make even a not-so-good pattern a better one; however, this pattern has other reasons to recommend it. First, it’s sort of analogous to a filling cabinet or a tabbed book—something like that—where you look through a list of identifiers, pick one that you want to work with, and you can still see where it was that you got the thing you’re working with. So it’s not a totally new interaction paradigm in the digital world.

This pattern shares the benefits of that interaction—it helps people keep tabs (not literally in this case) on where they are in the list, so they don’t have to remember that when they’re done working with it. In addition to that, by keeping the list close, it’s not hard to quickly look back and forth between the two, and lastly, it eliminates the need for other wayfinding devices (like Breadcrumbs) because, as with Navigation Tabs and Tab Dialogs, the list serves both as a navigation/selection and an orientation device.

Implementation

It’s almost as simple to implement as its name—you make two panels, put the list of things in one and the contents/details in the other. Usually, the list panel is smaller and located where it flows—for left-to-right languages, it’d be on the top or the left; it might be inverted for right-to-left. The idea is people pick first and then see the details.

When people pick an item in the list (almost always by clicking), you show the contents/details in the other, and you should indicate the selected item somehow (e.g., changing its background, bolding the text, underlining, or otherwise highlighting). Many implementations of this pattern also support a double-click action that open that same item in its own window.

The examples give you a good idea of different ways to implement this pattern, and once you’re aware of it, you’ll start seeing it everywhere.

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

Two-Panel selector can be implemented using any combinations of the following ASP.NET controls: WebDataGrid, WebGrid, WebDataTree, WebListBar, WebDataMenu, WebDropDown. Check out the samples browser to see it in action.

Windows Forms

You can use the NetAdvantage for Windows Forms controls: WinGrid, WinTree, WinListView, and some content area to implement this pattern. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser called Outlook Express-Style News Reader to see it in action.

WPF

You can implement this pattern using the NetAdvantage for WPF controls: XamDataGrid and XamDataCarousel.

Examples

The primary example is from Microsoft Entourage—the Outlook for Mac. Like Outlook, it has the idea of the preview/reading pane, which most people end up using as the sole way to look at their email. Those who cultivated the habit when they had smaller resolution screens (or still do) might still open to read in full screen, but the success of this approach for those who have the hardware shows its value.

http://quince.infragistics.com/1128

Example of the Two-Panel Selector UX Pattern Example of the Two-Panel Selector UX Pattern

Likely, Windows Explorer is the most familiar two-panel selector for the vast majority of computer users. It uses a tree rather than a flat list in the selector panel, and it offers Alternative Views for the details panel.

http://quince.infragistics.com/115b

Example of the Two-Panel Selector UX Pattern Example of the Two-Panel Selector UX Pattern

Like Windows Explorer, Mac Finder also takes advantage of a tree-based two-panel selector. Their album viewer view has become quite popular since it was introduced.

http://quince.infragistics.com/1148

Example of the Two-Panel Selector UX Pattern Example of the Two-Panel Selector UX Pattern

Mac Office has a Project Gallery (similar in concept to the New Microsoft Office Document tool for Windows). It shows the idea of having categories as the things in the list panel, and it uses nice iconic representations of the items in the details panel.

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

Example of the Two-Panel Selector UX Pattern Example of the Two-Panel Selector UX Pattern

Scrivener also uses a tree in the selector pane. In the content pane, it has Alternative Views as well. The one shown here is the index card view, which is really great for organizing parts of the work being authored.

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

Example of the Two-Panel Selector UX Pattern Example of the Two-Panel Selector UX Pattern

This is a sample from the Infragistics ASP.NET toolkit that shows the familiar mail client pattern. It uses the tree selector on the left and a table for the content pane, which also functions as an implementation of Work With.

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

Example of the Two-Panel Selector UX Pattern Example of the Two-Panel Selector UX Pattern

No, this isn’t a duplicate. :) This is highlighting the two-panel selector in SnagIt v9. Because the items being listed are inherently visual (images), they can use thumbnails of those in the list panel so there is direct correlation between the list and the detail panel. This implementation doesn’t follow the flow for left-to-right language speakers. I don’t know the reasons for that, but it may be that usually the editor is used on a one-off basis—it comes up after a screen capture with the latest item showing. That item is going to be what people want to work with initially, so it makes sense to prioritize it visually above the selector. Also, with the Ribbon, putting the selector on the bottom adds balance.

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

Example of the Two-Panel Selector UX Pattern Example of the Two-Panel Selector UX Pattern

This sample from the Infragistics Windows Forms toolkit shows a basic newsgroup reader. The selector pane is on the left and uses a tree of newsgroups. The right pane shows the threads in the selected newsgroup using a Tree-Table.

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

Example of the Two-Panel Selector UX Pattern Example of the Two-Panel Selector UX Pattern

The Infragistics Web site uses an unusual two-panel selector for some areas. You see the selector panel on the left in the black tab-like area. What is selected there changes the content in the content panel on the right (without refreshing the entire page on supported browsers).

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

Example of the Two-Panel Selector UX Pattern Example of the Two-Panel Selector UX Pattern

Quince itself uses a sort of two-panel selector in some views. The selector panel is the tag filter on the right. The contents of the selected tab show on the left. The reason the selector panel is on the right here is, first, that it is not a primary means of navigation—it’s a secondary filter; the flow in this case would be to look at the results and then pick a filter.

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

Example of the Two-Panel Selector UX Pattern Example of the Two-Panel Selector UX Pattern

Sources

Jennifer Tidwell, Two Panel Selector

Tags

Selection, Navigation, Page Layout, Browse, Filtering.