Gestures

Users tap to activate commands, select items, or set focus on interactive elements using mouse or touch input. This gesture is essential for navigation, initiating actions, and interacting with UI components across various devices.

Common Uses

Activate, select, set focus

Best Practices

• Offer visual responses, like state changes, after a tap to confirm the action and boost user confidence.
• Design touch targets large enough to accommodate various devices and user needs, promoting accessibility.
• Ensure a tap produces a predictable result and avoid assigning multiple outcomes to a single tap.
• For critical or destructive actions, like delete, use secondary confirmations to prevent unintended taps.
• Make sure tap interactions work with screen readers and keyboard navigation to support inclusive design.

Tap (press and release)

Users perform a long tap by pressing and holding an element, which reveals additional contextual information, options, or actions. It's commonly used to access context menus or view custom tooltips, allowing quick access to secondary functions without cluttering the interface.

Common Uses

Context menu, custom tooltip

Best Practices

• Use long tap only for secondary tasks to ensure essential interactions remain easily accessible with standard tap gestures.
• Detect the long tap within the design system's standard time frame to maintain a consistent user experience.
• Provide alternative ways to access long tap actions for users relying on assistive technologies, like keyboard shortcuts or accessible menus.

Long tap (press, hold, and release)

Users perform a drag gesture by pressing, holding, and then moving an element to a new location. This gesture is commonly used for drag-and-drop actions. It allows easy repositioning of files, images, or UI components, enhancing organization and streamlining the workflow within the interface.

Common Uses

Drag and drop

Best Practices

• Apply the drag gesture when the user benefits from moving an object directly, for example, to rearrange items, adjust the layout, or explore spatial relationships in data or content.
• Start dragging only after a short press-and-hold delay or when a dedicated drag handle is used. This approach helps prevent accidental activation during standard scrolling or tapping gestures.
• Display a clear visual indicator (ghost element) that follows the user's finger or pointer during the drag operation.
• Ensure drag functions are accessible via mouse, touch, and keyboard equivalents. Provide clear focus indicators and keyboard controls for users with limited mobility.

Drag (tap and hold, move, and release)

Users perform the pan gesture by sliding their fingers across a surface in any direction, like up, down, left, or right. This gesture lets users navigate smoothly through content, such as scrolling through lists or panning across maps. It offers a fluid and intuitive way to interact with touch interfaces.

Common Uses

Controlled scrolling

Best Practices

• Ensure that the pan gesture follows the user’s finger with smooth, consistent motion, aligned with the platform’s native scrolling behavior.
• Prevent interference with other gestures, such as swipe or drag, by using gesture prioritization or region-specific handling as needed.
• Avoid assigning critical commands to a pan gesture. Panning should move content or the viewport, not initiate actions.
• Ensure users can navigate the same content with a keyboard (for example, using arrow keys or tab order) and with assistive technologies.

Pan up/down

Pan left/right

The swipe gesture lets users slide their fingers horizontally across a touch surface, often revealing item-related actions, like quick actions in lists. It enhances the user experience by providing quick, intuitive access to essential actions. Swiping can have various functions depending on the context. For example, in views, swiping often helps scroll through content vertically, horizontally, or both. In lists, it can trigger quick actions like delete or archive.

The flick gesture is similar to swipe but differs in speed and momentum. Flicking involves a quicker motion, causing content to scroll farther. It accelerates to a certain velocity and decelerates gradually. Flicking up or down scrolls content in the direction of the flick and continues for a few pages before slowing down. Unlike swiping, which stops when the finger lifts, flicking up or down continues scrolling in the direction of the flick. The same applies to flicking left or right for horizontal scrolling.

Common Uses

• Swipe to expose item-related actions
• Fast scrolling in the corresponding direction

Best Practices

• Assign the swipe action to reversible or secondary functions and avoid binding critical or irreversible actions to swipe alone.
• Display actions progressively as the swipe occurs, with clear icons and labels to indicate outcomes.
• Reserve swiping for clear contexts and ensure it doesn’t interfere with other gestures.
• Ensure swipe actions can also be triggered through menus, keyboard, or assistive technologies.

