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

START BY DESCRIBING IT! SIMULATE A STACK OF IMAGES AND THEN EXPAND IT IN PLACE TO SEE THE CONTENTS OF THE STACK. THE STACK CAN BE CONSIDERED A SORT OF FOLDER.

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

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).

TWO DO EXIST... 1) Everything is one - They just have to move out of the way, somehow. Look up how this works in Surface, etc. Maybe they only occupy spare room? 2) Hidden transition - Really, you DO drill down to another page, giving room to expand to an “Infinite List“ if need be, but the transition is obscured behind the stack expanding. The user simply doesn’t notice it happening.

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