Versions Compared

Old Version 2

changes.mady.by.user Kavya Basu

Saved on

compared with

New Version 3

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

...

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

🌳 Variants

  • Sequence: A version with navigation dots that would appear in a sequence 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 one off with no nav dots: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

What should happen here? Do we close it automatically or do we block interaction while it’s open?

💕 Accessibility

...

Notes

Notes from collaborator conversations or meetings regarding this component.

...