Two panel selector
The Design Need:
The user needs to work with items from a list and you want to show the content of a selected item next to the list
Design Examples:
Design Solution:
Place two panels next to or above each other, with one containing the list of items to work with and the other containing the content of the item selected in the first list. Choose the orientation that best fits the type of content. This design pattern is closely related to the cascading list pattern which includes more than one panel. Design best practices to implement are as follows:
- Give clear feedback about which item from the list is presented in the second panel
- Provide feedback about the items that have been opened
- Allow users to navigate through the list using their keyboard arrow-keys
- If appropriate, provide basic actions that can be performed on the selected item, a selection of the list or the complete list such as add to shopping basket, delete, mark as (un)read, open, etc..
When to use:
You want to provide easy access to a list of items that contain more detailed content. Showing the content of a selected item next to the complete list will help the user to navigate through the list of items. Typical item lists are e-mails and songs or images.
Why use this solution (rationale):
The two panel selector allows users to navigate easily through a list of similar items with different content. Since the overview and the content are shown next to each other they can shift between detail and overview by simply moving their focus.
More info elsewhere:
- “Two panel selector” design pattern on www.designinginterfaces.com
- “Two panel selector” design pattern on http://quince.infragistics.com