Swipe (tap, move, release)

The pinch gesture is performed by touching the screen with two fingers and bringing them closer together to zoom out or scale down content like images, maps, and documents. This intuitive gesture lets users view a broader area or reduce content size, making navigation smoother and more efficient, thereby enhancing the overall user experience in apps and interfaces.

Common Uses

Zoom out

Best Practices

• Apply pinch where zooming out enhances comprehension, such as detailed graphics, spatial layouts, or dense visual data.
• Reflect scale changes in real time as the fingers move, using fluid transitions to reinforce user control and orientation.
• Don't bind navigation or destructive operations to pinch gestures, which should be reserved for visual scaling only.
• Ensure zoom functions are available through buttons, menus, or keyboard shortcuts for users who might not be able to use multi-touch gestures.

Pinch (touch with two fingers and bring them closer together)

Users perform a stretch gesture by touching the screen with two fingers and moving them apart, which zooms in on content. This gesture is commonly used to enlarge images, maps, or documents. It lets users focus on specific details and interact with content closely, enhancing precision and improving navigation within the interface.

Common Uses

Zoom in

Best practices:

• Apply stretch in interfaces that benefit from closer inspection, such as media viewers, charts, or spatial layouts.
• Reflect zoom changes immediately as the fingers move apart, using smooth and responsive transitions to maintain user orientation.
• Define maximum zoom levels to prevent pixelation, distortion, or usability issues.
• Don't use stretch to trigger navigational or critical interface changes; it should remain a visual scaling gesture only.
• Ensure zoom-in functionality is accessible through buttons, sliders, or keyboard commands to support all user groups.

Stretch (touch with two fingers and move them apart)

The tilt/rotate gesture lets users rotate objects on a screen using a two-finger gesture. To perform it, users place two fingers on the screen and change the angle between them, either by moving both fingers together or keeping one fixed while the other moves. This intuitive gesture makes it easy to adjust the orientation of objects, enhancing control and interactivity within an application.

Common Uses

Rotate (left, right)

Best Practices

• Apply the rotate gesture only where rotating objects enhances usability, such as in media viewers, editing tools, or spatial interfaces.
• Objects should rotate continuously with the gesture. Ensure the movement feels precise and immediate to maintain a sense of control.
• Constrain rotation to fixed angles or ranges where appropriate to avoid disorientation or alignment issues.
• Rotation should enhance visual interaction, not replace core navigation or primary functions.

Tilt / rotate

The double tap gesture, performed by rapidly tapping twice on an element, is commonly used to select a word of text or activate the default action for an item. This intuitive gesture lets users quickly interact with content, like highlighting text for editing or activating a button or link. By streamlining interaction with frequently used elements, the double tap gesture enhances efficiency and responsiveness in the user experience.

Common Uses

• Select a word of text
• Activate the default action for an item

Best Practices

• Ensure that double tap doesn't interfere with single tap actions or other gestures. Clearly define gesture priorities to prevent unintended behaviors.
• Upon detecting a double tap, offer visual cues, such as highlighting the selected item or transitioning to a new view, to confirm the action to the user.
• Make sure all actions accessible via double tap are also available through alternative input methods, like keyboard navigation, to accommodate users with diverse needs.

Double tap to highlight a word

The double tap gesture on images, performed by rapidly tapping twice, is commonly used to zoom in to a specific level, even 100%. This lets users quickly view an image in greater detail without manually adjusting the zoom level.

Common Uses

• Zoom in to a specific zoom level
• Zoom to 100%

Best Practices

• Apply the gesture to images where users benefit from quick access to detailed views, such as product photos, diagrams, or technical illustrations.
• Zoom to a consistent, predefined scale (such as 100%) to avoid confusion and support repeatable interactions.
• Ensure that double tap doesn't trigger unintended single-tap actions. Manage gesture priorities based on context.
• Visually transition into the zoomed state smoothly and clearly, maintaining user orientation and control.
• Offer additional zoom controls or keyboard shortcuts to support users who don't use gestures or require assistive input.

Double tap to zoom in