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 Simulated 3D Effects 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. For example, if drag and hold is not used otherwise in the OS, it should not be used in an individual application:

• Tap the peeled up corner to reveal the back page.

• Drag back the peeled up corner to reveal the back page. The drag action will, much like the Filmstrip have to move a certain distance before it commits; releasing before this will snap back to the closed position. The dragging is a direct interaction, so must follow the user's drag speed, including inertia.

• If the back pack contains only content, and there is less information than a full screen, a drag-and-hold action may be used instead. The front page can be pulled away, but never "flipped over" so it sticks. As soon as the drag is released, the front page will fall back into place.

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 or methods to both open and close.

Except when impossible, such as the drag-and-hold method, the back page may support any interactions, including settings, links to other sections of the application or links to other applications.

Presentation Details

When closed, the Peel Away function must present an affordance, usually by being peeled back slightly from the lower left corner (for left-to-right languages like English). If space is at a premium on the front page, this can be minimized, but should never be eliminated, so the function is difficult to discover. To encourage use, the effect can be exaggerated at page load, with the peeled back edge settling slowly in a second or two.

An icon may be placed as a translucent element 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. Use physics models, or set timing to simulate the actual behavior of paper.

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.

Unless explicitly an "Easter egg" and intended to be hidden, always show the peeled back edge. Do not make users guess or ask friends how to get additional useful information. Delight only comes when self-discovery is easy.

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.

Examples