Guidance Tooltips provide contextual help throughout the application.
When to Use
- 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 & Behavior
Page Callout Guidance can contain text and/or images to help explain a first time use experience or why certain data is being collected. Most pages should be centered around one core task, and the Page Callout pertains to that core task. It cannot be closed, and sits off to the right side of the page.
The Page Callout can scale to accommodate varying lengths of content, which should be as succinct as possible. A link can be used to direct the user to the Help Center for additional guidance.
Multi-Step: Guided Tour
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. The user steps through the tour by clicking the next and back buttons in the tour, or by taking a specific action on the page.
- A Guided Tour appears on page-load, or is triggered when specific conditions are met. Exception: If the user is given the option to take the a tour or skip it on a previous screen AND the user elects to skip the tour, then the tour will not be launched by default.
- Clicking outside the tour does not close it. The Guided Tour is a tooltip, not a modal, so the rest of the page is active. If a user takes an action on the page outside of the Guided Tour, the tour persists. If the user leaves the page, the tour ends.
- On the first step, the “Back” (left arrow) button is removed. On the last step, the “Next” (right arrow) button is removed and in place of the “Next” button is a text link that says “Done!”.
- Sometimes the user must take a specific action on the page to advance the tour. In this case, the “Next” button is disabled.
Manually initiating a tour
- A permanent to link to launch the guided tour should always be available in the Help flyout menu below the other contextual help links.
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
- Close (x), visible at all times
- Logic added to allow the experience to be conditional
- Variable width and height with min and max values
- Character count limits: Title – 30 chars or less. Body – 150 chars or less. The copy should be concise. Avoid more than 5 steps if possible.
- Tooltip pointer and headline should be grouped as closely as possible
- Step indicator; recommended unless number of steps changes (is conditional)
- Illustration/animation. Used to help communicate feature functionality (click to play the animation).
Single-Step Guidance points to a specific element on a page and can be used to call attention to new features, for example. Tooltips can scale to accommodate varying lengths of content, including illustrations or animations. The copy should be as succinct as possible.