Suggest device flipping also (especially multi-screen multi-side devices), but mostly rotating the virtual space to see the other side of an object. On-screen gesture, kinesthetic gestures, etc. ALSO all other 3D effects, like cube displays, etc. Find mobile equivalent of Fast User Switching on mac, and other weird 3D ways of getting to more data. Moving things out of the way, looking around or to the side of an object, etc.

Problem

Display a small amount of directly related information, provide access to related controls or settings, or provide an alternative view of the same information, in an organic manner.

Solution

Use Simulated 3D Effects to pretend components on the page, or even the whole page, merely presents one side of a physical object. Rotating the object, moving it aside, or looking past it, can then be used

Note that this is labeled as "Simulated" as it does not require actual 3D display technology. Some display methods can even be simulated without particularly involved graphics processors. If the pattern seems useful for your design, investigate ways to accommodate it with the technology available.

This pattern works best when direct manipulation of the screen or the device is used. It will rarely work well on scroll-and-select devices without accelerometers.

Variations

To use Simulated 3D Effects, one of three methods of interaction, and the associated methods, will be used:

1. Screen gesture... flip items or the whole screen to a side or move items to see those behind.
2. Device gesture... accelerometer, maybe using machine vision (camera) as a backup... rotate slightly to peek around items, move them with simulated gravity (items slide away)
3. Viewing point, using Machine vision of some sort, or actual 3D when available... move head, screen can see and react to simulate 3D... look around items by moving the head relative to the screen... parallax effects...

In the event the device has two screens, one on each side of the device, a device gesture that rotates from one side to the other may display related information on each screen, without using simulated 3D effects...

Interaction Details

What...???

MAY NEED TO BLOCK INTERACTION WITH THE OBJECTS OR USE CAREFUL GESUTRES TO KEEP INTERFERING...

Presentation Details

Details of the presentation are almost unlimited, offering even more scope than most other interactive patterns. From geometric shapes to natural scenes with leaves and grass, anything is possible. Make sure the style used matches the OS, or the brand of the product or service, and that it is still understandable and usable.

The shapes must look 3D, so the user expects to find additional information with an interaction, even when closed. This may be as subtle as providing a shadow to indicate the item has height. Try to add additional details, such as movement, or build imperfections into any machine-vision or accelerometer-based systems so minor actions will cause the other faces or items behind to peek out.

Antipatterns

Avoid using secondary interactive methods to change the on-page elements.

Examples