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).
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
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.
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.
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
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.
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
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.
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.
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
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.
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
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.
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
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.
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
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.
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!]
