Differences between revisions 21 and 22
Revision 21 as of 2011-01-05 01:24:54
Size: 6355
Editor: localhost
Comment:
Revision 22 as of 2011-01-05 02:35:04
Size: 6383
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 35: Line 35:
There is no organic provision for collapsing an unfolded set of thumbnails. The device's default "back" function must be used, or a dedicated on-screen control placed, on the screen or as a part of a Fixed Menu or Softkey. There is no organic provision for collapsing an unfolded set of thumbnails. The device's default "back" function must be used, or a dedicated on-screen control placed, on the screen or as a part of a '''[[Fixed Menu]]]'' or '''[[Revealable Menu]]'''.

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.

The photos stack in the left frame is tapped, and the thumbnails move into their final Grid positions as the page behind changes. Note the title changes, and the processing icon in the title bar during the transition.

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.

Simple selection of the stack (such as a tap for touch & pen devices) will open it and initiate the transition to the expanded state. When used with scroll & select devices -- or the scroll & select interface of a mostly touch device -- the entire stack, including the thumbnails "sticking out" must be included in the highlighted state.

Other interactions, such as drag to fan-open, should only be used it similar gestures, are commonly employed in the rest of the OS.

While the stack is unfolding, selection of individual cards should be disallowed. This will prevent accidental input from the use trying to chase moving items. Do not disable any other functions. Selecting the "back" or "cancel" but on (or gesture) will immediately stop the unfold action and reverse the animation to the closer state.

If room allows, place a Wait indicator in the title bar or other location to indicate this condition; the system may become occupied, or lock up, and this will help explain the temporary loss of input.

There is no organic provision for collapsing an unfolded set of thumbnails. The device's default "back" function must be used, or a dedicated on-screen control placed, on the screen or as a part of a Fixed Menu] or Revealable Menu.

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.

Folded stacks should be labeled, as described in the Icon pattern. Individual thumbnails may or may not be labeled, depending on the relevance. Critical differentiators (e.g. video or still photo) may be indicated with icons laid on top of the thumbnail.

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

Do not present a "Stack of Items" that simply loads a Grid. The unfolding action should always be animated to show the thumbnails moving from the stack to the final display location.

Examples

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