Gestures

Gestures let users interact with screen elements using touch.


Principles

Gestures help users perform tasks rapidly and intuitively using touch.

Alternative interaction

Gestures use touch as another way of performing a task.

Easy to use

Users can perform gestures in imprecise ways.

Tactile control

Gestures allow direct changes to UI elements using touch, such as precisely zooming into a map.


Properties

Provide realistic responses

Material responds to gestures in real-time to express direct user control over touch interactions.

Material responds to gestures in real-time to express direct user control over touch interactions.

DoThe user’s touch should directly control the movement of elements.
Don'tAvoid gestures that trigger an animation. Elements should be directly controlled by the user’s touch.
DoWhen animating an element to a destination, the speed of the user’s gesture should be matched by the speed of the element being moved across the screen.
Don'tDon’t misrepresent the velocity of a gesture in the resulting animation. The animation should match the speed of the user’s touch.

Indicate gestures

How elements look and behave should indicate if gestures can be performed on them. Visual cues indicate that a gesture can be performed, such as...

How elements look and behave should indicate if gestures can be performed on them. Visual cues indicate that a gesture can be performed, such as showing the edge of a card to suggest it may be pulled into view.

The edge of a sheet invites the user to pull it into view.
In the absence of other affordances, icons provide a clear indication that a gesture can be performed.
Animate elements before the user interacts with them to suggest a gesture.
Elevated surfaces, like cards, suggest that they can be moved independently.

Show what gestures do

As a user performs a gesture, elements should move in a way that demonstrates the gesture’s purpose. Gestures that execute actions should use graphics that...

As a user performs a gesture, elements should move in a way that demonstrates the gesture’s purpose.

Element transitions should continuously animate as a gesture progresses.
The size of the photo and visibility of the scrim suggest that this drag gesture will close the photo.

Gestures that execute actions should use graphics that communicate what the gesture will do.

Upon swiping, an icon appears to suggest the purpose of the gesture. The radial fill indicates that a threshold has been passed and the action will be committed when the gesture is completed.

Types of gestures

Gestures help users to navigate between views, take actions, and manipulate content.

Types of gestures include:

  • Navigational gestures
  • Action gestures
  • Transform gestures

Navigational gestures

Navigational gestures help users to move through a product easily. They supplement other explicit input methods, like buttons and navigation components. Types of navigation gestures...

Navigational gestures help users to move through a product easily. They supplement other explicit input methods, like buttons and navigation components.

Types of navigation gestures include:

  • Tap
  • Scroll and pan
  • Drag
  • Swipe
  • Pinch

Tap

Users can navigate to destinations by touching elements.

Users can navigate by directly tapping elements or controls, like buttons.

Scroll and pan

Users can slide surfaces vertically, horizontally, or omnidirectionally to move continuously through content.

Users scroll vertically through content in a list.
Panning allows users to move expansive surfaces in any direction.

Drag

Users can slide surfaces to bring them into and out of view.

Users can drag surfaces like bottom sheets into view.
Users can close scrolling surfaces by dragging them past a distance threshold.

Swipe

Users can move surfaces horizontally to navigate between peers, like tabs.

Swiping the content of a tab allows the user to move between tabs.
Don'tAvoid situations where a single gesture might produce two different results.

Pinch

Users can scale surfaces to navigate between screens.

Users can pinch a surface to open and close it. The expansion of the surface suggests that the pinch gesture is available.

Action gestures

Action gestures can perform actions or provide shortcuts for completing actions. Types of action gestures include: The tap gesture and long press gesture each allow...

Action gestures can perform actions or provide shortcuts for completing actions.

Types of action gestures include:

  • Tap
  • Long press
  • Swipe

Tap or long press

The tap gesture and long press gesture each allow users to interact with elements and access additional functionality.

A tap allows users to perform actions and interact with elements.
Long presses can reveal additional modes and features, but are not easily discoverable.

Swipe

Users can slide elements to complete actions upon passing a threshold.

Users may quickly commit actions to list items by swiping them.

Transform gestures

Users can transform an element’s size, position, and rotation with gestures. Types of transform gestures include: A pinch, or two quick taps, allows users to...

Users can transform an element’s size, position, and rotation with gestures.

Types of transform gestures include:

  • Double tap
  • Pinch
  • Compound gestures
  • Pick up and move

Double tap or pinch

A pinch, or two quick taps, allows users to zoom into and out of content.

Pinches allow users to zoom into and out of content along a gradient of zoom levels.
Double taps allow users to zoom into content, or toggle between zoom levels

Compound gestures

Users can fluidly transition between various gestures.

DoEnable users to seamlessly transition between gestures such as zooming, rotating, and panning.
Don'tDon’t prevent users from fluidly transitioning between multiple gestures.

Pick up and move

A long press and drag allows users to reorder content.

Cards can be reordered by using a long press to pick them up, and dragging them to a new position.

Up next