Place the selectable list on the top or left panel, and the details
panel below it or to its right. This takes advantage of the visual
flow that most users who read left-to-right languages expect. (Try
reversing it for right-to-left language speakers.)
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
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
- 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
When the select-and-show concept extends through multiple panels,
to facilitate navigation through a hierarchical information
architecture, you get the
Cascading Lists pattern.