Choosing the Right User Onboarding UX Pattern

Written by: Jonathan Kim Jonathan Kim 

Keep tabs on our content. One or two emails a week:

Once you’ve identified your product’s Aha! moment and taken the initial metrics, it’s time to choose a user onboarding pattern. Choosing the right UX pattern for the job is extremely important because it influences how your product is perceived.

User onboarding UX patterns can be grouped into three different categories:

  • Annotated — Overlayed product commentary.
  • Embedded — Comingled with the actual product experience.
  • Dedicated — Isolated and distraction-free.

Let’s dive into each of them.

Annotated: Target Attention to Specific Items

Examples

Tooltips, coach marks.

Strengths

Great at directing attention toward a specific item or action.

Weaknesses

Widely abused, so users are trained to ignore them. Even worse, users might be aggravated.

When to use them

A short, one- to three-tooltip guide can work really well when your Aha! moment is your product’s ease of use. In that situation, your goal is to get users to see how much they can accomplish in just a few clicks, and tooltips are great at driving that home.

Just make sure you deliver on that promise quickly. Most users don’t like to be dragged around a product without seeing value along the way.

Disqus uses a tooltip near the end of their pithy onboarding flow. This tooltip does a great job of prompting action and launching users into their homepage for the first time. Disqus_Onboarding_Tooltip.png 

Overlays in the form of coach marks are different but can also be abused. Coach marks consist of a dark gradient marked up with arrows and text. This pattern is perfect for teaching new paradigms, like a unique gesture in a mobile app. Here's an example from LINE: 
LINE_coach_mark.png

Coach marks are also often used as a way to show where things are. While giving users a “map” of your product is nice, odds are they’re not going to remember a highly marked up screen. To have their full effect, coach marks should focus on particularly innovative or unexpected elements. 

Regardless of whether you choose a tooltip or a coach mark, make sure to drive new users to the single most important action. Amazon uses a tooltip to point to sign-in and account creation, showing a focus on long-term engagement over a quick sale. 

amazon tooltip

 

Embedded: Provide Broad Guidance in Context

Examples

Popup modal windows, slideouts, alert banners.

Strengths

Can be context-aware without depending on the exact location of a page element.

Weaknesses

Users have developed varying levels of aversion toward this pattern.

When to use them

The embedded pattern is great for announcements. As with every customer communication, the information should be valueable and timely.

While some users may also be trained to avoid anything that pop ups, embedded UX patterns could be something users look forward to when used the right way. Who doesn’t love hearing about new features, right?

AdRoll uses a slideout to announce a new change. The announcement uses a nice visual to grab attention, tells users about the benefits of the change, and just as importantly, lets users know that they can always switch back if they prefer. 

AdRoll slideout new feature announcement

Built with Appcues

In addition to sharing new features, embedded UX patterns can also help communicate service distruptions, solicit feedback, and create situations where an action is encouraged, but not required.

Wholesale In a Box uses a modal window for a maintenance announcement. The announcement gives users all the necessary information and the option to reach out for more details if needed.  

wholesale_in_a_box_maintanence_message.png

Built with Appcues

ClassPass uses a two-modal window series to solicit feedback. These modals appear the first time a user logs onto ClassPass, after they've taken a scheduled class. 

By keeping each modal short and to the point, ClassPass effectively encourages users to contribute to the wider community and improve class offerings. 

 
ClassPass_rating_modal_1.png
ClassPass rating modal 2

Dedicated: Capture Data and Build Motivation

Examples

Setup pages, welcome pages.

Strengths

Collecting essential information and building excitement.

Weaknesses

Requires users to exert some patience, and impatient users could still bounce.

When to use them

Dedicated patterns work wonders for apps that require data or effort in order to deliver value. Use this to fulfill prerequsites, like asking for external API keys, or to automagically import external data.

This pattern also gives the app a few crucial moments to do extra processing, like loading external data, so users aren’t hit with a loading screen once they’ve gone through onboarding. This becomes more beneficial on old hardware or slow wireless networks.

Slack's welcome message appears as the product is loading in the background. Its design features a skeleton screen, which hints at what's to come and is great for building motivation. The gray bars suggess that there are important elements of the UI in the left sidebar and right navigation. 

slack welcome message

Creating a dedicated space also adds weight to the experience by signaling the importance of this step. Use it to build excitement and communicate your company’s culture and tone. That goodwill can influence how forgiving users are when they hit product hurdles like payment pages, bugs, etc.

Build UX Onboarding Patterns Around Value

Once you have a general idea of which type of UX onboarding pattern you'd like to go with, you can take a deeper dive into what you can build with different patterns to get their full effect. We've written a comprehensive analysis of that here based on lessons learned from 327 onboarding experiences. 

If there’s one generalization that can be made about user onboarding, it’s that not all users are the same.Patterns are important, but they’re still only a vehicle for delivering your Aha! moment. Regardless of which pattern you decide to use, make sure you’re delivering value in exchange for time and effort.

user onboarding academy

The User Onboarding Academy

Everything you need to know about user onboarding in 7 weekly emails.

Recommended reading