Closable panel
The Design Need:
There is a large amount of related information and users do not want to access all information at the same time. Users will need specific information only under certain circumstances.
Design Solution:
Closable or collapsible panels divide the information into sections that can be opened whenever users need more detailed information.
- Place the content subsections into different panels that are clearly labelled and placed on top of each other.
- Allow users to open and close panels easily. Use clear indications that panels can be opened and closed.
- Let the window where the closable panels are placed grow and shrink along with the space needed to display the panels.
- When a panel is opened or closed, use a noticeable transition.
When to use:
There are several reasons to use this design pattern (however, you should only use it if the content can be divided into clearly named subsets):
- There is a large amount of related information you want to make available at the same level
- Users will only need specific information in certain circumstances
- Using closable panels helps to keep the screen clean and only shows details on demand
Why use this solution (rationale):
Progressive disclosure is a design principle that gives users a clear, simple overview and allows them to obtain more details of the items they are interested in. Closable panels can be used to implement this principle. Closable panels allow users to access the details they need by opening and closing as many panels as they wish at the same time.
Closable panels are closely related to local zoom. Whereas closable panels allow opening multiple panels and often contain larger chunks of information or functionality, local zoom focuses on one item.
More info elsewhere:
- Closable panels design pattern on www.designinginterfaces.com
- Collapsible panels design pattern on www.welie.com
- Progressive disclosure on www.wikipedia.org
