Closable Panels

Problem

You have a lot of ancillary things that you need to be readily available, but you don’t want to show them all the time.

Solution

Put some or all of your ancillary things, such as tools, controls, or extra information, into distinct panels that users can close or open individually as needed.

Context

• You need to have identifiable groups of these things so that the panels can be named in a way that is understandable to users.
• The things in the panels are usually those that need to be always a click away—if you don’t need that, just use menus. This is normally not appropriate for navigation.
• Usually, the things in the panels are directly related to or act on the main item, such as the page content, an image or document being edited, a list of items, or whatever.
• The things in the panels are optional—they’re not always required to complete the task at hand.

Rationale

Like the Tab Dialogs pattern, this pattern can be used as a space-saving device and there is a device to select them to show/hide, but the key benefit of this over tabs is being able to have multiple panels open at once. Also, unlike tab dialogs, the panels are free to be of different sizes within the overall panel space, e.g., if the panels are along the side, they can easily have different vertical sizes as needed.

More important than saving space is minimizing visual distraction. Often, complex tools such as multimedia editing, software IDEs, and others have many tools for interacting with a main object in the view. Users typically only use a small portion of these, so being able to close and, effectively, ignore tools that they’re not interested in helps them focus in on the task at hand and also can help them find the specific tool they’re after faster.

It follows, then, that you want to design the sections with the users in mind—group things maybe not so much by conceptual integrity as by task integrity—if you can do so without proliferating panels too much. Unlike the physical world, the software world enables you to share the same tools across multiple palettes/toolboxes, so if your panels are task-oriented (rather than, say, information oriented), this organization scheme might be better.

Also, by putting these things in closeable panels on the edges of the view, you visually imply that they are secondary, that, unless they are needed, they can safely be ignored as a group when focusing on the main item is the main task. You wouldn’t want to put critical task commands into closeable panels—you want those to be always visible and often in the main view area with the main item(s).

Implementation

As with most organizational patterns, the most important step is to think critically about the organization. Come up with groups that are meaningful to users and, if applicable, are task oriented.

Once you have the groups defined, you can create a panel for each group. Use the group name as a title, one that usually looks like a bar or is otherwise clearly denoted as Titled Sections. To close and open the panel, you can use the title, but it is best to add a visual indicator like a plus/minus, arrow, triangle, or chevron to indicate the section status and that it can be closed and opened. It is good to make this indicator feel like a button to make it clear that it can be clicked.

It’s common to put all of the groups into surrounding panel, and in many tools that panel can be moved itself and, in some cases, closed, as in Outlook 2007. At a minimum, it is best to group the panels so that they’re not just all over the place, and put them on the edge somewhere—left or right side is most typical.

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

Closable Panel pattern is implemented in the following ASP.NET controls: WebPanel, WebListBar. Check out the samples browser to see it in action.

Silverlight

You can use the NetAdvantage for Silverlight xamWebOutlookBar control for this.

Windows Forms

You can use the NetAdvantage for Windows Forms controls: WinExplorerBar, WinExpandableGroupBox, WinDockManager to implement this pattern. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser called MyFinanceto see it in action.

WPF

You can implement this pattern using the NetAdvantage for WPF XamOutlookBar Control. If you download the NetAdvantage for Win Client bundle, you can find a sample in the xamFeatureBrowser called Creating XamOutlookBar to see it in action.

Sources

Jennifer Tidwell, Closable Panels

Tags

Interaction Design, Information Architecture, Page Layout.