There’s always that moment during or after development when, inevitably, customer feedback suggests that users can’t figure out how to use your product, or features have grown so deep and complex that people are scared away before giving things a chance.
After the ruckus of designer I told you so‘s and tiresome finger-pointing between the product manager and developer subsides, the distress of supporting a very useful product that might not even get used really begins to settle in.
But there’s a solution
Onboarding is a mechanism for first impressions, which can shape the way users perceive your product from the first time they sign up, to the day they’re converted to a paid account.
“Look at onboarding as a chain of ongoing first impressions.”
Your users are entering into a relationship with your product
, so onboarding should be looked at as a chain of ongoing first impressions. Depending on your intended goals, different onboarding techniques can be employed to effectively hook, instruct, and retain users. And keep them happy.
So before you scour Dribbble’s seemingly endless collection of instructional swipe-throughs, or copy your favorite app’s awful Pop Up Video-style tooltips on every UI control on the screen (please don’t do this), pause and give some thought to what you’re trying to accomplish and which technique is most appropriate.
So wait, there are multiple kinds of onboarding?
Absolutely! The term onboarding has become a bit of a catch-all term for generic user education, but as characterized earlier, it might be more appropriately deemed a first impression to introduce users to anything that is new and/or unknown.
Let’s start with the most common method:
1. The Window Shopper
Method: Users quickly skim primary features
Appropriate for: Well-known domains and common features
Benefits: Establish or persist a visual style and brand voice, bite-sized info
Limitations: Limited opportunity for detailed instruction, people don’t read
The simplest to comprehend and the most developer-friendly, this method manifests itself in a series of swipe-able screens, usually with illustrations and accompanying help text to describe the primary features of an application.
Though most common, this method is often misused in places where more interactive onboarding would be more suitable. This is most appropriate for applications with common interaction patterns that require little to no explanation. Avoid this method if you are introducing a new way of thinking.
“Your users are entering into a relationship with your product.”
2. The New Concept
Methods (2): Training wheels + best practices (both explained below)
Appropriate for: Proposing a new way of thinking (a new mental model)
Benefits: Users can learn at their own pace
Limitations: Best practices are not always applicable
You can’t start a fire without kindling, and you can’t introduce a hot new idea without warming users up to it first.
The New Concept is one of the more intricate onboarding methods because it’s a balancing act of just enough… but not too much. New idea onboarding can be broken into 2 sub-types: Training wheels and best practices.
Training wheels
Bike training wheels keep you safe when you’re learning to ride. Since you’re still figuring out your balance and trying your best not to kiss asphalt, training wheels allow you to focus on pedaling and steering instead of fighting your wobbly center of gravity.
In the same way, the training wheels method assists and supports the user while he/she concentrates on completing one or 2 simple tasks.
Example: A task management app
Training wheels: “Try creating a task and assigning it to a user. Don’t worry, we already created one for you. Her name is Anne.”
In the example above, there are several required steps during task creation, one of which involves assigning the task to a user. Since we are teaching task creation and not user creation (2 entirely different workflows), we relieve the user of the latter, allowing them to give 100% focus to the [literal] task at hand.
Related: 5 key lessons for successful user onboarding
The training wheels approach during Sigstr’s onboarding.
Sigstr puts training wheels in their interactive onboarding to introduce users to their new email signature concept. Users have complete artistic control over their signature and campaign inside of the product, but Sigstr steers them away from the rich customizer to make sure users understand this new concept instead.
Best practices
Every designer, product manager, and developer knows that there are 2 constants in the world of product:
- Users will do whatever the heck they want, and…
- …it’s rarely the way you intended it to be used in the first place
The makers of Q-tip cotton swabs know this all too well. It literally says on the box “Hey guys, don’t put these in your ears.” And what do people do? they dig at their ears like they’re prospecting for gold.
If users don’t know otherwise, they’ll make their best guess at how to use your product—and they’ll usually assume that they’re right.
If your product offers newer, better ways to do something, make sure you let users know that.
Emailing yourself reminders is pretty common: Pick up milk, charge my camera batteries, renew my driver’s license.
Google Inbox has a built-in feature called Reminders, but since it’s a new concept from the way users are used to doing things, they inject a best practice tip directly in the flow when it detects a user trying to send him/herself an email.
Note: This method of onboarding doesn’t even occur when the user first downloads the app. It’s an added first impression Google makes to steer users toward a product feature at the exact moment when it is most appropriate.
3. The First Date
Method: Collect basic user profile and account information
Appropriate for: When apps need a lot of information to get started
Benefits: Apps feel more tailored to me when I first get started
Limitations: Users may be uncomfortable giving up personal information
Every first date conversation covers a checklist of common topics: occupation, family, hobbies, growing up, location, etc.
But no one wants a first date to feel like a job interview. This is love, after all—not a summer internship.
Likewise, there are organic ways to collect information from a user without pages of form fields. We want a second date, right?
Example techniques
Social signup: You can get a lot of information about a user from their social profile: name, photo, email, location, company, job title. Remember to use the most appropriate social profile for your app. If your product is business-related, you should probably use LinkedIn instead of Facebook or Twitter.
Mad Lib: Structure your form semantically to form a sentence. Users will see exactly how much info is required, and the “form” will feel faster. Do not use this method for more than 3 or 4 pieces of information.
Give, then take: Give the user some immediate value before asking for information. Users will feel more invested in your product, and be more willing to give up personal details when prompted. Thumbtack helps you find service providers and receive quotes, and does an exceptional job letting users create an entire job request before ever asking for an email address.
4. The Imitation Game
Method: Teach users through instruction and exercises
Appropriate for: Teaching hidden interactions, seeding the app with data
Benefits: It’s fun, users learn by doing, immediate user value and investment
Limitations: Harder to implement than traditional “window shopping”
This onboarding method is similar to The Window Shopper, but is interactive instead ofpassive. This model is effective because a feature can be explained and experienced at the same time. In one fell swoop, users learn WHAT the feature is, WHY they’re doing it, and HOW to do it.
Apple uses the imitation method in their onboarding for Apple Music.
Users are brought to a screen where they’re instructed to select genres of music they like to help the app make intelligent music recommendations. There are 3 supported interactions: a single tap, a double tap, and a long press.
Users can practice these gestures right on the screen, all the while Apple is collecting details about their music preferences.
5. The Upsell
Method: Provide immediate value, then hint at more
Appropriate for: Upgrading users to additional features and/or paid accounts
Benefits: Well… money
Limitations: User expectations jump tremendously once they’re paying
As a reminder, onboarding is “a first impression used to introduce users to anything that is new and/or unknown.”
The Upsell is arguably the most important responsibility outside of creating a product of functional value.
Proving to users that the grass is indeed greener on the other side of the paywall is tricky, because they have to believe that it’s not just AstroTurf.
Example techniques
Feature blocking: This method involves putting a barrier between users and additional paid content.
Caution: Be careful with this method, because it can be a real turnoff. You want users to be delighted to sign up, not cursing under their breath.
SEMrush uses feature blocking to entice users to upgrade to a pro account. Instead of completely barring users from this page, they show 10 results for free, and hide the rest. They demonstrate the value of their premium features, and leave users wanting more. You wouldn’t buy a new car without test driving it first—once users are behind the wheel, they won’t want to give up the keys.
Paid convenience: If there are multiple ways for users to do something in your app, you have tremendous upsell opportunity. Speaking from personal experience, users can be pretty lazy, and if I can pay a little more money to save a little more time, my bank account is all yours.
Marketing copy is critical in paid convenience, and it’s not a bad idea to be a little self-deprecating to point out when things aren’t ideal:
Example: A task management app
Paid Convenience: “Looks like you’re copying tasks by hand… that’s rough. Upgrade to a premium account to quickly duplicate multiple tasks at once.”
Adam Becker uses paid convenience to upsell and onboard users to premium features like custom colors, fonts, and more. Knowing the limitations of the free design editor, he puts customization behind a paywall. It’s a minor convenience that he knows people will pay for.
3 things you shouldn’t do during onboarding
1. Smother the user
Don’t use the first sign-on to spout everything your app does. Information is out of context, users won’t remember anyway, and you’re literally blocking them from doing exactly what you want them to do: use your product. Onboarding is a series of first impressions, not just one. Use them.
2. User Pop Up Video tooltips
You’ve seen them before. A black curtain with spotlights over key interface components, or annoying tooltips that barge in like Microsoft’s Clippy introducing you to ever single button, list, and pixel on the screen. Your product ought to be designed well enough to drive experimentation and self-guided discovery in the first place, but if you must, the user should have an escape route from the guided tour.
“Don’t make onboarding an afterthought.”
3. Design onboarding without sales and marketing
Your product is the direct line of communication between you and your users. That means every onboarding screen, every line of help text, and every empty page is a chance to impress or disappoint them. That’s a lot of pressure. Luckily, there are brilliant teams of people in marketing and sales who are experts at communicating business and product value. Don’t just let them help, ask them to.
Respect onboarding
After 3 hours preparing a meal, you wouldn’t slop it onto a paper plate and act surprised when people don’t buy it. Don’t make onboarding an afterthought. When you do, it comes through to the user and ultimately shows a lack of customer support.
It may not be the first thing you design, but onboarding can be the final step that brings product development and marketing together to turn your product into a gift to the user.
This article was originally published on Innovatemap Current.
Christian is a Principal Design Partner at Innovatemap in Indianapolis, IN where he helps tech startups and scale-ups design usable and marketable products.
