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.
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.
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.
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.
Note the visual cues, which animate in to their locations, then pulse to ensure they grab your attention.
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.
Read more about user onboarding
by Alex Fedorov
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.
