By way of example, consider\u2026<\/p>\n
A (very) fragile onboarding pattern<\/h2>\n
Let\u2019s talk about tooltip tours! You know\u2026 these little guys:<\/p>\n
![\"\"](\"https:\/\/intercom.com\/blog\/wp-content\/uploads\/2017\/05\/1-SBAjPx_aOko3nDljXiwTRg.png\")
<\/p>\n
They seem pretty helpful on the surface, right?<\/p>\n
Perhaps your product has a few key activities that the interface doesn\u2019t make super apparent on its own, so you tack a handful of callouts on top of it, ensuring that the important parts get noticed. Isn\u2019t that a good thing?<\/p>\n
It might seem so at first blush, but think about the times you\u2019ve experienced these in the wild as a user: how \u201chelpful\u201d did you find them?<\/p>\n
Chances are you found them:<\/p>\n
- \n
- Distracting, like when a tour pops up when you\u2019ve just gotten ready to dive into something, or worse, when you\u2019re already in the middle of it.<\/li>\n
- Controlling, like when it takes over the entire screen and makes you click next-next-next-next until it finally puts you back in the driver\u2019s seat.<\/li>\n
- Flaky, like when you accidentally get kicked out of a tour before it\u2019s over and can\u2019t start it again to see what you missed.<\/li>\n<\/ul>\n
\u201cDistracting, controlling, and flaky\u201d is a description befitting the reviled Clippy, not a quality onboarding experience.<\/p>\n
This is the opposite of bulletproof.<\/p>\n
In the ultra-important first few moments within a product, we want to set the bar much higher. In fact, we should shoot for the exact opposite of each:<\/p>\n
- \n
- Instead of distracting, let\u2019s aim for “integrated”.<\/li>\n
- Instead of controlling, let\u2019s aim for “empowering”.<\/li>\n
- And instead of flaky, let\u2019s aim for “steadfast”.<\/li>\n<\/ul>\n
Together, they form like Voltron into\u2026<\/p>\n
The holy trinity of bulletproof onboarding<\/h2>\n
1. Integrated (as opposed to distracting)<\/h3>\n
When it comes to your onboarding experience (or any product experience, really), one of your very best friends is your user\u2019s sense of immersion, momentum, and flow. You want your users to form a bond with your product, and getting them into an immediate groove is an excellent way to do just that.<\/p>\n
As a user, things are much more meaningful when you\u2019re the one calling the shots.<\/p>\n
Techniques like tooltip tours, intro videos, and even those little pulsing hotspots hijack your user\u2019s attention and pull it away from their natural sense of self-direction. This not only throws cold water on their overall momentum, it also disengages them from the meaningful activity they would otherwise be immersed in.<\/p>\n
Whenever possible, the absolute ideal is to instead make your product\u2019s onboarding experience completely indistinguishable from the \u201cnatural\u201d product itself. Instead of slapping an \u201cinterface on top of your interface\u201d, find ways to integrate timely, relevant guidance within it.<\/p>\n
As a user, things are simply much more meaningful when it feels like you\u2019re the one calling the shots.<\/p>\n
Empowering (as opposed to controlling)<\/h3>\n
Speaking of \u201cmeaningful\u201d, is your onboarding experience guiding users into actions that genuinely lead to progress in their lives, or just a better understanding of your UI? People act when they believe that doing so is aligned with their ambitions, and very few people wake up in the morning aspiring to become better \u201cinterface operators\u201d.<\/p>\n
Pay particularly close attention to times when tooltips and coachmarks call out individual buttons, especially when it\u2019s redundantly framed along the lines of something like \u201cClicking \u2018Create Project\u2019 creates a project!\u201d. If your onboarding is simply reiterating what the interface should already make clear, that\u2019s an excellent sign that you instead need to rework things on a fundamental level. Callouts like those often literally point to \u201cbad design\u201d.<\/p>\n
People are signing up for your product because they hope their lives will be better in some way because of it. Guide them to that promised land (more on that in a bit), rather than taking them on a tour of \u201cUI whack-a-mole\u201d.<\/p>\n
There are meaningful accomplishments to be taken within your app; highlight those, not your interface\u2019s shortcomings.<\/p>\n
3. Steadfast (as opposed to flaky)<\/h3>\n
If your onboarding only extends as far as the first minute or two within your app, it\u2019s not only colliding with a ton of other competing information that users have to wrap their head around, it\u2019s also abandoning those users long before they\u2019re actually fully up and running (which can easily take days, if not weeks).<\/p>\n
And even when a user is fully up and running, it still doesn\u2019t mean your onboarding\u2019s job is done. What a user finds irrelevant now could easily wind up being relevant to them down the road, especially when you conside that your product will also be evolving during that time. \u201cNew feature onboarding\u201d is also very much a part of onboarding!<\/p>\n
Just like how you don\u2019t stop \u201cbeing a parent\u201d once your kids are grown, providing timely guidance at every stage of the relationship easily beats stuffing everything into a fleeting \u201cyou better hope you remember all of this when you actually care about it down the road\u201d onboarding memory test.<\/p>\n
Invest in the long haul, and you will find your efforts more than rewarded.<\/p>\n
With these \u201conboarding bulletproof-ness\u201d concepts in place, let\u2019s investigate how they can be applied.<\/p>\n
Some far-less-fragile onboarding patterns<\/h2>\n
Empty states<\/h3>\n
![\"\"](\"https:\/\/intercom.com\/blog\/wp-content\/uploads\/2017\/05\/1-P8Ixdb9X-7IsJASIkDP6rw.png\")
<\/p>\nYour product is a place of activity, and if no activity has yet taken place, it\u2019s going to have some empty containers reflecting that.<\/p>\n
Many products miss a giant opportunity by simply reporting \u201cthere\u2019s nothing to see here.\u201d Or worse, some even provide an admonishing \u201cYou haven\u2019t done anything yet\u201d\u201d condemnation.<\/p>\n
You can do much better by providing some context around why it\u2019s worthwhile to do the things that \u201cfill the container\u201d to begin with, and teeing people up with a call-to-action that gets them on their way.<\/p>\n
Are they \u201cintegrated\u201d?<\/strong>
\nEmpty states are the very definition of \u201cintegrated\u201d. They\u2019re literally part of your product whether you design for them or not, so you might as well make them effective.<\/p>\nAre they \u201cempowering\u201d?<\/strong>
\nThey definitely can be! It\u2019s entirely up to you how thoughtfully you reframe the \u201cyou don\u2019t have anything\u201d message into a call-to-action that guides people toward doing something of consequence.<\/p>\nAre they \u201csteadfast\u201d?<\/strong>
\nYou better believe it, baby! Unlike an intro tour, empty states stick around until the user has actually done something to address them, which means they provide help on the user\u2019s schedule.<\/p>\nProgression systems<\/h3>\n
![\"\"](\"https:\/\/intercom.com\/blog\/wp-content\/uploads\/2017\/05\/1-knEl9KO6_IWDIBhToCJzbw.png\")
<\/p>\nTaking your users from \u201ccompletely new\u201d to \u201cfully capable\u201d is a journey, one that can be rather lengthy at times. Progression systems are super helpful for helping users make their way along each stage of that journey.<\/p>\n
They often take the form of to-do lists (with items that get crossed off as the user completes them), or completion meters (like LinkedIn\u2019s infamous \u201cthermometer of agony\u201d), or some combination thereof.<\/p>\n
Regardless of how they\u2019re displayed, the important part is to highlight the most important activities inside the app, and to demonstrate the progress users are making as they complete those activities!<\/p>\n
Are they \u201cintegrated\u201d?<\/strong>
\nWhile they may not be a completely \u201cnatural\u201d part of the app, they\u2019re also far from distracting or interruptive of the organic flow within a product. Think of them as providing a great \u201cfallback option\u201d for the user, rather than an element that\u2019s competing for their immediate attention.<\/p>\nAre they \u201cempowering\u201d?<\/strong>
\nAs with the empty states above, any onboarding experience is only as empowering as you choose to make it. That said, progression systems are among the patterns most closely aligned with spurring users to do things of actual consequence, which the \u201cempowerment\u201d concept is all about.<\/p>\nAre they \u201csteadfast\u201d?<\/strong>
\nThey\u2019re specifically designed to work over the long haul (think in terms of multiple visits, not just the first). Pro tip: if someone reaches \u201c100%\u201d progress, you can also always just graduate them to \u201cLevel 2\u201d and start them off on a new series of quests!<\/p>\nLifecycle emails<\/h3>\n
![\"\"](\"https:\/\/intercom.com\/blog\/wp-content\/uploads\/2017\/05\/1-AL2CrKHaxpqFImdXWQhg1Q.png\")
<\/p>\nThis is the catch-all term for all the messages you send someone after they sign up. Ideally, the emails are dynamically based on a user\u2019s activity within the product (or lack thereof), rather than a cookie-cutter series of \u201cinfo blasts\u201d that go out to everyone, regardless of their level of progress.<\/p>\n
When someone signs up for a product, they\u2019re doing so because they\u2019re motivated to find a better way of doing things. That\u2019s unlikely to fully happen in the very first visit, so I like to think of lifecycle emails as \u201cguardrails\u201d for that motivation.<\/p>\n
Lifecycle emails (and their sister pattern, push notifications) are unique in the onboarding world, as they\u2019re the only patterns that actively go out and bring people back into your app, hopefully in a way that\u2019s motivated to take meaningful action.<\/p>\n