Problem

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

Solution

The Stack of Items is a design pattern that is exactly as it sounds. A set of thumbnails are arranged so they appear to be stacked on top of each other, with only the top one completely visible. 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 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, and should therefore not be used in favor of the simpler, more common display methods.

The difference is the content; for list displays, like the Hierarchical List, 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 a Grid display using Icon thumbnails of each image to open folders, or a Stack of Items should be used.

Variations

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

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.

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.

TAP to open... that's about it. TAP TO OPEN INTO GRID,...

TOUCH ON OTHERS, LIKE TWO-FINGER GESTURE TO OPEN A LITTLE, DRAG TO FAN LIKE A DECK OF CARDS, ETC. DO NOT DISCUSS THEM FURTHER...

Presentation Details

Each item that unfolds is shown 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, 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.

Antipatterns

As with all such simulations and effects, avoid over-using or mis-applying this pattern.This may cause it to Se an unusualinteraction, which could be perceived asnon-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...

Examples