← Visit Appcues.com
×
×

Choosing the right user onboarding UX pattern

Should you choose an annotated, embedded, or dedicated UX pattern for your onboarding experience?
Skip to section:

Skip to section:

Once you’ve mapped out your user journey, identified your product’s key activation events, and calculated your available resources, you’re ready to start designing your user onboarding experience

At this point, choosing the right UX pattern for your user onboarding flow can feel overwhelming—with so many different ways to onboard users, which is the correct approach for your product? The answer, of course, depends on a whole variety of factors—from device to features to user personas to your team’s bandwidth. 

We’re not design consultants—we can’t tell you exactly what your UI should look like. But we do know a thing or two about user onboarding best practices—including when, why, and how to use the different types of onboarding patterns.

These user onboarding UX patterns can be broadly grouped into 3 categories:

  1. Annotated—Overlaid product commentary
  2. Embedded—Co-mingled with the actual product experience
  3. Dedicated—Isolated and distraction-free

Let’s take a closer look at each one of those in turn.

Annotated—direct attention to specific features and elements

  • Examples of annotated UI patterns: Tooltips, coach marks, hotspots
  • Strengths: Great at directing attention toward a specific item or action
  • Weaknesses: Widely abused and annoying when used in excess, so users are trained to ignore them

When to use these patterns in your onboarding UX

A short (1-to-3-step) tooltip guide can work really well when your aha moment is your product’s ease of use in and of itself. 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.

Asana uses a tooltip near the end of their pithy onboarding flow that shows  users where they can find self-service help in the future. Giving users the resources they need to resolve their own questions reduces both support burden and user frustration down the line.

asana user onboarding ux example tooltip

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 sign in prompt ux example tooltip

Embedded—provide broad guidance in context

  • Examples of embedded UI patterns: Popup modal windows, slideouts, alert banners, checklists
  • Strengths: Can be contextual without needing to be fixed to the exact location of a page element
  • Weaknesses: Users have developed varying levels of aversion toward this pattern
BUILD IT BETTER

Create personalized, native-looking, onboarding experiences w/o a developer

  • Drag and drop images, change up the copy, adjust button colors—it's all in your control
  • Pick your pattern—checklists, modals, tooltips—we've got the UI pattern you need
Charts and graphs

When to use these patterns in your onboarding UX

An embedded pattern is great for announcements and situations where an action is encouraged, but not required. As with every customer communication, the information should be valuable and timely.

While some users may be in the habit of avoiding anything that pop ups, embedded UX patterns could be something users look forward to when used the right way. Gmail’s simple onboarding flow offers a good example of an effective modal window that creates delight, rather than frustration:

gmail user onboarding ux example modal welcome

Embedded patterns can be used on mobile, too. Babbel does an excellent job of priming users to grant mobile device permissions with well-timed, thoughtful modals that clearly explain the benefits of granting permissions:

babbel mobile app user onboarding ux example modal permission priming

Dedicated—capture data and build motivation

  • Examples of dedicated UI patterns: Signup flows, welcome pages and screens
  • Strengths: Collecting essential information and building excitement
  • Weaknesses: Requires users to exert some patience, and impatient users could still bounce

When to use these patterns in your onboarding UX

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

Duolingo’s mobile app uses dedicated screens for its multi-step signup flow. Users are asked a series of personalizing questions that help the app tailor the user experience down the line.   

duolingo user onboarding flow example personalizion

Twilio takes a similar approach with their 3-step onboarding flow:

welcome screen twilio personalization question

Creating a dedicated space also adds weight to the experience by signaling the importance of this step. Use it to build excitement and showcase your brand’s personality—but be careful not to drag things out for too long. Users want to use your product, after all.

Build user onboarding around value

Once you’ve figured out which type of UX pattern is best for your product (or combination of patterns—they don’t need to be used in isolation), you can start experimenting with tooltip placement, modal copy, number of steps, and so on. You can take a deep dive with this guide to the 8 most common UI/UX patterns.

But remember: 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.

Go to the ultimate guide to user onboarding. Discover user onboarding definitions, examples, best practices, and resources.


