The guidance tooltip provides contextual help throughout the application.

Usage

The guidance tooltip can be used:

  • To point out a new feature
  • To guide the user through a new experience
  • To help explain why data is being collected
  • To help with task completion

Appearance and behavior

The guidance tooltip can be triggered in three ways:

  • On page load
  • When specific conditions are met such as first time visits or when releasing new features
  • On click or tap event (see info link)

Responsive behavior

Desktop

The guidance tooltip points to (or guides users to) a specific element on the page. It may have multiple steps (see guided tour). For single-step help, there should be no step-indicator or pagination.

 

Mobile

The guidance container slides in quickly from the top of the screen and is dismissible. It remains in place during scroll.

Fixed

  • Close “x”, visible at all times.

Flexible

    • Variable width and height with min 236px (width) x 108px (height) and max values 486px (width) x 172px (height). Note: on mobile, guidance always spans full width of the screen with a max height of 156px.

 

    • Step indicator; recommended unless number of steps changes (is conditional).

 

    • Can contain illustration/animation. Used to help communicate feature/functionality.

 

  • Can contain help/text link.

Do

  • Keep copy concise (no more than 3 lines). Character count recommendations: titles, 30 characters or less; body, 150 characters or less. Titles can wrap as needed.
  • Set titles in sentence case.
  • Limit the number of guidance tooltips per screen. Too many of these links clutters the experience and makes the product seem harder than it is. For desktop screens, the maximum number of tips is 3. For mobile screens, the maximum number is 1.

Don't

  • Don’t write lengthy help content in a tooltip.
  • Don’t include multi-step information.
  • Don’t clutter screens with too many tooltips or help links. If the product and terms are truly that complicated, then we need to redesign the product.
  • Was this Helpful?
  •