|
Size: 2295
Comment:
|
Size: 3048
Comment:
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 2: | Line 2: |
| 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. | 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. |
| Line 6: | Line 6: |
| 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. | 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. |
| Line 8: | Line 8: |
| 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. | 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. |
| Line 10: | Line 10: |
| REDO ABOVE As A 2 optional List... | 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. |
| Line 12: | Line 12: |
| Note that the drilldown is partly just opening the stack, and partly clicking the Link or Icon (image that the stack is composed of)... | 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. |
| Line 16: | Line 17: |
| 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). | 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. |
| Line 20: | Line 25: |
| This pattern represents a simulated physicalset of objects, so even with simple tap-only behaviors it is really must suitable for touchand pen devices. | This pattern represents a simulated physical set of objects, so even with simple tap-only behaviors it is really must suitable for touchand pen devices. |
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 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...