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.
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.
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.
Gestures that execute actions should use graphics that communicate what the gesture will do.
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.
Scroll and pan
Users can slide surfaces vertically, horizontally, or omnidirectionally to move continuously through content.
Drag
Users can slide surfaces to bring them into and out of view.
Swipe
Users can move surfaces horizontally to navigate between peers, like tabs.
Pinch
Users can scale surfaces to navigate between screens.
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.
Swipe
Users can slide elements to complete actions upon passing a threshold.
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.
Compound gestures
Users can fluidly transition between various gestures.
Pick up and move
A long press and drag allows users to reorder content.