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

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

Interaction Details

This pattern represents a simulated physicalset of objects, so even with simple tap-only behaviors it is really must suitable for touchand pen devices.

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

• Anything for scroll and select? I think maybe not, except minor mention of focus...

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