Is it just me that closes these as fast as possibly whilst grumbling about how annoying they are?
While as a product user I hate product tours, as a product developer I always wish for an open source alternative. Library looks super cool in terms of the effects which are slick.
Personally from over a few products have built, even the best designed product tours get dismissed 90% of the time in SMB & consumer products.
I like these, but only a little.
Don't force it on new users, but ask if they want a tour.
Only use sparingly when new features/buttons/changes are added to the app. Only once per session. Prompt is Dismiss/Tour option.
It's better if your app has an "intuitive" UX. But an un-forced tour can be helpful.
Its better than the sign-in interstitial to announce features.
Tours aren't always bad, but they're often just poorly implemented, with too many steps that don't mean anything to the user. Onboarding that's contextual, like embedded tips, or relevant, like targeted onboarding by persona, or action-oriented onboarding, like checklists tend to be better.
After leading onboarding and in-app education teams at Dropbox, I started Dopt [0], which is a react component library and SDKs to make it easier to build tours, but also more contextual and less distracting onboarding experiences like embedded tips and checklists. My hope with Dopt is that you can still build tours when necessary (like 2 step tours to introduce a new feature), but have a bigger and better toolkit for all types of onboarding and education.
This looks great. What does it do differently to Shepherd[0]?
Problem with these type of tours is a lot of information shoved into your face in short time and then it disappears, few minutes later the user will be asking “what was this section for again?”, I tried it in a platform I built before, it was to fly drones and some sections where to control while others for video feed etcs, so you should know what to do before clicking due to the dashboard complexity, users will be nodding their head and hitting next without even reading any. Had to remove it eventually and instead I added a little information icon for each to hover over to get some info what that section is about.
I built a library https://github.com/Evernote/Aquaman meant to accomplish some of these same tasks for a Redux app (also did the same think for React context, but that was never open sourced).
The things this misses, I think, are that 1) you probably want the state of you app to trigger a guided tour, 2) you probably want a multistep flow at some point, and 3) the state changing logic of that flow probably should be separated from the rendering logic (all the steps of the flow should be together).
That’s what I was able to accomplish with Aquaman.
Thanks, as a user I hate it. As a developer this is a great library to use to satisfy product.
I just saw Walnut.io [1] demo for another product today. I skipped through most of the demo, did not really understand anything about the product. I think it is not the tool but really depends on who and how these product tours are built.
I can imagine some products are complex and needs explanation or hand holding by solution engineers, account managers etc. No product ever is so amazing that you don't need help or product tours.
It's an old library... been using it for WakaTime since 2018 (5 years). It's very handy to highlight one feature on a page based on a url param, for example when your FAQ wants to link directly to a mentioned setting. We don't like product tours because they're annoying, so we only display one highlight per page showing the first thing you should do when onboarding. Like a tooltip highlighting a button on the page, not a product tour.
There is really nothing new in this over intro.js, shepherd or the other 10 competing modules.
If someone wanted to offer something new in the product tour space, make a fully frontend-only tour that has the convenience of the cloud-stored ones. (Aka be able to click on HTML elements to attach steps).
I think this would be a nice product nieche for the companies who don't want their product to phone up a random third party API for a product tour.
User onboarding tutorials implemented as wizards with masks have never appealed to me. It's like navigating through a forest while only looking down, limiting the overall learning experience. I once had to implement one of these tutorials, and the data revealed that very few people even used it. From that experience, I firmly believe it's an anti-pattern to avoid.
If anyone is looking for a jQuery days version of something like this https://zurb.com/playground/jquery-joyride-feature-tour-plug...
I made a more complete library a while back for those interested, driver has been known here for a while but Lusift is new and doesn't have that traction -
I don't know what this does, but I do like the look of this site. It's as if the smarty.net people updated their site.
I think this is great at what it does. The only issue I have with it is the fact that if a targeted element is offscreen, it snaps to it instead of scrolls to it. Otherwise very, very slick.
Cool js, but I absolutely despise websites or software that do this.
I also made a version of this https://github.com/CSFlorin/react-onboard
> you can click out to cancel the tour
This is great! Finally an implementation that I can cancel and restart whenever I want. Thank you for making this.
I always feel annoyed when I see this. Users don't read and skip everything.
How does this compare with intro.js?
surely a good alternative to userflow which kinda sucks
Please include a Skip button if you use these
What's with the resurgence of marquee elements lately? They're terrible for usability/readability and are visually annoying.
If anything this is a red flag for other aspects of the library.
No no no no no.
Design your product to be understandable at first pass. Apple famously doesn't do any of this with your iPhone, while Sony forces you to do it on every new device.
Let the onboarding be a forcing function for usability. This isn't a crutch, it's something worse and damaging.