UX Design

We Categorized Over 500 User Onboarding Experiences into 8 UI/UX Patterns

.

What is user onboarding

Before we jump in to user onboarding UI/UX patterns, lets take a moment to review what user onboarding is, as why it's so important.

User onboarding is a once in a user’s lifecycle experience that—when done well—shortens a user's time to value. We refer to this moment of value as a user’s wow or aha moment—aha like, “Wow this is awesome!” Or “Aha! Now I get it!

User onboarding is, first and foremost, about teaching your users how to use your app so that they can find success faster, reach their moment of activation, and understand the value of your product. Good user onboarding doesn’t just get users into your product quickly—it points users in the direction of those features and functions that are most likely to solve their problem, and teaches them how to achieve value quickly. It is part of a delightful user experience.

User onboarding UI/UX experiences can be built into the product itself, or can incorporate common UI patterns that overlay or augment the app’s true interface with annotations—like welcome messages and product tours. These annotations guide a user to their aha moment faster than if they were simply dropped into your app after signing up. And by getting your new users to that aha moment faster, you are more likely to retain these new users beyond their first session.

Good user onboarding boosts retention, minimizes early churn, reduces support tickets, and leads to higher free trial-to-paid conversion rates.

Tl;dr: User onboarding is essential (yes, even for products with otherwise great UX).

Click here to join the user onboarding academy  for free. This is a banner image that links to a user onboarding class.

Building user onboarding UX / UI experiences

Each common UI pattern can be built with either open-source or SaaS solutions, and both have their advantages.

Here’s how they compare:

Open-source tools

  • Free
  • Built and maintained by developers
  • Style is customizable with hard-coded CSS
  • Content is hard-coded into product
  • Requires deploy
  • No analytics attached
  • One UI pattern per plugin

SaaS solutions

  • Paid
  • Installed by developer; maintained by anyone
  • Style is customizable with “what you see is what you get” styler
  • Content is created through WYSIWYG editor
  • No deploy necessary
  • Analytics come with
  • Multiple UI patterns per solution

We’re of the opinion that it is sensible to give your non-technical team the keys to engage new users with a SaaS solution. Think about it: Who’s more familiar with the user journey and writing compelling copy—your marketers and CSMs or your engineers? However, if you’re bootstrapping and have an abundance of dev time, open-source solutions may make sense.

We’re such big fans of user onboarding, that we’ve taken it upon ourselves to analyze every user onboarding experience we come across. Over the last few years, we’ve analyzed over 500 user onboarding experiences and categorized them into 8 UI/UX patterns for your inspiration.

1. Welcome messages

This is a welcome message from slack. It shows a hand wave emoji and the words "Welcome!" Slack is a messaging app for teams. This is a full screen welcome message example.
Slack greets new users with a simple, no-nonsense welcome message and single CTA.


When to use welcome messages

Sifting through our screen captures of user onboarding experiences, about 9 out of 10 new user onboarding sequences begin with a welcome message.

We’re defining a welcome message as any greeting that is only seen once for new users and usually contains text like “hello” or “welcome.” The message often includes an opportunity for action—like a CTA to begin a brief product tour or walkthrough.

Welcome messages help users feel more, well, welcomed to an application, and can help set expectations and tone.

This is a screenshot of gmail's new user welcome message modal, with an illustration of 3 people behind the gmail logo.
Gmail uses a modal window with minimal text to welcome new users to their inbox.

Tips for welcome message design

Welcome messages are most often contained within a modal window—a large UI element that visually separates the user onboarding experience from the application’s interface itself. They often have a layer of transparency behind them to give users a peek into the main app. This design helps users keep an eye towards their end goal and may motivate them to complete your user onboarding experience in order to start using your app.

Alternatively, some welcome message modals take over a user’s full-screen, blocking visibility into your app and focusing a user entirely on the message and user onboarding experience in front of them. We refer to this pattern as a full-screen takeover. This pattern is highly disruptive and is best used sparingly or saved for when there are required inputs that a user must fulfill before using your product.

Here’s a good deep dive on in-app welcome messages.

This is a screenshot of Headspace's mobile app welcome message with a personalized greeting and an illustration of a character looking happy while listening to headphones.
Headspace's charming mobile app welcomes users with a personalized greeting, before asking them a handful of persona-establishing questions.

User onboarding toolkit: Welcome messages

You can build welcome messages with Appcues’ modal windows or with one of these open-source alternatives:

2. Product tours

This is an example of a product tour onboarding using tooltips. This image shows a tooltip with multiple paragraphs that points to a list of advanced features.
Typeform uses tooltips to walk new users through their product.

