|
Size: 709
Comment:
|
Size: 3528
Comment:
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 8: | Line 8: |
| The | |
| Line 9: | Line 10: |
| compare to '''[[Pagination]]''', especially the simulated page view when using a book... This pattern only allows for a single page of additional information, much more like drug facts are peeled away... The '''Peel Away''' pattern is not particularly suitable for scroll-and-select devices. Even if a virtual cursor is available, the action is not as natural, so is not worth using except on touch and pen devices. |
|
| Line 18: | Line 22: |
| The peel away may operate in one of three manners. These are not precisely variations, as they should be largely driven by the interaction standards upon which the OS operates: * Tap the peeled up corner to reveal the back page. * Drag back the peeled up corner to open the back page. The drag action will, much like the '''[[Filmstrip]]''' have to move a certain distance before it commits; releasing before this will * drag and hold, for viewing only... good when you have less than full page to show off, like a little note or help... These may sometimes be combined. For example, dragging and tapping may both be supported. Closing the panel reverses the actions in all cases. Use the same method to |
|
| Line 21: | Line 31: |
| closed, peeled back edge usually, from the lower right corner (for left-to-right languages). if space is needed, and not critical info, can have it very subtly peeled back, and much more obvious only for a few moments as the page loads, then it settles... An icon may be placed over the folded back page, or on the part of the back page that is visible, to indicate to the user what information is there. This is most useful when the icon is easily understood, such as if the back page provides help information. Opening should be animated, so the front page peels back and progressively reveals the back page. Without the transition, the relationship may not be clear to users. When open, reverse it, and place an image of a page folded back, as though caught by a staple, in the upper right corner. Never hide this, so the user can easily return to the front page. The margins, type and general look of the back page should be similar to the front page, so there is a clear relationship between the two. A title should be presented on the back page, but may be in much smaller type than normal, as a note that the information is details, disclaimers or continued from the front page. |
|
| Line 24: | Line 43: |
| Do not use the '''Peel Away''' pattern to display a second page of information that simply continues directly from the front page. Use scrolling or conventional '''[[Pagination]]''' methods instead. Don't hide it... no way to discover otherwise ... Do not mix interaction paradigms, only allowing dragging to open, and tapping to close, for example. If animations required for this cannot be supported, use a pattern that does not require animation or 3D effects. |
The google maps on iPhone (I think) thing where you get to see other layers by peeling back to a layer behind. Shows as a peeled back corner, from old print design or from actually flipping pages, here, you can actually do so. Do not discuss eReader page flipping.
Problem
Display a layer of deeper information about a page in an organic manner...
Solution
The
compare to Pagination, especially the simulated page view when using a book... This pattern only allows for a single page of additional information, much more like drug facts are peeled away...
The Peel Away pattern is not particularly suitable for scroll-and-select devices. Even if a virtual cursor is available, the action is not as natural, so is not worth using except on touch and pen devices.
Variations
This is a fairly singular pattern, with no real variations presenting themselves aside from details of the graphic design.
Refer to other patterns such as 3D STUFF for similar methods.
Interaction Details
The peel away may operate in one of three manners. These are not precisely variations, as they should be largely driven by the interaction standards upon which the OS operates:
- Tap the peeled up corner to reveal the back page.
Drag back the peeled up corner to open the back page. The drag action will, much like the Filmstrip have to move a certain distance before it commits; releasing before this will
- drag and hold, for viewing only... good when you have less than full page to show off, like a little note or help...
These may sometimes be combined. For example, dragging and tapping may both be supported. Closing the panel reverses the actions in all cases. Use the same method to
Presentation Details
closed, peeled back edge usually, from the lower right corner (for left-to-right languages). if space is needed, and not critical info, can have it very subtly peeled back, and much more obvious only for a few moments as the page loads, then it settles...
An icon may be placed over the folded back page, or on the part of the back page that is visible, to indicate to the user what information is there. This is most useful when the icon is easily understood, such as if the back page provides help information.
Opening should be animated, so the front page peels back and progressively reveals the back page. Without the transition, the relationship may not be clear to users.
When open, reverse it, and place an image of a page folded back, as though caught by a staple, in the upper right corner. Never hide this, so the user can easily return to the front page.
The margins, type and general look of the back page should be similar to the front page, so there is a clear relationship between the two. A title should be presented on the back page, but may be in much smaller type than normal, as a note that the information is details, disclaimers or continued from the front page.
Antipatterns
Do not use the Peel Away pattern to display a second page of information that simply continues directly from the front page. Use scrolling or conventional Pagination methods instead.
Don't hide it... no way to discover otherwise ...
Do not mix interaction paradigms, only allowing dragging to open, and tapping to close, for example.
If animations required for this cannot be supported, use a pattern that does not require animation or 3D effects.