Design better experiences Get started free
InVision Enterprise Learn more
The world's smartest companies use InVision

The world's smartest companies use InVision Enterprise Edition

View all posts

An intro to user onboarding, part 1

slack annotated tips 2

The designers and developers who develop digital products have discovered, explored, and defined problems and best practices for a variety of digital experiences. But there’s an element of web and mobile app design that’s still in its (relative) infancy: user onboarding. That said, a few brave souls are blazing a trail toward better product onboarding. Here’s our guide to their findings.

Samuel Hulick (of UserOnboard.com) and Jonathan Kim and Jackson Noel (of Appcues and Onboard Academy) are leading the charge to study onboarding, define best practices, and provide real-world examples of the onboarding processes created by many popular apps. The following owes a debt of gratitude to their work.

But first:

What is user onboarding?

“User onboarding is the process of increasing the likelihood that new users become successful when adopting your product.” —Samuel Hulick of UserOnboard.com

Why focus on onboarding? And why now?

This focus on onboarding derives from both end user and business frustrations. Users enter an app thinking, “What should I do first?” or “I’m not sure how this app works.” On the other side of the fence, companies see too few users filling out their accounts or returning to the product after trying it out.

Hulick has pointed out that, until very recently, the division of the marketing and product teams has contributed to a lack of attention to onboarding. Very few companies have people focused on ensuring that the customer’s first experience with a product will be easy and rewarding. All signs point to this changing as the conversation on onboarding matures.

The identification and sharing of successful onboarding patterns has been a big driver for the evolution of this discussion. Here’s a few of those.

Common user onboarding patterns

Here’s 4 of the most common patterns designers use for first-time experiences.

1. Tour
You often enter a tour experience the first time you use a native iOS or Android mobile app. Usually, the tour walks you through 3 to 5 instructional steps and often showcases screenshots of the app or icons that represent the main themes or features.

Slack Tour

Though Slack gets the most attention for their annotated tips (see below), they also have a tour-like aspect of onboarding.

2. Setup wizard
When an app needs a significant amount of information from you, a series of form steps known as a “wizard” is a common approach. However, if the information isn’t absolutely crucial, it might be wise to let the user skip the wizard and provide that information later in their account settings or profile.

mozilla setup wizard

3. Dive right in
Basecamp does a nice job of this. When you create a new project, you’ll see a clear call to action to “Add the First …” The advantage of this is that it’s contextual, part of the natural workflow, so it doesn’t get keep you from diving right into the experience. It’s also a great way to take advantage of null states within your app.

basecamp user onboarding

4. Annotated tips
Dubbed “The Joyride Approach” by designer MK Cook, this technique is fairly new—and one of the more exciting ones. The idea is to get users right into the application, drawing their attention to key features with subtle visual cues. When the user interacts with these cues, they get tips on using the feature. Slack does a great job with this method.

slack annotated tips

Note the visual cues, which animate in to their locations, then pulse to ensure they grab your attention.

slack annotated tips 2

Once you click the pulsing visual cue, a flyout with explanatory copy appears. Note the pagination indicated by dots—the same design pattern employed in the more “tour” part of Slack’s onboarding above.

Ready to dig deeper?

Stay tuned for our next post, when we’ll discuss testing these onboarding approaches for different use cases and the benefits of an elegant onboarding solution.

Continue on to part two.

Read more about user onboarding

CTA for those not in hs to DO UI kit
CTA for those not in hs to DO UI kit
Author

Alex Fedorov, cofounder of Fresh Tilled Soil
Alex is a strategic thinker with a gift for information architecture and is passionate about clean, data-driven design that helps increase efficiencies and solve business problems.

Join over 2 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 2 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 2 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 2 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 2 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.