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 small amount of deeper information, or provide access to related controls or settings, in an organic manner.

Solution

The Peel Away pattern uses simulated 3D effects to pretend the page loaded is a piece of paper, which can be peeled or flipped back to view a second page behind it. Compare to the Pagination pattern, especially the simulated paper effect versions. This pattern only allows for a single page of additional information, and is much more comparable to presenting the same information in a Pop-Up. The value of this pattern is in

This 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:

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