Problem

You must display a set of closely related items, which can be represented as icons or thumbnails, in a manner implying the hierarchy, and providing easy display of the contents.

Rotating and moving images, especially smoothly, requires relatively powerful or specific graphic processing, and will not be available on all platforms. Assure you have the technical capability before designing such an interactive method.

The "Photos" stack in the left frame is tapped, and the thumbnails move into their final Grid positions as the page behind changes. Note the title changes, and the processing icon in the title bar during the transition, as well as the importance of the labels below each stack in this example.

Solution

A Stack of Items is a design pattern that is exactly as it sounds. A set of thumbnails are arranged so they appear to be actual items such as a pile of photos stacked on top of each other. Only the top one is completely visible, but to make the stack clear, others stick out the sides. Selecting the top item opens the stack, revealing all the thumbnails, and providing further selection or access to each item.

The concept of drilldown for the Stack of Items inherently encompasses two tiers of the hierarchy, instead of only the usual one. Opening the stack to reveal the images within is one, and clicking the linked icon to view the image details (or otherwise load the target state) is the second.

At first glance, this pattern appears to be a graphic variation on the various expanding folder views such as Hierarchical List, and should therefore not be used in favor of the simpler, more common display methods when they will do fine.

The difference is the content; for list displays, the primary displayed item is text, and any graphics are supporting only. With a large collection of images (or similar, graphically-representable content) if drilldown is required, then use a Grid display using Icon thumbnails of each image to open folders, or use the Stack of Items if the platform will support it.

Variations

Two basic interaction and display paradigms exist for all interfaces like this.

The transition from stacked to open takes place on a static screen, without a transition to another space. This requires space be provided for the stack to open into, or that other items on the page move out of the way. When folded, these items may or may not move back to their original position. This is the least common method used.
Or, the transition from stacked to open takes place at the same time as the underlying page changes also. When folded, the stack may be in a relatively constrained area. The unfolded state may then occupy space as it needs, as the available space is dedicated to it. The page transition is obscured behind the stack expanding; the user simply will not notice it happening.

The Stack of Items pattern is still relatively new in production devices, so has not established many common variations. It his been well-used in many prototypes, and large scale touch devices (like the Microsoft Surface). If capable of supporting such a pattern, try to take time to explore alternative methods of using this pattern that may tie to others. For example, if sensor driven tilt is used in the Grid display of items when open, it may be useful to enable tilt when stacked, either for viewing or as a method to open the stack. For other ideas along these lines, see Simulated 3D Effects.

Interaction Details

This pattern represents a simulated physical set of objects, so even with simple tap-only behaviors it is really most suitable for touch and pen devices. Consider the complete experience carefully before including in a purely scroll-and-select interface.

Simple selection of the stack (such as a tap for touch & pen devices) will open it and initiate the transition to the expanded state. When used with scroll & select devices -- or the scroll & select interface of a mostly touch device -- the entire stack, including the thumbnails "sticking out" must be included in the highlighted state.

Other interactions, such as drag to fan-open or certain kinesthetic gestures, should only be used if similar gestures are commonly employed in the rest of the OS.

While the stack is unfolding, do not allow selection of individual cards. This will prevent accidental input from the use trying to chase moving items. Do not disable any other functions. Selecting the "back" or "cancel" button (or gesture) will immediately stop the unfold action and reverse the animation to the closed state.

If room allows, place a Wait Indicator in the title bar or other location to indicate this condition; the system may become occupied, or lock up, and this will help explain the temporary loss of input.

There is no organic provision for collapsing an unfolded set of thumbnails. The device's default "back" function must be used, or a dedicated on-screen control placed, on the screen or as a part of a Fixed Menu or Revealable Menu.

Presentation Details

Show each item that unfolds as a thumbnail. When collapsed, the stack will look like a literal (physical) stack of cards, occupying a space only slightly larger than the top thumbnail. Shadows and other effects (as long as they do not interfere with viewing the thumbnails) should be used to emphasize this. The edges of individual items should be clear in all cases, to assist with differentiating the images from the background. This helps imply the items are selectable and not just decoration or parts of the background.

When stacked, the cards should look like a stack, though a messy one, with some cards sticking out from the edge in some manner. Never fold up so far that only the top thumbnail is visible. The top item in the folder (using whatever method is relevant for the content type) is used as the label for the stack. Sometimes, you may want to allow the user to select which item serves as the label or badge for the stack, but generally it will have to be automatically generated, so may not be representative of the contents. Be aware of this as a possible pitfall.

Put a text label under the folded stack, as described in the Icon pattern. Individual thumbnails may or may not be labeled, depending on the relevance. Critical differentiators (e.g. video or still photo) may be indicated with icons laid on top of the thumbnail.

Antipatterns

Do not use this pattern if it cannot be built to operate smoothly and responsively on all the targeted devices.

As with all such simulations and effects, avoid over-using or mis-applying this pattern.This may cause it to be an unusual interaction, which could be perceived as non-standard. Therefore, assure it adds value when used.

Do not use a generic icon/graphic to describe the stack, i,e. iphone grouping, be sure to indicate it's a folder very clearly...

Do not present a "Stack of Items" that simply reloads the page as a Grid. The unfolding action should always be animated to show the thumbnails moving from the stack to the final display location.

Next: Annotation

Discuss & Add

Please do not change content above this like, as it's a perfect match with the printed book. Everything else you want to add goes down here.

Examples

If you want to add examples (and we occasionally do also) add them here.

Make a new section

Just like this. If, for example, you want to argue about the differences between, say, Tidwell's Vertical Stack, and our general concept of the List, then add a section to discuss. If we're successful, we'll get to make a new edition and will take all these discussions into account.