Hacker News new | past | comments | ask | show | jobs | submit login
Driver.js: Product tours, highlights, contextual help and more (driverjs.com)
348 points by thunderbong on July 24, 2023 | hide | past | favorite | 107 comments



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.


> Apple famously doesn't do any of this with your iPhone

You're arguing in favor of a product tour. iOS usability is garbage. There are no affordances. Nothing is discoverable. There are a million inputs (mostly gestures) that no one ever finds out about unless someone tells them or they Google it, and they're not consistent across apps, even first-party apps. Sometimes "swipe the row left" means "remove," sometimes it means "more actions". It's just a jumble of inconsistent nonsense.

Watch a non-tech person use their iPhone. They have no idea that they can do 50% of the things that they can do. Ever see anyone use "shake to undo" for example?


People not knowing some of the features is not really a problem, because it doesn't matter. Every single one of my elderly relatives can use an iPhone after a quick intro and they don't need help afterwards. The device is essentially self-serve once you understand one or two core ideas. Them not knowing about some features is not a problem, they can do all the important things without someone helping them out. No other smartphone platform has delivered that.


> People not knowing some of the features is not really a problem, because it doesn't matter

It does matter. I started using a iPhone maybe a couple of years back, after using an Android phone for many many years, and I still find out stuff randomly by chance that they could have just told me about.

Biggest example when I just got the phone, took me maybe a couple of days before I understood that swiping from the top of the screen and down depends on if you're on the left side or right side of the phone, which decides if you see the notifications vs the "control panel" thing. Initially it felt random which one it showed.

And I'm a technical user, probably in the top 1% when it comes to technical knowledge compared to the rest of the userbase of iPhones. And how do you think things like that works out for the rest of the people who don't work with technology for a living?


My non-English-speaking first-gen immigrant grandma that assembled rice cookers in factories back in her day figured slide down for notifications, right slide down for control panel, and slide up on day 4.

My mom didn’t ask about it until after the first year.

So to answer your question… maybe it doesn’t take to be the top 1% of something.


Come on, iOS is not so special. Grandmas all over the world get by just fine on an Android as well. If you don't do much with your device, you don't need much. At the same time, it is obvious that gestures should be consistent, and the documentation should be clear, on device, and easy to find.


I think this is a point where we'll fundamentally disagree, for all practical intents and purposes, no regular user ever has or ever will read the manual for their smartphone. Your phone comes with one, have you read it? Documentation is a crutch for complexity and it's only acceptable for hard topics and advanced users. Most people don't even touch the manuals for all the appliances they own, never mind your elderly relatives. If they run into a problem, they'll ask someone to help, not look for the manual.


I think you’re missing a key fact about who cell phone users _can_ _be_. The dumbest people on this planet can still pick up any iPhone anywhere and be able to use it even if they’ve never used the device itself once. It’s muscle memory to people who wouldn’t know what to do with a manual in the first place. You have to accept that there is no barrier to advanced communication technology to anyone with the means to procure said devices. While I appreciate a finely tuned platform for my technology uses, I still carry an iPhone in particular so that I don’t need to do all of that advanced tweaking and personalization by sacrificing maybe 5% of my overall performance by using an unmodified iPhone running iOS in particular. Sacrificing that 5% of performance means the device has no barrier of entry for 99.9% of humans old enough and cognizant enough to procure a similar technology and be able to fully interact with me on a digital medium. Bringing it back to the topic at hand, those 99.9% of people includes family members who didn’t grow up with electricity let alone technology.


Haha, every few weeks I do some magic gesture, and my iPad duplicates the current application in a separate window. I never did it intentionally, and to this day I have no idea how to do it back. Also, I can't fathom who and why would want to do it.

But the good, old Apple troubleshooting works: nuke it, and start again. If I close the app and restart it, then it's back to its single window form.

Oh, well.


> Every single one of my elderly relatives can use an iPhone after a quick intro