When to use them

Product tours orient new users and help them figure out the fastest way to get to their first moment of value. Tours often walk a user through an important workflow or point out a few key steps along the way that might otherwise be missed.

This is a gif of a product onboarding tour example from Invision, showing a series of custom styled tooltips pointing to important features in the invision editor.
InVision uses succinct tooltips to give new users an overview of important features.

Tips for product tour design

Product tours often come in the form of tooltips. Tooltips are boxes with pointers that call out and contextualize certain elements within a product. A few tips to optimize your product tour’s onboarding UX:

  • Be selective. The best product tours typically consist of 3-5 tooltips. Any more steps than that can start to feel like a hassle for new users.
  • Make your first tooltip open on page load.
  • Keep the copy short. Think 140 characters or less—like Twitter back in the day.
  • Focus your copy on value, rather than how-to. This will help keep users motivated.
  • Design your tooltips to look native to your product’s brand, but make sure they have enough contrast with the main interface to get noticed.
  • Make sure you have access easy-to-read analytics on your product tour. You should be able to ascertain how far users are make it in the tour, and how this affects their ultimate success with your product.

User onboarding toolkit: Product tours

You can build product tours with Appcues’ tooltips or with one of these open-source alternatives:

3. Progress bars

This is an example of a google user onboarding flow, showing a tooltip with a button and progress dots.
Google introduces new users to Google Sheets with a series of instructive tooltips. The progress indicator in the corner of the tooltip let users know that the tour will be brief.

When to use them

Humans are biased towards completing tasks they are given. Products often play upon this bias by including progress bars—similar progress indicators, like dots, dashes, fractions, etc—into their UI to motivate new users to complete their onboarding. A progress bar reminds us that we’ve been given a task, and we feel as though we should complete it.

This is a screenshot of notion's onboarding experience that shows a progress bar indicator at the top of the screen. There are 4 dashes and the third dash is filled in, indicating that the user is on the third onboarding step.
Mailchimp uses a progress bar (well, progress dashes) to let new users know how far along they are in the onboarding process.

Tips for progress bar design

Progress bars are most effective at motivating users when they show a substantial percentage of the bar filled out. Starting with a partially completed progress bar helps a user feel like they’ve already accomplished something, instead of starting from scratch. This sense of progress increases a person’s desire to complete the task at hand.

User onboarding toolkit: Progress bars

You can add progress bars to your user onboarding with Appcues’ modal windows or build your own with one of these open-source alternatives:

4. Checklists

When to use them

Checklists, like progress bars, help set user expectations and encourage progress. Checklists offer a visual representation of an unfinished task and inform the user how far away they are from completing it. Checklists are commonly used for complex tasks and multistep processes.

[GrowthHackers]

This is an example of an onboarding checklist from Acorns. It shows a progress bar at the top of the screen and a checklist with some items checked off. This is an example of good mobile UX.
Acorns' mobile app breaks down a complex onboarding process into 8 steps with its onboarding checklist. (Note the progress bar and percentage at the top of the screen, which lets users know how far they are in the process.)

Tips for checklist design

Checklists play into powerful psychological principles, motivating new users to complete—and even enjoy—the crucial setup tasks required to get up and running within your product. Checklists can turn complex, multistep processes—like scheduling out a month of social media content or centralizing your financial accounts—into simple, achievable tasks.

Checklists work best when they live alongside your product as a present reminder of that tasks that still need to be completed. For more checklist design inspiration, check out 5 other examples of best-in-class checklists.

User onboarding toolkit: Checklists

Yup, we offer checklists, too! You can add progress bars to your user onboarding with Appcues’ Checklists or build your own with one of these open-source alternatives:

5. Hotspots

This is a gif of a hotspot, which is a UI pattern that looks like a pulsing dot or beacon and is used to direct users' attent to important features on the page.
Grammarly uses hotspots to guide new users through a learn-by-doing demo document.

When to use them

Hotspots are a relatively new UI pattern that have started popping up all over the SaaS world. A cross between notification badges and tooltips, hotspots are a nice alternative to regular tooltips when you want to offer contextual information to your users without interrupting their workflow. Hotspots are unobtrusive and subtle, and are therefore best for calling out non-essential features.

Hotspots are often used to give a little bit of contextual help to entice new users to activate certain elements or features.

This is a gif of a hotspot UI pattern showing a new user onboarding flow that uses hotspots and tooltips to point out important features.
Feedly uses hotspots to draw users' attention to useful features.

Tips for hotspot design

Hotspots can have unique pulsating animations to catch the user’s eye. You’ll likely want to adjust the intensity of your animation, depending on how important the information is to your users’ success.

