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).
Each common UI pattern can be built with either open-source or SaaS solutions, and both have their advantages.
Here’s how they compare:
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.
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.
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.
You can build welcome messages with Appcues’ modal windows or with one of these open-source alternatives:
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.
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:
You can build product tours with Appcues’ tooltips or with one of these open-source alternatives:
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.
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.
You can add progress bars to your user onboarding with Appcues’ modal windows or build your own with one of these open-source alternatives:
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.
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.
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:
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.
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.
You can build hotspots with Appcues or build your own with one of these open-source alternatives:
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.
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.
You can build action-driven tooltips with Appcues’ tooltips or with one of these open-source alternatives:
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.
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.
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:
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.
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.
You can create persona-based user onboarding with Appcues or by hard-coding the logic and data loops with an open-source alternative.
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.
