Problem

A set of closely related items, which can be represented as icons or thumbnails, must be presented in a compact space and expanded to display the contents.

Solution

At first glance, this pattern appears to be a simple 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 [reveal Menu]), the primary displayed item is text. Graphics are supporting only.With a large collection of images (or similar, graphically-representable content) if drilldown is required, then a [grid] display using thumbnails as [icons] to open folders, OR a Stack of Items should be used.

REDO ABOVE As A 2 optional List...

Note that the drilldown is partly just opening the stack, and partly clicking the Link or Icon (image that the stack is composed of)...

Variations

Though demonstrated long ago, this is just not being implemented routinely, so there are very few common variations. 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...

Interaction Details

TAP to open... that's about it.

Presentation Details

Each item that unfolds is shown as a thumbnail. When folded, they all collapse to look like a literal (physical) stack of cards.

Needs to look like a stack. Never fold up so far that only the top thumbnail is visible.

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