User onboarding toolkit: Hotspots

You can build hotspots with Appcues or build your own with one of these open-source alternatives:

6. Action-driven tooltips

This is a screenshot of a SaaS product tour with action driven tooltips. It shows a grayed out background with a highlighted element and an instructional tooltip.
Employee scheduling tool Humanity walks new users through the platform step-by-step. Here, action is required to close the tooltip and move on to the next onboarding step.

When to use them

Action-driven tooltips are used to guide users through more technical workflows or account activation across multiple pages. Action-driven tooltips isolate elements like form fields or buttons to guide a user through account setup. Once a user completes a step, they are guided on to the next one. When used appropriately, this heavy hand-holding can deliver results similar to a white-glove CS-based onboarding service—with the timesaving advantages and scalability of a low-touch model.

This is an example of a tooltip in Airtable. It shows a green tooltip on a full spreadsheet, instructing the user to click to expand the cell.
Airtable uses contextual, action-driven tooltips to prompt users to perform actions that are intended to familiarize users with specific features.

Tips for action-driven tooltip design

By highlighting a given element in your app and darkening the space around it, you force users to follow a certain set of instructions and path through your product. This approach should be used sparingly, as it can quickly feel overbearing.

User onboarding toolkit: Action-driven tooltips

You can build action-driven tooltips with Appcues’ tooltips or with one of these open-source alternatives:

7. Deferred account creation

Duolingo allows users to experience the value of their app without ever creating an account. Signup prompts occur at logical moments in the user journey—after users complete a language lesson, for example—reducing the friction typically associated with registration.

When to use them

Gradual engagement is the process of moving users through your app slowly, helping them experience the value firsthand before requiring that they sign up for an account. Decreasing the number of form fields to fill out—and the amount of personal information you require of users—increases conversion rates on your signup page by lowering the barrier of entry.

Some products delay account creation until after the initial landing page. Others go so far to delay account creation entirely until after a user has reached their aha moment.

Zocdoc lets users browse for a doctor in their area ad view appointment availability before prompting them to sign up for an account.

Tips for deferred account creation design

The UI for delayed account creation needs to be hyper-focused once you actually get to the registration step. If a user doesn’t realize they need to save their account, you may lose them if they bounce—or perhaps even worse, they may lose their progress and feel so frustrated that they churn.

User onboarding toolkit: Deferred account creation

There isn’t any single UI pattern for deferred account creation. Depending on how you plan to communicate the need for registration, you may want to use tooltips to draw attention to a signup CTA, or a modal window at an appropriate moment in the user journey. You can build either pattern with Appcues or the following open-source alternatives:

8. Persona-based user onboarding

This is a screenshot of Behance's new user onboarding flow that happens after signup. This is an example of a choose your own adventure self segmenting question that personalizes user experience based on persona.
Behance asks new users to select their interests in order to provide them with a personalized feed and better first experience.

When to use them

Some new users may already have an idea about what they want to do with your product. Some user onboarding flows prompt users to self-segment by selecting their own course of action, with each option leading to different first experiences.

This branching can happen without the user knowing it—by using data collected on signup—or through a choose-your-own-adventure option. In either case, persona-based user onboarding should help users have better, more relevant first experiences with higher engagement and lower time-to-value rates.

This is a screenshot of behance's mobile app user onboarding that asks users to segment themselves based on use case. It says what brings you to headspace? and offers 6 possible options.
Headspace asks new users to self-segment by selecting their experience level and use case. (Note the progress indicator at the top of the screen.)

Tips for persona-based onboarding design

Personalized user onboarding often starts with an option after a user has filled out a signup form. The option may be a clear choice for the user to make based on their desired outcome, or it may be to select their job role.

It’s important not to overwhelm the user with too many choices—from what we’ve seen, 2 to 5 options seems to be the magic number.

User onboarding toolkit: Persona-based onboarding

You can create persona-based user onboarding with Appcues or by hard-coding the logic and data loops with an open-source alternative.

More user onboarding examples

There are hundreds of great user onboarding examples for every UX/UI pattern we’ve listed.

We highly recommend heading over to ReallyGoodUX for some of the best examples for mobile and web—whether you’re actively building your user onboarding flow and need inspiration, or you’re just trying to stay on top of the trends.

Want to become a User Onboarding Master? Check out our free User Onboarding Academy!

[Editor's note: We updated this article from a previous version that published in March of 2016—hope you enjoyed it!]

Katryna is a content marketing manager at Appcues. Her non-Appcues time is spent traveling to new places, befriending street cats, and baking elaborate pies.

Try out Appcues