UI Patterns and Techniques

Card Stack

From Internet Explorer for Windows
Use when:	There's too much stuff 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.
Why:	The labeled "cards" structure the content into easily-digestible chunks, each of which is now understandable at a glance. It makes the information architecture obvious. Tabs, especially, are very familiar to users. Finally, Card Stacks save space.
How:	First, get the information architecture (IA) right -- split up the content into coherent chunks, and give them short, memorable names (one or two words, if possible). Then choose a presentation: Tabs are great, but they usually require 6 or fewer cards. Don't "double-row" them; scroll them horizontally if you must. A lefthand column of names works well on many Web pages and dialogs. You can fit a lot of cards into one of these. It lets you organize them into a hierarchy, too. (At some point it becomes more like an Overview Plus Detail; there's really no clear boundary between them, technically.) 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. It can work if the containment is very, very obvious; see the example. Remember that if you split it up wrong, users will be forced to switch back and forth between cards as they enter information or compare things. Be nice to your users and test the IA.
Examples:
From Internet Explorer for OS X In Mac OS X, there are many applications that use dropdown lists (here showing "Copies & Pages") in places where tabs might have be used. Dropdowns are space-conserving, and allow for long or numerous page names, but the user can't see what other pages are available until they open the dropdown list. Note the box around the controls; this kind of containment is necessary for a user to understand what the dropdown does. Otherwise, it just looks like another control, not a navigational device.
Also from Internet Explorer This time the selector is a list on the left. This example walks the line between Card Stack and Overview Plus Detail.
From Netscape 7 The "tab" buttons in this Netscape sidebar are vertically stacked, and they move from top to bottom as the user clicks them, so that 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.)