A guided tour (a set of sequenced guidance tooltips) can be used for situations that require a more guided and sequential approach to page-level help.

 

 

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)

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.

Mobile guided tour

Fixed

  • Close “x”, visible at all times.

Flexible

  • Step indicator is optional; recommended unless number of steps changes (conditional).
  • Optional message indicating how to recall the tour on dismiss (see example: dismissing a guided tour).

 

Mobile

The guidance slides in quickly from the top of the screen. Note: this animation only appears once at the beginning of the tour.

Mobile guided tour

 

Mobile

The guidance slides in quickly from the top of the screen. Note: this animation only appears once at the beginning of the tour.

Mobile guided tour
  • Was this Helpful?
  •