Differences between revisions 15 and 16
Revision 15 as of 2011-01-04 23:42:52
Size: 3755
Editor: shoobe01
Comment:
Revision 16 as of 2011-01-04 23:57:02
Size: 4650
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 6: Line 6:
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 '''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.
Line 15: Line 15:
== 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.
Line 16: Line 20:
== 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.
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.

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

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

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

Stack of Items (last edited 2011-07-31 21:06:40 by shoobe01)