Driver.js: Product tours, highlights, contextual help and more
driverjs.com
driverjs.com
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.
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?
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.
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.
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.
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?
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 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.
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.
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.
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.
In other words, a behavior that something like Driver.js can help you achieve.
Those little moments of delight and synergy are why I choose the apple ecosystem.
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.
implies never deliver any product complex enough that a design cannot be made that is understandable at first pass.
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.
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).
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.
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)
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.
I want to spend as little time as possible with most tools (especially enterprise tools), and so often these interrupt my work.
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.
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.
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...
I just got a new iPhone and set it up from scratch yesterday... They do this, and it's everywhere.
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)
Also note that most product managers love them.
Quite often they are a symptom of a UI that isn't descriptive to particularly discoverable.
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
It's only annoying when it's pointing out the obvious.
No, I find them annoying every single time.
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.
There isn't a fine line between helpful and hostile, there's a big honking obvious one with flashing lights and sirens on it.
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.
Personally from over a few products have built, even the best designed product tours get dismissed 90% of the time in SMB & consumer products.
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.
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.
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.
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...
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.
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)
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
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.
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.
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.
This is great! Finally an implementation that I can cancel and restart whenever I want. Thank you for making this.
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.
If anything this is a red flag for other aspects of the library.