UI Patterns and Techniques

Closable Panels


From Dreamweaver MX

Use when:

There's too much stuff to present on the page, but you want it all only one click away. The content is divisible into clearly-named sections, as with Card Stack.

In particular, this is a useful concrete implementation of Extras On Demand. If you've organized your content this way, you probably want to use some form of Closable Panel(s).

Why:

You would use this in many of the same places you might use a Card Stack -- it's a space-saving device that depends on a user clicking it to get at it. However, Closable Panels gives you a little more flexibility:
  • It can contain sections of wildly differing sizes. If you used a Card Stack, the smaller sections would have large areas of white space, which is awkward.

  • The user can open several sections at once. That's especially nice in authoring tools, and for "power users" of all kinds of complex applications.

  • When used with only one closable panel, that panel looks less important than the content it's embedded in. If you put that content and the section in question into two tab pages, for instance, they appear to be of equal importance.

There is a cost, however. Tab pages are well-understood by most people, but Closable Panels are not as common. Usability testing is recommended. Furthermore, the ability to open many sections at once may backfire in terms of overall clutter and usability.

How:

Divide your content into sections, name them appropriately, and put them into panels that appear and disappear when a button or link is clicked. Put an arrow, triangle, or chevron (">>") on the thing the user has to click -- this clues them in that something will open or close. In many applications, the triangle will point down to the open panel when open, and to the right when closed; these are sometimes termed "twist-downs."

In most applications where this is used, the window containing the Closable Panel(s) will grow and shrink as the panel is opened and closed. You might also (or additionally) put it in a scrolling panel, or into resizable panes, as is done in the Dreamweaver example above.

Another thing to note about that example is the use of a Card Stack nested inside a Closable Panel. This can certainly be done if you have a very large number of sections to deal with, and if they fit into a two-level hierarchical organization (e.g., the "Design" section contains subsections named "CSS Styles," "HTML Styles," and "Behaviors").

This technique has been in use since at least 1993, and possibly earlier. The Motif-based GUI builder UIM/X used closable panels -- even with the twist-down arrows -- for its widget palettes.