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?
> 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.
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 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.
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.
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.
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.
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.
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)
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
[+] [-] local_issues|2 years ago|reply
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.
[+] [-] smt88|2 years ago|reply
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?
[+] [-] twen_ty|2 years ago|reply
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.
[+] [-] chadash|2 years ago|reply
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.
[+] [-] mindcrime|2 years ago|reply
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.
[+] [-] dooraven|2 years ago|reply
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.
[+] [-] kristiandupont|2 years ago|reply
[+] [-] onion2k|2 years ago|reply
[+] [-] adrianparsons|2 years ago|reply
I want to spend as little time as possible with most tools (especially enterprise tools), and so often these interrupt my work.
[+] [-] willio58|2 years ago|reply
[+] [-] lxe|2 years ago|reply
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)
[+] [-] c-hendricks|2 years ago|reply
[+] [-] sebastianconcpt|2 years ago|reply
[+] [-] ericmcer|2 years ago|reply
[+] [-] thyrox|2 years ago|reply
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.
[+] [-] philvb|2 years ago|reply
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...
[+] [-] runako|2 years ago|reply
[+] [-] adolph|2 years ago|reply
[+] [-] catapart|2 years ago|reply
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.
[+] [-] Redsquare|2 years ago|reply
[+] [-] brigadier132|2 years ago|reply
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)
[+] [-] dabeeeenster|2 years ago|reply
[+] [-] dooraven|2 years ago|reply
[+] [-] hombre_fatal|2 years ago|reply
[+] [-] ebiester|2 years ago|reply
It's only annoying when it's pointing out the obvious.
[+] [-] ericmcer|2 years ago|reply
[+] [-] kristopolous|2 years ago|reply
There isn't a fine line between helpful and hostile, there's a big honking obvious one with flashing lights and sirens on it.
[+] [-] Night_Thastus|2 years ago|reply
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.
[+] [-] samwillis|2 years ago|reply
Also note that most product managers love them.
Quite often they are a symptom of a UI that isn't descriptive to particularly discoverable.
[+] [-] golergka|2 years ago|reply
[+] [-] croes|2 years ago|reply
[+] [-] mercurialsolo|2 years ago|reply
Personally from over a few products have built, even the best designed product tours get dismissed 90% of the time in SMB & consumer products.
[+] [-] djbusby|2 years ago|reply
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.
[+] [-] wpietri|2 years ago|reply
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.
[+] [-] philvb|2 years ago|reply
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/
[+] [-] boomskats|2 years ago|reply
[0]: https://github.com/shipshapecode/shepherd
[+] [-] tamimio|2 years ago|reply
[+] [-] baron816|2 years ago|reply
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.
[+] [-] WhatWorkingOn|2 years ago|reply
[+] [-] debarshri|2 years ago|reply
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
[+] [-] welder|2 years ago|reply
[+] [-] ricardobayes|2 years ago|reply
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.
[+] [-] redocneknurd|2 years ago|reply
[+] [-] Ultimatt|2 years ago|reply
[+] [-] nbhusal|2 years ago|reply
https://github.com/lusift/lusift
[+] [-] jgalt212|2 years ago|reply
https://www.smarty.net/
[+] [-] omg_ketchup|2 years ago|reply
[+] [-] partiallypro|2 years ago|reply
[+] [-] ecuaflo|2 years ago|reply
[+] [-] grumpy_tired|2 years ago|reply
This is great! Finally an implementation that I can cancel and restart whenever I want. Thank you for making this.