Gestures
Gestures are all the ways people interact with UI elements using touch
- Gestures help people navigate, take action, or transform content
- UI elements should respond to gestures in real time
- Tap, scroll, and swipe are common gestures
Resources
| Type | Link | Status |
|---|---|---|
| Design | Design Kit (Figma) | Available |
Types of gestures
Tap
People can navigate to destinations and interact with elements through touch.
Tapping a card opens an article
Double tap
Two quick taps allows people to zoom in and out of content.
Double tapping on a photo opens it to full screen
Long press
People can access additional functionality by pressing on elements for an extended time.
Long pressing a list item selects it
Scroll and pan
People can slide surfaces vertically, horizontally, or in any direction to move through content.
Vertical scrolling reveals more content
Swipe
People can navigate horizontally to:
- Switch between peer views like tabs
- Complete actions
Swiping a list item can reveal additional actions
Predictive back
On Android, a person can swipe left or right on certain components as a way to navigate to a previous destination. This gesture is called predictive back.
Before completing the swipe, the person can decide to continue to the previous view or stay in the current view.
Compatible components are:
A predictive back swipe on a bottom sheet goes back to the previous screen
Drag
People can move elements around and slide surfaces in and out of view.
A list can be reordered by dragging a list item
Pick up and move
A long press and drag allows people to reorder content.
A calendar event can be picked up and moved to a new time
Pinch
People can scale surfaces to navigate between screens.
A photo can be pinched outward to a full screen view
Compound gestures
Users can fluidly transition between various gestures, like panning and pinching in a map view.
A map UI can be navigated through a combination of pan and pinch