The Second Edition is out!
Visit designinginterfaces.com to read excerpts and learn more.

Card Stack


Internet Explorer properties dialog box

What:

Put sections of content onto separate panels or "cards," and stack them up so only one is visible at a time; use tabs or other devices to give users access to them.

Use when:

There's too much material on the page. A lot of controls or texts are spread across the UI, without benefit of a very rigid structure (like a Property Sheet); the user's attention becomes distracted. You can group the content into Titled Sections, but they would be too big to fit on the page all at once. Finally -- and this is important -- users don't need to see more than one section at a time.

Why:

 The labeled "cards" structure the content into easily-digestible chunks, each of which is now understandable at a glance. Also, tabs, the most common form of Card Stack, are very familiar to users.

How:

First, get the information architecture right. Split up the content into coherent chunks, and give them short, memorable titles (one or two words, if possible). Remember that if you split the content up wrong, users must switch back and forth between cards as they enter information or compare things. Be kind to your users and test the way you've organized it.

Then choose a presentation:

  • Tabs are great, but they usually require 6 or fewer cards. Don't "double-row" them, since double rowing is almost never easy to use; scroll them horizontally if they won't fit in one row all at once.
  • Vertical tabs let you force a Card Stack into a narrow, tall space that can't accommodate normal tab pages.
  • A lefthand column of names works well on many Web pages and dialog boxes. You can fit a lot of cards into a column. It lets you organize them into a hierarchy, too, which you really can't do with tabs. (At some point it becomes more like a Two-Panel Selector; there's really no clear boundary between them.)
  • Some UIs have a dropdown list at the top of the page, which takes less space than a link column, but at the cost of clarity: dropdown lists usually behave like controls, and a user might not recognize it as a navigational device. It can work if the containment is very obvious. But the user still can't see all the card titles at once.
If you want an alternative to Card Stack that lets people view two or more cards at one time, look at Closable Panels. They don't have quite the metaphoric power of tabs, but they can be quite effective for users who are motivated to learn how to use them.

Examples:


From http://thebanmappingproject.org

You can draw tabs in any number of ways, and they don't have to start on the left side. This is from the Theban Mapping Project web application.


From Netscape 7

Netscape imposes different physical constraints. The "tab" buttons in this sidebar are stacked vertically, and they move from top to bottom as the user clicks them, so now the selected page always has its button directly above it. This is an interesting solution for a constrained, vertically-oriented space. (It was originally seen in early versions of Visio.)