Note that Drag, Swipe, and Fling gesture activities are covered in their own section due to their highly contextual results.
Note that Drag, Swipe, and Fling gesture activities are covered in their own section due to their highly contextual results.
Touch
One-finger press, lift
Example: Select
Double touch
Two-finger press, lift, 1-finger press, lift
Example: Zoom in
Drag, Swipe, or Fling
One-finger press, move, lift
Example: Dismiss, scroll, tilt
Long press
One-finger press, wait, lift
Example: Select an element, such as a list item
Long press is not used to display a contextual menu.
Long-press drag
One-finger press, wait, move, lift
Example: Pick up and move, select multiple items
Double-touch drag
One-finger press, lift, one-finger press, drag, lift
Example: Zoom in, zoom out
Pinch open
Two-finger press, move outwards, lift
Example: Zoom in
Pinch closed
Two-finger press, move inwards, lift
Example: Zoom out
Two-finger touch
Two-finger press, lift
Example: Zoom out
Two-finger drag, swipe, fling
Two-finger press, move, lift
Example: Select multiple items, pan, tilt
Two-finger long-press
Two-finger press, wait, lift
Example: uncommon
Two-finger long-press drag
Two-finger press, wait, move, lift
Example: Pick up and move
Two-finger double touch
2-finger press, lift, 2-finger press, lift
Example: Zoom out
Rotate
2-finger press, simultaneously orbit both fingers around center point, lift
Example: Rotate content, such as a map
Because the activity performed by a swipe gesture can vary greatly based on context, this section describes some of the major swipe gesture patterns and their differences.
Gesture velocity (from least to most) is the main distinction between Drag, Swipe, and Fling. Depending on context of use, gesture velocity can produce different results:
A swipe becomes a fling based on ending velocity and whether the affected element has crossed a threshold.
Generally, gesture velocity impacts whether the action is immediately reversible once crossing that threshold: a Drag maintains contact with the element, and reversing the gesture will drag the element back across the threshold; a fling imparts velocity and removes contact with the element while it crosses the threshold, preventing a reversal.
Vertical or horizontal swipe in content body.
Scroll amount varies based on velocity of gesture: drag (slow) vs. swipe vs. fling (fast)
Generally:
Reversing the scroll direction in a content area can have an additional effect of immediately revealing hidden in-app elements. E.g., scrolling up in Chrome shows the Omnibox.
Dismiss in-app elements by resuming original scroll direction.
Omnidirectional, 1 or 2 fingers
Generally applied to:
2-finger pan gesture, when transitioning from another 2-finger gesture (e.g., pinch zoom or rotate) such as in Maps, will result in 2-finger pan .
2-finger pan gesture as the initiating gesture will result in tilt .
Drag is typically used with Pan.
Fling will maintain gesture velocity, resulting in a significant pan of the content along the direction of the fling gesture.
Originates on a swipeable element such as a list item or card.
Orthogonal to direction of scrolling.
Gesture is typically horizontal, with symmetrical actions
The Dismiss gesture is committed based on crossing a threshold.
Available at index zero of a list, or at the content origination edge of an empty container.
Generally vertical and in a downward direction.
A swipe that originates outside of the screen. Invokes out-of-context content, that is, content separate and distinct from the current view.
If no edge swipe action is defined, an Edge swipe gesture can default to a Paging swipe .
The Edge swipe gesture is committed based on crossing a threshold.
An on-screen, in-content swipe that reveals additional, related off-screen content.
Don’t use paging swipes when individual elements are swipeable. Gesture reveals one page/tab per paging swipe.
Paged content may be >100% zoom, in which case an in-content swipe will P an to an edge of the content, and an additional in-content swipe will Page .
See also: Overscroll collapse
The Paging swipe gesture is committed based on crossing a threshold.
Navigate up in hierarchy.
Paging swipe at the top or bottom of scrolling content to navigate to Parent content.
The Overscroll collapse gesture is committed based on crossing a threshold.
Drag originating from a menu or picker reveals a menu. Upon lift, the highlighted menu option is selected.
Menu appears upon touch
Drag is used with Menu open .
Tilts 3D content forward or backward
When transitioning from another 2-finger gesture (e.g., pinch zoom or rotate) such as in Maps, will result in 2-finger pan .
Drag is used with Tilt .