So, after an onboarding workflow, in other words. What's the difference between giving them a quick intro, and their being some form of onboarding built into the application? Consider people who don't have someone on hand to introduce them to the product: how should they gain that same level of competence?


“Shake to undo” also doesn’t work more often than it does. You’d assume an OS-specific keyboard interaction would work anywhere there’s text input, but no!


The only time I use that gesture is when I drop my phone.


You can disable it in Accessibility settings


> They have no idea that they can do 50% of the things that they can do

Maybe even more than that. I know people that have used iOS for years and don't know they can copy/paste text or drag down to search in messages, mail and settings.


>> iOS usability is garbage

Yes, that must be why my technologically illiterate 90-year-old grandpa was able to figure out how to use an iPhone after being shown a single swipe gesture.


My 65, at the time, year old father figured out Android just fine. What point was your n of 1 example trying to make?

Please try to keep in mind there is a wide breadth of technical prowess, thought patterns, and comprehension out there. What works great for some people doesn't for others. Also something to keep it mind being able to "figure something out" or "use it" doesn't necessarily make it a good experience, or an ideal one.


Please excuse the last remnants of the technology debate of “Are Apple products worth the higher price tag of their very capable competitors?” It’s been happening since Apple came into existence with people defending or arguing against Macintosh computers to where it is now with cell phones and the higher cost of entry priced iPhones. The ecosystem Apple created is the great divider. It’s a closed garden in every sense of the word, but still a great garden where if you’re okay with the HOA, you can live right on top of.


These are basically power user features. You don’t need them to get by on everyday tasks. They just help. Just like right-click on the desktop.


> Apple famously doesn't do any of this with your iPhone

Maybe that's why 50% of iPhone users still don't know that they can use long press on they keyboard (or space bar) to gain cursor control - and this is just one example.


iPhone user since switching from a Droid X. You just taught me something that I have been dying for… thank you and way to make your point.


Apple features famously taught in hacker news comments.


If you press with a second finger anywhere on the keyboard after activating it will switch to selection mode.


This is featured the first time you ever bring up the software keyboard and then never again. You can see the behaviour by booting up a simulator. They do have an explainer, but it’s very easy to dismiss if you expected to just start typing.


> This is featured the first time you ever bring up the software keyboard and then never again.

In other words, a behavior that something like Driver.js can help you achieve.


You just changed my text messaging efficiency


What’s this black magic! Never knew it either.


Sorry, this isn't practical for everything. Sure, a phone should be intuitive. And more importantly, you don't have to know how everything works at first pass. You can build it over time.

But, for example, I recently signed up for HubSpot as a CRM and while I think that overall, the product is well organized and intuitive, it's just difficult if not impossible to make it as intuitive as a smartphone. The product tours really help.


Let the onboarding be a forcing function for usability.

Sure, you always want usability and discoverability. But to suggest that everything can always just be discovered seems a lot like discussion of the elusive "sufficiently smart compiler." Eg, an unattainable ideal that doesn't exist in the real world.

I am not convinced that the current state of UX is such that it's possible to make a UI where there is zero need for product tours, documentation, video tutorials, etc. At least not for moderately complex products and beyond.


> I am not convinced that the current state of UX is such that it's possible to make a UI where there is zero need for product tours, documentation, video tutorials, etc.

Agreed. All software, like much modern design, is starting to look the same, which is heading to about as close as we can get here: that _conventions_ are baked into apps to such an extent that "everyone" "knows" what to do. But even these huge sacrifices to homogeneity won't ever sufficiently cover everything, or even close. At best we get common patterns, like games, where you can relatively quickly get to grips. But games are model worth considering. They don't smack you in the face like Driver.js does but they propose a congruent concept (progressive complexity).

