Design patterns

Partial surface

Prompt users to perform a gesture that affects a portion of the screen, such as swiping a card.

“Hint motion” shows a preview of how sample cards move when performing the action marked by the gesture indicator.

Entire screen

Prompt a user to perform a gesture that affects the entire screen, such as pinching to zoom in.

The snackbar uses text to describe the swipe action that triggers movement between tabs. The gesture indicator visualizes the action while the gesture itself is partially performed in the background using hint motion.

Targeting and triggering

Gesture education should happen as the user needs it. It doesn’t need to be condensed into a user’s first moments with an app. It’s smart and contextual, helping users interact with an element or surface in a way they have not done so previously.

Whether the gesture affects only part of the screen, or the entire screen, similar targeting and triggering guidelines are used.

Targeting

Triggering

Show gesture education only to users who have not performed the gesture.

Gesture education occurs:

During the first-run experience (FRE)
In later sessions, if a user has not performed the gesture
After a major change to the UI

If a certain gesture is core to the user experience, present it at a contextually relevant moment later in the first-run experience.

If a gesture is not critical to the experience, show it in a later session at a contextually relevant moment. For example, swiping the toolbar in Chrome to switch tabs.

Volume and frequency

Volume

Limit the number of gesture education prompts displayed in your app and UI.

If a gesture is critical to your user experience, display up to two prompts during the first-run experience.

Frequency

Most gesture education prompts should be shown only once.

If a gesture is critical to your user experience, display it up to two times in distinct sessions.

Design & writing

Sample UI

Design

The sample UI should mimic the movement of the real UI it represents.

The gesture indicator should pause then disappear once a tap gesture is detected. The gesture being taught should be the only way to dismiss the sample UI. For example, only a left or right swipe will dismiss a card describing a swipe gesture.

Writing

Describe the result of the gesture in short and clear text.

This type of interaction may be used for a gesture that affects a portion of the screen, such as swiping a card.

Sample gesture

Design

Full-screen gestures should explain what the gesture will do using a snackbar.

When the user taps the screen, the page content should return to its default state, with the gesture indicator removed. Continue to display the bottom sheet until the user interacts with an element, such as tapping a button.

Writing

Describe the result of the gesture in short and clear text.

This type of interaction may be used for a gesture that affects the entire screen, such as pinch-to-zoom.

Gesture education

Design patterns Expand and collapse content An arrow that points down when collapsed and points up when expanded.