Author's picture
Jonathan Kim
Co-Founder at Appcues
Skip to section:

Skip to section:

Once you’ve mapped out your user journey, identified your product’s key activation events, and calculated your available resources, you’re ready to start designing your user onboarding experience

At this point, choosing the right UX pattern for your user onboarding flow can feel overwhelming—with so many different ways to onboard users, which is the correct approach for your product? The answer, of course, depends on a whole variety of factors—from device to features to user personas to your team’s bandwidth. 

We’re not design consultants—we can’t tell you exactly what your UI should look like. But we do know a thing or two about user onboarding best practices—including when, why, and how to use the different types of onboarding patterns.

These user onboarding UX patterns can be broadly grouped into 3 categories:

  1. Annotated—Overlaid product commentary
  2. Embedded—Co-mingled with the actual product experience
  3. Dedicated—Isolated and distraction-free

Let’s take a closer look at each one of those in turn.

Annotated—direct attention to specific features and elements

  • Examples of annotated UI patterns: Tooltips, coach marks, hotspots
  • Strengths: Great at directing attention toward a specific item or action
  • Weaknesses: Widely abused and annoying when used in excess, so users are trained to ignore them

When to use these patterns in your onboarding UX

A short (1-to-3-step) tooltip guide can work really well when your aha moment is your product’s ease of use in and of itself. 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.

Asana uses a tooltip near the end of their pithy onboarding flow that shows  users where they can find self-service help in the future. Giving users the resources they need to resolve their own questions reduces both support burden and user frustration down the line.

asana user onboarding ux example tooltip

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 sign in prompt ux example tooltip

Embedded—provide broad guidance in context

  • Examples of embedded UI patterns: Popup modal windows, slideouts, alert banners, checklists
  • Strengths: Can be contextual without needing to be fixed to the exact location of a page element
  • Weaknesses: Users have developed varying levels of aversion toward this pattern
BUILD IT BETTER

Create personalized, native-looking, onboarding experiences w/o a developer

  • Drag and drop images, change up the copy, adjust button colors—it's all in your control
  • Pick your pattern—checklists, modals, tooltips—we've got the UI pattern you need
Charts and graphs

When to use these patterns in your onboarding UX

An embedded pattern is great for announcements and situations where an action is encouraged, but not required. As with every customer communication, the information should be valuable and timely.

While some users may be in the habit of avoiding anything that pop ups, embedded UX patterns could be something users look forward to when used the right way. Gmail’s simple onboarding flow offers a good example of an effective modal window that creates delight, rather than frustration:

gmail user onboarding ux example modal welcome

Embedded patterns can be used on mobile, too. Babbel does an excellent job of priming users to grant mobile device permissions with well-timed, thoughtful modals that clearly explain the benefits of granting permissions:

babbel mobile app user onboarding ux example modal permission priming

Dedicated—capture data and build motivation

  • Examples of dedicated UI patterns: Signup flows, welcome pages and screens
  • Strengths: Collecting essential information and building excitement
  • Weaknesses: Requires users to exert some patience, and impatient users could still bounce

When to use these patterns in your onboarding UX

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

Duolingo’s mobile app uses dedicated screens for its multi-step signup flow. Users are asked a series of personalizing questions that help the app tailor the user experience down the line.   

duolingo user onboarding flow example personalizion

Twilio takes a similar approach with their 3-step onboarding flow:

welcome screen twilio personalization question

Creating a dedicated space also adds weight to the experience by signaling the importance of this step. Use it to build excitement and showcase your brand’s personality—but be careful not to drag things out for too long. Users want to use your product, after all.

Build user onboarding around value

Once you’ve figured out which type of UX pattern is best for your product (or combination of patterns—they don’t need to be used in isolation), you can start experimenting with tooltip placement, modal copy, number of steps, and so on. You can take a deep dive with this guide to the 8 most common UI/UX patterns.

But remember: 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.

Go to the ultimate guide to user onboarding. Discover user onboarding definitions, examples, best practices, and resources.


Author's picture
Jonathan Kim
Co-Founder at Appcues
You might also like...