/
Product Tour (v2)

Product Tour (v2)

Contributors

@Kira Miller

Slack channel

 

Paragon PR

 

Jira ticket

https://2u-internal.atlassian.net/browse/ENT-10146

Design resources

https://www.figma.com/design/CDznc7PPoNiEQmfkkT57CV/ProductTour-proposal?node-id=0-1&p=f&m=draw

Technical docs

 

Design Changes

The main difference of this proposal is with the header of the checkpoints. We are replacing the breadcrumbs with a page index, replacing the dismiss capability which used to be a tertiary button with a “Back” button, and surfacing an 'x' close button on every checkpoint.

 

 

 

 

Technical Changes

This update will be removing the showDismissButton prop that was previous there to enforce visibility of the dismiss button is all circumstances. With the presence of the close button on every Checkpoint, a conversation with a11y said that two dismiss buttons could be confusing, since a user might be unsure if they do the same thing.

Considerations

Pros

  • Replacing the breadcrumbs with page index is a more readable and accessible approach

  • Introducing a close button is more consistent than having a button that can change text

Cons

  • Could introduce the anti-pattern of longer product tours, which is not recommended or well received by users

Accessibility

Considerations:

  • Because of ProductTour’s ability to customize the button text, please be mindful of using descriptive and plain text that is consistent throughout the tour