Anyway. I don't know. UI is hard. Abstractions are hard. "This button does this", "Click this to blah" is one approach. Driver.js has its place. And for apps I'm not sure the progressive complexity of games translates well (the app environment doesn't generally scale along the same progression vectors).


I think this is broadly accurate for consumer apps.

However, a B2B app ,which is where most product demo tutorials are used, isn't like this. Good product tutorials are great for salespeople to walk the customer through the app and sell properly to prospective clients.

When the contract sizes are in the 10,000s or 100,000s and the product is pretty complex then this is a good solution vs having your sales and support staff having to firefight issues.


Hm.. I find that Apple products have tons of hidden features that I discover after years of usage. I appreciate the clean lines, I really do, but it does have a tradeoff when it comes to discoverability, so this policy is debatable IMO.


The difference is it's intuitive to discover. Once you discover this does something here, you start wondering where else could this happen? You might wonder if you can adjust the iPhone flashlight brightness. For me it was intuitive to long-press the icon in control center to find more options and I was delighted to discover that's exactly how it works.

Those little moments of delight and synergy are why I choose the apple ecosystem.


Half the time it does something, I don't know what I did, and I'm in a rush and so instead of sitting down and having a happy little moment I'm annoyed at having it do some unexpected, unrepeatable thing.


I have never found that the case in iOS. Anything I click / do unexpectedly I can reliably repeat the steps 99% of the time, it's why I prefer iOS over Android with apps that can modify the OS.


They have the "Tips" application that has all of the features. It's on the front of a new app. What is stopping you from discovering it?


If you're on a Mac, open a Finder window, then click Help -> "New to the Mac? Take a tour". There's your OSX tour. It opens a web browser pointing to https://help.apple.com/macos/big-sur/mac-basics/ (or whatever version you're on).


I laugh when I see these because I've witnessed the process that leads to them. It goes something like:

  1. Relatively confusing UX is designed and built.
  2. User testing or executive review concludes the UX is relatively confusing.
  3. Product Manager says "We'll build a slideshow/interactive tutorial!" to solve the problem.
The process and end result is completely understandable. It's hard to rehash a design when you've already built it and gotten buy-in.

I want to spend as little time as possible with most tools (especially enterprise tools), and so often these interrupt my work.


It's understandable in some sense. But wow, the arrogance of designing and building something and then only doing user testing at the point where it's too late to do anything about it. I could even forgive it the first time, but this just happens over and over.


While this can definitely be true, I think it's OK that some experiences are geared towards power users.

E.g. Photoshop is very powerful & you can be very productive but the controls aren't intuitive as a learner.

Aeroplane cockpits are geared towards being easy to do all the complicated things need to fly a plane, rather than being geared towards being easy to learn for non-pilots.

Feels like the "simple Vs easy" distinction.


The "Hints" app is included with iOS, showing even Apple struggles with this. Most things should be obvious through using your product. For more complex things, it can be hard to rely on discovery.


Thank you. I came here to make a similar comment. Anytime I see a "tour" I know the interface is going to be annoying to get used to.

Don Norman's "Design on Everyday Things" is a must-read for anyone working with UX/UI. Also https://jnd.org/affordances-and-design/

(Of course, these affordances change over time, so some of the conventions/examples are a bit dated, but the spirit remains)


Guessing you're not familiar with the question mark icon in first party Apple apps like Garage Band?


Yes to the pretend you can't have this as forcing force for usability but I'm good for adding it if the user answers "Yes" to have a tour.


The one of these I don't hate was at Carrd. More of a toggleable full screen overlay with arrows and notes pointing to all relevant info. https://carrd.co/build/6881ccd20d634611


Yes I agree 100%. These type of demos teach me nothing and are annoying as hell.

The only button I'm looking for is the skip button. For the rare cases when the UI doesn't make sense, reading the docs or watching a demo video is far easier to follow as you can skip to the relevant part much easily.


You really need both: solid, intuitive product design and good new user onboarding. Even with a great product, new uses will still need help discovering and understanding how to get value from your product.

Tooltips aren't always the answer though. Onboarding that's more seamlessly integrated into the experience are better, like Retool, Superhuman, or Intercom. You can see those experiences here: https://twitter.com/philvb/status/1617921908510699520?s=20&t...


Casual reminder that many (most?) assignments are to improve existing products, not to build from scratch. Whether or not one agrees with the sentiment of this post, there are certainly places where quick wins are, in fact, still wins.


Apple does do product tours, example are animations here: https://www.apple.com/ios/ios-17-preview/


If your product is simple enough to not need a tour, you should design it like that; MOST products are definitely simple enough to not need a tour.

But if you're making Photoshop, or a deep-functionality video editor, or an enterprise accounting application, or a diagnostics utility or...

If you're building any of those things (or something complex like that), don't be afraid to keep it complex and use a tool for building user familiarity. That's good design, actually. No 'one-size-fits-all' solutions on UX, I'm afraid.


I guarantee 99% of iphone users dont know 50% of iphone features. You have drunk far too many apple marketing paragraphs.


Do you have data to back your assertion it's damaging? Because I briefly worked in growth and the stats show these things work and help people.

Apple gets a free pass because they have an army of unpaid bloggers willing to write articles on how to get around some of their terrible UX decisions (systems settings on iOS are impossible to navigate)


>Design your product to be understandable at first pass

implies never deliver any product complex enough that a design cannot be made that is understandable at first pass.


> Apple famously doesn't do any of this with your iPhone

I just got a new iPhone and set it up from scratch yesterday... They do this, and it's everywhere.


Have you setup an iPhone ever? Literally the first time you setup an iPhone it walks you through onboarding and a guided flow.


Is it just me that closes these as fast as possibly whilst grumbling about how annoying they are?


Yeah me too but to be fair technical users (we're on HN) are probably not the target end users for the product that integrates this.


I think they are good when you can both skip them and do them later. Usually you can skip them but rarely can I find a way to restart it once I’ve decided I want to commit the energy to learn the app.


Step 1: open free tier or trial account with new app I want to take a look at

Step 2: open app, see your stupid tour, close it

Step 3: click around, realize this might be what I’m looking for but more complex than I realized

Step 4: look for that maybe-not-so-stupid tour again, realize there’s no way to restart it

It’s not all that different than opening up a piece of assembly-needed furniture that arrives in the mail. Usually I look to see it I can build it intuitively before I go to the instruction manual


Yep, I agree there needs to be a way to restart a product tour


Depends on use case. When onboarding a user, it saves support emails when people can't figure out how to fulfill basic use cases. It also highlights new features that don't deserve main screen real estate but are requested.

It's only annoying when it's pointing out the obvious.


"It's only annoying when it's pointing out the obvious."

No, I find them annoying every single time.


I also find them annoying, but begrudgingly appreciate them too. Usually they are interrupting my flow to introduce me to a new non-obvious feature, and sometimes those new features are super useful.


I think they’re a design smell. If your interface is designed well, you don’t need them. If you hide features behind cute-but-meaningless icons with no text tooltips, you users will still struggle to find them even with an irritating onboarding tutorial.


How would your users find out about a new feature on a page that's tucked away into a menu without one of these?


Patch notes? You can give users some bullet points to read when they run a new version for the first time, without railroading them into clicking through the menu structure.

Also maybe keep the menu structure logical so that users can actually discover functionality by looking through the menu, like we did in the old days before semantically relevant text was replaced with tastefully ambiguous generic pastel icons.


Usually feels like a crutch for bad design, but some products just have a certain level of complexity


When it comes to UI concepts I've seen this and popups about downloading the app and email lists and downloading the app and following them on social media and downloading the app called "the nag" a couple of times probably because calling it the "fuckyou" is too many letters.

There isn't a fine line between helpful and hostile, there's a big honking obvious one with flashing lights and sirens on it.


An alternative I saw not too long ago was an app with a sort of "discovery" button. By clicking it, anything you click afterwards will be explained and tutorialized a bit.

So if you want to jump in right away, you can. But if you go "What does THAT button do? What is THIS menu for?" it's great. It goes more at the users pace rather than bombarding them with info.


No, but also a lot of users enjoy them. It's like marmite, you either love it or hate it.

Also note that most product managers love them.

Quite often they are a symptom of a UI that isn't descriptive to particularly discoverable.


Most HN users likely do. But HN users are not representative of overall population.


Should be optional and you should be able to start it if needed.


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.


And please god offer a help menu somewhere that includes decent docs and an opportunity to re-run tours.

So many designers seem to think I am opening an app with oceans of time while asking myself the question, "What delights do these wonderful people have for me today?" When in reality I'm opening them to get a specific thing done right now. Which is the moment when I am least receptive to somebody forcing me to look at their product baby photos so I can say, "yes, your baby is beautiful, no really".

The points where I'm actually receptive to a tour are after I've completed my task and when I've just realized that I don't know how to do the thing I want to do.


This. Why cant I ever easily restart my tour


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.

[0] https://dopt.com/


why does your website need to gather cookies? first thing I'm hit with is a cookies splash screen, I'm wondering what I'm being tracked for.

I'm also curious about this:

>Hybrid work

On the face of it, I like the upfront callout, however how did you guys land on Hybrid being the solution? Especially in the light of working 100% remote leads to more productive employees[0]

[0]: https://thehill.com/business/4110598-remote-employees-work-l...


For cookies: we're using Posthog for tracking and it's helpful for us to understand how people use our website and product.

Hybrid vs remote is sometimes polarizing, but hybrid has been really great for us to balance the heads down time and no commute of remote with being able to jam on stuff in person.


Interesting. When Hybrid was made as a decision, where there any data points that were considered in that decision, or was it just made from the start, or top down?

Do you think its not possible to have the same levels of collaboration remotely if the culture adjusts for remote only type expectations?

(I rarely get to ping decision makers about these things, I apologize for the intrusion, I'm trying to gather as much data on this as possible recently)


All 3 founders worked remotely at larger companies during the pandemic and when we started the company in late '21 we knew we wanted to be hybrid, so it was made top down from the start. For a small team, I personally think there are culture and productivity benefits for being in person. I think other companies have shown remote is absolutely viable for small and large companies, but to your point, there has to be a lot of intention around it. I don't buy into the dogmatic views of hybrid vs remote: I think it's more about understanding what's right for you and the company, and as a leader making the culture, policy, and practices work for what you want. For me and Dopt, hybrid has been a dream :)


This looks great. What does it do differently to Shepherd[0]?

[0]: https://github.com/shipshapecode/shepherd


Here's some community information regarding the two

https://devboard.gitsense.com/shipshapecode/shepherd

https://devboard.gitsense.com/kamranahmedse/driver.js

The popularity for driver.js has grown significantly in the past few weeks. Not sure what is the reason for it though.

Full disclosure: This is my tool


Your tool looks great, and I was never a huge fan of shepherd. I just wanted to know the objective differences between the two, or your reasons for building it. I'd already looked at the repository stats.


Driver, shepherd, you probably see where this is going...


A similar project named BabyJesus?


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.

[1] https://walnut.io


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...


Really wish Zurb would release a jQuery free version of Foundation. I prefer it to Bootstrap, its lighter weight, but would be much lighter if they stripped jQuery and made it pure JavaScript/CSS.


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 -

https://github.com/lusift/lusift


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.

https://www.smarty.net/


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.


As a user I only want to know about a feature when I need it. I don't want a tour or of the blue! I want to do the thing I came here to do. It's very unlikely that your new baby feature is the thing I want to use right now.

This is why I love command palettes. It allows me to discover features by searching for them. When I've searched for it - then allow me to take the tour of where to find it faster/more conveniently and/or show me the shortcut key.


How does this compare with intro.js?


Its MIT Licensed and doesn't cost anything to use commercially, where as intro.js is AGPL licensed and you need a license to use it commercially.


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.




Consider applying for YC's Spring batch! Applications are open till Feb 11.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: