Resources
Related Guidelines
Usage
The user steps through the tour by clicking the next and back buttons in a guidance tooltip, or by taking a specific action on the page.
-
Use for orientation, to call out a series of new product features or changes.
-
Use as workflow guidance, to guide users through a series of actions.
Appearance and behavior
The guidance tooltips can be triggered in three ways:
-
On page load
-
When specific conditions are met
-
On click or tap event. (e.g. Take a tour in a before/after task modal, contextual link in the help flyout)
Arrow placement
These are the different arrow placement available for use in product.
Responsive behavior
Desktop
-
The user steps through the tour by clicking the next and back links in the tour, or by taking a specific action on the page
-
Clicking outside the tour does not close it. The rest of the page remains active. If a user takes an action on the page, the tour persists
-
On the first step, there is no “Back” link. On the last step, the Next link is replaced by Done.
Disabled
When the user must take an action in the product before being able to move on to the next step of a multi-step guidance. The Next button is disabled.
Example: Manually initiating a tour
A permanent link to launch the guided tour can be made available in the help flyout below the other contextual help links.
Example: Dismissing a guided tour
-
Clicking close “x” at any time or Done on the last step ends the tour.
-
A message appears briefly letting users know they can recall the tour via help.
Mobile
The guidance slides in quickly from the top of the screen. Note: this animation only appears once at the beginning of the tour.
Examples
