Designing Gestural Interfaces

DRAG TO MOVE OBJECT

WHAT

Using a single finger on top of an object on-screen moves that object, along with the finger, to a new location.

USE WHEN

Use this pattern for drag-and-drop, sliders, and other controls to enable the user to move an object to another part of the screen.

WHY

Without being able to grasp and pick up an object, users still need a way to move objects, so pushing and pulling them with their finger is a natural action to accomplish this. Some controls, such as sliders, require this pattern.

HOW

Either the object has to be selected first, or this gesture has to be combined with Tap to Select so that an object that is beneath a touch event can be automatically selected and moved with the finger as it moves across the screen. Objects on-screen can be constrained to slide in only certain directions (e.g., left and right on a slider).

EXAMPLES

Figure 3-7. A concept for Comfort, an environmental system controlled by a touchscreen remote control. Sliding a thumb down the slider changes the temperature. Courtesy Valliant.

Figure 3-8. The iPhone's Slide to Unlock feature lets users slide the "latch" in only one direction, which is indicated with both an arrow and an animation on the words "slide to unlock." Courtesy John Pastor.

Figure 3-9. You control the loopArenaMTC music device by ...