Add Onboarding/Feature Discover/Tour components

[jadus]

The material design guidelines have this great component.

Examples 🌈

• Material Design specifications: https://m1.material.io/growth-communications/feature-discovery.html

• Saas UI: https://saas-ui.dev/docs/components/engagement/tour
• https://github.com/elrumordelaluz/reactour
• https://github.com/usablica/intro.js (AGPL v3)
• https://github.com/shepherd-pro/shepherd
  • https://github.com/shepherd-pro/react-shepherd
  • Paid features: Analytics
• https://github.com/TeamWertarbyte/material-ui-feature-discovery-prompt
• https://github.com/gilbarbara/react-joyride
• Service
  • https://www.commandbar.com/docs/guides/nudge-experiences/setting-pin-nudges/
  • https://frigade.com/use-cases/onboarding-activation

Motivation 🔦

Presenting features and helping users navigate around an interface is as important as the interface itself.

Search keywords:

[mbrookes]

@jadus Have you come across this in the wild, either on Google's or other apps? I'm not saying it hasn't been done, but this doesn't seem from my experience to be a pattern that has made it outside the designers' sketchbook.

In fact other than that screenshot, I'm not seeing anything that indicates how it should behave: animation, interaction model, etc.

If you would like to put something together for the lab (as @oliviertassinari suggested), to explore the possibilities, you're welcome, but I don't think it will get much traction otherwise.

[oliviertassinari]

but I don't think it will get much traction otherwise.

@mbrookes I agree. I have added the lab flag to be kind. But I believe the "most probable" path forward is a third party library that implements it.

[jadus]

Well yes I've seen it on google apps (inbox, keep, calendar) I think it's very useful when you have new features coming in an app or when you want to introduce features at the right time.

Btw I want to thank you for this great library, my app looks great thanks to it : https://www.sboulder.com/

[jadus]

In fact it's named "feature discovery" and there's all animation and everything described in the guidelines. I edited the issue title and description.

[nischayv]

Would love to see this feature.

[brownbl1]

This would be a really nice addition or third party component. But it looks like that link to the spec is no longer working. Maybe it's been removed?

[mbrookes]

Here you go (Material-UI based): https://github.com/TeamWertarbyte/material-ui-feature-discovery-prompt

[jadus]

Wow how did I miss your project ? Thanks

[mbrookes]

Not mine, @leMaik's. 👍

[borisrorsvort]

New specs are somewhat described here https://m2.material.io/design/communication/onboarding.html#self-select-model

[oliviertassinari]

I have added the waiting for users upvotes tag. I'm closing the issue as we are not sure people are looking for such abstraction. So please upvote this issue if you are. We will prioritize our effort based on the number of upvotes.

[NawarA]

I do agree an onboarding component would be used by many / any applications built atop Material UI. Would see consistent use. I'd use it right now, for example

[NawarA]

i can add share my source code for this if you'd like...i rebuilt it to use modern hooks, etc

[jadus]

@NawarA I'd be glad to see your implementation. Thanks

[oliviertassinari]

I can connect this feature request to https://www.commandbar.com/docs/nudges/tours. It could make a nice service.

[Kavan72]

This would be great to see onboarding components like 'Intro.js' or 'Shepherd' in MUI.