Choosing the Right User Onboarding UX Pattern
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 — Co-mingled with the actual product experience.
- Dedicated — Isolated and distraction-free.
Let’s dive into each of them.
Annotated: Target Attention to Specific Items
Tooltips, coach marks.
Great at directing attention toward a specific item or action.
Widely abused, so users are trained to ignore them. Even worse, users might be aggravated.
When to use them in your onboarding UX
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.
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:
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.
Embedded: Provide Broad Guidance in Context
Popup modal windows, slideouts, alert banners.
Can be context-aware without depending on the exact location of a page element.
Users have developed varying levels of aversion toward this pattern.
When to use them in your oboarding UX
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.
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.
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.
Dedicated: Capture Data and Build Motivation
Setup pages, welcome pages.
Collecting essential information and building excitement.
Requires users to exert some patience, and impatient users could still bounce.
When to use them in your onboarding UX
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 suggests that there are important elements of the UI in the left sidebar and right navigation.
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 Onboarding UX Patterns Around Value
Once you have a general idea of which type of onboarding UX 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.