Display Gesture

The Display Gesture pattern describes how to move fingers to produce display-related gestures that trigger actions on mobile devices. These include, but are not limited to, tapping, dragging, holding, and pinching.

There are two variations of the display gestures described in this pattern.

Common Gestures: Used fairly often among both phones and tablets.
Uncommon Gestures: Fairly unique and may be used in special circumstances.

Note that if a gesture you need is not available in Mobile Application Framework (MAF), you can still register for various browser touch events to determine things you need. Moreover, if a gesture you need is not listed in tables below, it does not mean you cannot use it in your application. You can use whatever gesture you want as long as it is intuitive and discoverable by your users.

Behavior & Usage

The following are common behaviors and usage guidelines for display-based gestures. Not all gestures might be supported in all frameworks.

Common Gestures

Tap

A quick, one-finger tap to the screen that triggers an action. It is analogous to a mouse-click and is principally to perform an action or open a link or pop up. In contrast to a mouse-click, minimum size of tappable UI elements in a 1024 by 768 screen is 44 x 44 pixels. Icons and other elements do not necessarily have to be larger in a touch-screen application, but they may need to be spaced more widely apart to allow the user comfortably and accurately tap an item.

Usage

Use to select an object or list item or trigger an action.

Press & Hold

A one-finger press-and-hold on the screen until an action is triggered. The hold time is typically half of a second; the exact time should be tested with users in each new context.

Usage

On the iOS, press-and-hold over text brings up a magnified view for cursor positioning.
On Android, press-and-hold over text selects the text.
It is recommended to use press-and-hold over active elements in applications to bring up contextual menus (in place of right-clicking) or popups.
Android Design Guidelines recommend to avoid using long press for showing contextual menus. In some apps, this gesture is used for multiple selection.

3D Touch

One or more finger forced press on the screen that usually triggers a menu on selected iOS devices. Also called a forced touch.

Usage

Used to open contextual menus or actions. Similar to the right-click menus on browser.

Drag

A one-finger press, hold and drag or one-finger press and drag triggers an action. The dragging can be done in any direction. When the finger is released from the screen, the gesture is completed.

Usage

A one-finger drag can be used to adjust slider controls, move objects, draw shapes, or to scroll or pan screen content.
Tablet users are accustomed to panning content freely in any direction (in maps for example), but in some common enterprise contexts it may make sense to limit drags to either a horizontal or vertical direction in order to scroll pages, tables, panels, or swim lanes.
On iOS and Android, this gesture is also used for reordering icons between screens - users press, hold and drag the icon to the edge of the screen and continue to hold while a new screen appears.

Swipe

A very quick, one-finger move (press, hold and move) to any direction. This swipe gesture allows the user to scroll or pan a page rapidly or to fling objects across the screen. The resulting motion should be inertial, moving at accelerate speed at first and then slowing to a halt.

Usage

On iOS, swiping a table row or list item is used for revealing contextual actions.
Bezel Swipe (swipe from out of the screen) gesture is used for showing system-provided or custom service, e.g. Control Center on iOS.

Two-Finger Drag

A two-finger press, hold and drag to the screen to trigger an action.

Usage

A dragging motion with two fingers is a standard way to scroll an independent region within a larger scrollable area (a table or panel within a web page). Since scroll bars are not normally shown in applications, the distinction between one and two-fingered drags can be crucial.
Reliance on this method, should be avoided whenever possible, since not all users are familiar with it. Instead intercept drag events and lay out pages so that there is no ambiguity about user intention. iOS 5 added native support for container scroll overflow, making it easier to allow users to scroll through a container's content with a single finger. As a result, the need for two-fingered scrolling fades.

Pinch-Close/Spread-Open

A two-finger pinch-together gesture to zoom in. Alternatively the user employees a two-finger spread-apart gesture to zoom out.

Usage

Use to zoom in or out on maps, images, and diagrams.
Use to perform related actions, such as expanding a tight clump of images into a gallery display, documents, or pages.

Double Tap

A quick, one-finger double-tap to the screen to trigger an action.

Usage

On iOS and Android, this gesture is used as a shortcut to zoom in and center an image or block of content. The same gesture is used to zoom out, if already zoomed in.
In situations where one tap selects an object and a second tap triggers some other action, a double-tap can also be used as a shortcut for two successive single taps.
Because of the strong association between double tapping and zooming, it is not recommended to use the double-tap for other purposes (that is, do not use it as a replacement for double-clicking or right-clicking).

Rotate

A two-finger press-the-screen and rotate-in-a-circle gesture on the screen.

Usage

This is commonly used to adjust the orientation of images, maps, or other elements.

Uncommon Gestures

Multi-Finger Drag

A multiple-finger press and drag to the screen to distinguish different levels of action.

Usage

The iPad uses four-fingered drags as a shortcut to switch between multi-tasking apps.
Some apps support distinct actions for drags using up to 10 fingers. Such distinctions, if over-used, are not only hard for users to discover, but they are also hard to remember and could cause accessibility issues.

Two-Finger Tap

A quick, two-finger tap to the screen to trigger an action.

Usage

Tapping with two fingers simultaneously has sometimes been used instead of press-and-hold to replace a right-click. In Google maps, a one-finger double tap zooms in and a two-finger tap zooms out.
Windows 7 uses the two-finger tap to zoom in and out (instead of the double-tap used by iOS). As a result, there may be some user confusion between double tap and two-finger tap.
Due to discover ability issues, it is recommended to avoid the two-finger tap gesture unless user testing on tablet applications shows that users are familiar with double-tap and press-and-hold interactions.

Two-Finger Double Tap

A quick, two-finger double-tap to the screen to trigger an action. It is essentially a combination of the double-tap and the two-finger tap.

Usage

It is rarely used and is not recommended.

One-Finger Press, Other-Finger Tap

This gesture can be performed by pressing the index finger in one location and then tapping another element on screen with another finger or by pressing an element or area with one hand and tapping somewhere else with the other.

Usage

The first form has been used as yet another replacement for right-clicking; the second form could be used for interactions involving multiple states or objects.

Press & Release

This is a variation of the press-and-hold gesture in which a state change is maintained as long as the user continues to press a button or region.

Usage

It could potentially be used to temporarily overlay tool tips or other layered information.

Rub Out

The user drags quickly back and forth over an object in order to delete it.

Usage

This gesture is intuitive but is rarely used, perhaps because it is harder to detect.

Encircle

The user traces a rough circle around a word, area, or object in order to select it.

Usage

This gesture is intuitive, but can only be used in situations or states in which it does not conflict with other dragging or tracing gestures. Giving that, this gesture is not commonly used.