Product tour

Owned by Hilary Gordon (Deactivated), created
Last updated: Jun 03, 2021
2 min read

ready for review Design in progress IMPLEMENTATION PENDING

The three statuses above and their possible values:

PROPOSAL STATUS

DESIGN STATUS

IMPLEMENTATION STATUS

PROPOSAL STATUS

DESIGN STATUS

IMPLEMENTATION STATUS

DRAFT

DESIGN PENDING

IMPLEMENTATION PENDING

READY FOR REVIEW

DESIGN PLANNED

IMPLEMENTATION PLANNED

APPROVED TO ADD

DESIGN IN PROGRESS

IMPLEMENTATION IN PROGRESS

DEFERRED

DESIGN COMPLETE

IMPLEMENTATION COMPLETE

NEEDS CHANGES

 

 

For more information see the Contribution Process | Step 1 – Start a component proposal.

The purpose of the product tour component is to point out and describe information on a page that users need to learn about. It includes navigation dots and a carat.

Contributors

@Hilary Gordon (Deactivated) @Kavya Basu

Slack channel

Paragon Jira ticket

Other Jira tickets

Design resources

Technical docs

1 Variants | 2 Best Practices | 3 Related Components | 4 Specification | 4.1 Behaviors | 4.2 Accessibility | 5 Notes

Design

 

https://www.figma.com/file/2o1hW9WW1mNWr0esZ2A7xq/Onboarding?node-id=156%3A64

Variants

  • Sequence: A version with navigation dots that are bundled and contain at least 2 tips (pictured above)

    • Navigation dots to indicate progress through sequence

    • Dismiss (tertiary button) and Next (Primary)

    • Last tip in a sequence will change Primary button to “Done”

  • One-off: A version that is standalone

    • No navigation dots (N/A)

    • No dismiss, just an “Okay” button (Primary)

https://www.figma.com/file/2o1hW9WW1mNWr0esZ2A7xq/Onboarding?node-id=184%3A71

Best Practices

Do

  • Use when you need to introduce a new feature or new information to the user

  • Show only once in a learner journey and allow dismissibility if they aren’t interested in the content

  • Scroll the learner to the correct focus area as they sequence through (on mobile, that means scrolling the page for them)

Don't

  • Put a paragraph of text in the tip! Keep it short and sweet.

  • Put >5 in a sequence variant or the user will have fatigue

Related Components

 

Specification

What does an engineer need to know in order to build this component?

Redlined Design Spec

Behaviors

Click outside the tip when it’s being shown

Will not close; works like our current tooltip where you need to interact to close it

Clicking Dismiss (Sequence variant) or Okay (One-off variant)

Closes the tooltip

Clicking Next (Sequence variant)

Center screen on tooltip

Accessibility

 

Notes

Notes from collaborator conversations or meetings regarding this component.

XX.XX.20XX