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 - Items, or the whole screen, will react to drag actions.

   • The selected item may be flipped to another side. Usually, these are represented as rectangular prisms, flipping 90° at a time.

   • The items may be moved around the screen. This should not be confused with Stack of Items which allows actually manipulating the items selected, but may be similar looking.

2. Device gesture - The device senses position relative to the viewer. The

... accelerometer, maybe using machine vision (camera) as a backup... rotate slightly to peek around items, move them with simulated gravity (items slide away)

1. Viewing point - Using machine vision, or a 3D display, when the user moves relative to the screen, items declared to be above others may simulate parallax and allow looking under them to other items or the background.

In the event the device has two screens, one on each side, 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

When items are selected and directly manipulated, they may be rotated to view information or controls on another face of the element, or slid away to see past, to the top of another item or the background. Only one of these types of movement may be allowed.

Assure that interactions on a movable element do not interfere with any gestures. For example, only allow clicking on the element, and any drag actions will rotate or move it.

When device gestures or viewer movements are used, any items effected will follow imposed physics, and either react to the movement (fall to the "downhill" side) or stay in place and allow viewing past the item.

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.

Items on the screen which are not directly related to the interaction reveal method should generally exist within the simulated 3D environment. Lighting changes will fall on them, items which move must pass over or under them, or bump into or bounce off them, and so forth.

Antipatterns

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

Avoid use of multiple types of interaction methods. Movement via on-screen gestures will tend to change the user's frame of reference enough they may tilt the device, and rapidly loose control.

Examples