Help content is contained in a page callout and is always available from the header or the trowser header. It provides quick access to contextual, screen-specific topics as well as search for specific help content, or access other support options.

 

Usage

Desktop Example (768+ px)
The Help Flyout displays after clicking the help icon in the global header.

Global help Desktop Example (768+ px)

When the user clicks on a help topic or does a search, a help popover displays with the resulting content and the flyout closes. The help popover content is sticky and persists even if users navigate to another page. The Help popover can be moved (dragged to any location on the screen), minimized, and resized, but it always stays on top.

Global Help desktop details

Mobile Example (320-768px)
Help icon: Screen takeover

Screen takeover example

 

PON Help (Help at point-of-need)


Usage

Provides contextual help throughout the application.

Guidance Tooltip

When to use

  • Orientation – to call out new product features or changes; to call out features that a customer has not used before.
  • Workflow guidance – to recommend an action.

They can be activated in three ways

  • On page load
  • When specific conditions are met
  • On click or tap event. (See Info link.)

Desktop Example (768+ px)
The guidance tooltip points to (guides users to) a specific element on the page. It may have multiple steps (see Guided Tour). For single-step, there should be no step-indicator and pagination.

Help and guidance tooltip positioning

Mobile Example (320-768px)
The guidance slides in quickly from the top of the screen and is dismissible. It remains in place during scroll.

Help and guidance mobile positioning

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’s

  • Keep copy concise (2-3 lines snippets). Character count limit recommendations: Title – 30 chars or less. Body – 150 chars or less. Titles automatically wrap as needed.
  • Titles are in sentence case

Don’ts

  • Lengthy help content. Multi-step information.

Guided Tour (WalkMe)

When to use

  • Orientation – to call out a series of new product features or changes.
  • Workflow guidance – to guide users through a series of actions.

They can be activated 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.)

A Guided Tour is a set of sequenced Guidance Tooltips, and can be used for situations that required a more guided and sequential approach. 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!”.

Desktop Example (768+ px)

Guided tour tooltip positioning

Mobile Example (320-768px)
The guidance slides in quickly from the top of the screen. Note: this animation only appears once at the beginning of the tour.

Guided tour mobile positioning

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. “Next” is disabled.

Guided tour disabled next step

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.

Manually initiating tour example

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.

Dismissing tour example

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)

Do’s

  • Ideally 3 – 4 steps.

Don’ts

  • No more than 6 steps.

Help link (blue link)

Help Links open a help topic (in the Help popover). They provide answers to more complex questions.

When to use

  • Use Help Links when in-depth information is helpful to the user. An example: During QB setup, we require information from a specific government document, and the link sends the user to a help topic describing why the user needs a certain document and where to find it.

Desktop Example (768+ px)
Help link opens the help topic in the Help popover.

Help link desktop example

Mobile Example (320-768px)
Help link opens the help topic in a screen takeover.

Help link mobile example

Do’s

  • Link capitalization is sentence case
  • Use common language to inform users what the link leads to

Don’ts

  • Don’t use phrases such as “click here” without providing any context

Info link (dotted underline)

When to use

  • Use Info Links when minimal clarification is needed. They’re ideal for clarifying an action, or quickly defining a term. (These links replace the old question mark icon. They provide more context with less clutter.)

Info links can be applied to text in a sentence, a field label, or plain text on the page. A dotted underline appears by default. On hover/click/tap, the link turns blue and a Guidance Tooltip appears.

Desktop Example (768+ px)

Info link desktop example

Mobile Example (320-768px)

Info link mobile example

Do’s

  • Link capitalization is sentence case (exception when link is a name)
  • Use common language to inform users what the link leads to

Don’ts

  • Don’t use phrases such as “click here” without providing any context
  • Was this Helpful?
  •