Versions Compared

Old Version 1

changes.mady.by.user Hilary Gordon (Deactivated)

Saved on

compared with

New Version Current

changes.mady.by.user Hilary Gordon (Deactivated)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Status
colourYellowBlue
titleDRAFTready for review
Status
colourPurple
titleDesign PENDINGin progress
Status
titleIMPLEMENTATION PENDING

Expand
titleWhat are these tags?

The three statuses above and their possible values:

Status
titlePROPOSAL STATUS

Status
titleDESIGN STATUS

Status
titleIMPLEMENTATION STATUS

Status
colourYellow
titleDRAFT

Status
titleDESIGN PENDING

Status
titleIMPLEMENTATION PENDING

Status
colourBlue
titleREADY FOR REVIEW

Status
colourYellow
titleDESIGN PLANNED

Status
colourYellow
titleIMPLEMENTATION PLANNED

Status
colourGreen
titleAPPROVED TO ADD

Status
colourPurple
titleDESIGN IN PROGRESS

Status
colourPurple
titleIMPLEMENTATION IN PROGRESS

Status
colourRed
titleDEFERRED

Status
colourGreen
titleDESIGN COMPLETE

Status
colourGreen
titleIMPLEMENTATION COMPLETE

Status
colourPurple
titleNEEDS CHANGES

For more information see the https://openedx.atlassian.net/wiki/spaces/BPL/pages/1773502564/Component+Contribution+Process#Step-1-%E2%80%93-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

...

Table of Contents
maxLevel2
typeflat
separatorpipe

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)

...

...

🌞 Best Practices

Tip

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)

Warning

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

...

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.

...