We Categorized 327 User Onboarding Experiences Into 9 UI / UX Patterns (Find Out Which You Should Use)
User onboarding is a once in a user’s lifecycle experience that—when done well—bridges a delicate journey between your sign up page and your user’s first value gained from your product.
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 UX / UI experiences often include welcome messages and product tours to get users acclimated. These experiences incorporate common UI patterns that overlay or augment the app’s true interface with annotations. Click this or this for examples.
These annotations aim to 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 a larger portion of your new users past their first session.
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 WYSIWYG styler
Content is created through WYSIWYG editor
No deploy necessary
Analytics come with
Multiple UI patterns per solution
In my opinion, it is sensical to give your non-technical team the keys to engage new users by purchasing a SaaS solution. However, if you’re bootstrapping and have an abundance of dev time, open source solutions may make sense.
At Appcues, we’ve taken it upon ourselves to analyze every user onboarding experience we come across. Cumulatively over the last few years, we’ve analyzed over 500 user onboarding experiences and categorized them down into 9 UI patterns for you to get inspiration from.
1. Welcome messages
When to use them
How often do you sign up for a new product and are met with a welcome message?
Sifting through our screencaptures of user onboarding experiences, about 9 out of 10 new user onboarding sequences begin with a welcome message.
To be clear, we’re defining a welcome message as any greeting that is only seen once for new users and usually contains text such as hello or welcome—the message doesn’t have to be dedicated entirely to saying hello; it most often includes an opportunity for action.
Welcome messages help users feel more—well—welcomed to an application, and can help set expectations and the tone for their first-run experience.
Tips for welcome message design
Welcome messages are most often contained within a modal window—something that visually separates the user onboarding experience from the application’s interface itself. They often have either a layer of transparency behind them, giving users a peek into the actual application in traditional pop-up fashion. 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 may be best when there are some required inputs 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:
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—as seen above—or point out a few key steps along the way that might otherwise be missed:
Tips for product tour design
Product tours most 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 oboarding UX:
- The best product tours are typically between 2-5 tooltips. Any more than that starts to feel like a hassle for new users.
- Make your first tooltip open on pageload.
- Keep the text in the box very short. 140 characters or less—like twitter.
- Focus your copy on value rather than how-to. This will help keep a user motivated.
- Design your tooltips to look native to your product’s brand, but make sure it also stands out enough to be noticed.
- Make sure you have easy to read analytics on your product tour. You should know how far users are making it and how this affects their ultimate success with your product.
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 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 that play best to our bias starts with a substantial percentage of the bar filled out. This helps a user feel like they are already underway instead of starting from scratch, and it 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:
4. Coach marks
When to use them
Much like tooltips, coach marks help users understand how to interact with the app’s user interface. This UI pattern assists in learning shortcuts, knowing how to swipe—if your product is on a mobile device or tablet—or in installation of your product.
Coach marks are especially useful when walking a new user through an installation that requires interaction with elements from your browser itself. Sidekick asks users to install a browser extension before getting started (see image above). Coach marks are a great way to get them to do so.
Tips for coach marks design
The differences between coach marks and tooltips lie in the way coach marks typically have a gradient behind them, taking the user’s attention away from the app completely for a moment, and coach marks are most often designed with a font and arrow that looks handwritten. This style makes coach marks feel more personal and avoids blending in with the rest of your app and getting ignored.
5. Deferred account creation
When to use them
It’s common sense that you can increase conversion rates on your sign up page by decreasing the number of form fields to fill out. You’re lowering the barrier of entry.
Some products delay certain form fields required for account creation until after the initial landing page. Others go so far to delay account creation entirely until after a user’s Aha! moment.
Typeform, an application for creating beautiful surveys, lets users create their first surveys without ever entering anything about themselves. Once their survey is created, however, and they are ready to distribute the form, a user is required to create their account. More on Typeform’s user onboarding experience here.
Tips for deferred account creation design
Because account creation after sign up is so critical, the UI for such an experience needs to be hyper focused. If a user doesn’t realize they need to save their account, you may lose them if they bounce, or perhaps worse, they may lose their progress.
You can build user surveys with Appcues’ modal window tool and pass information into your database through integrations. Or you can use one of the open source alternatives listed above.
6. Persona-based user onboarding
When to use them
When a new user starts using your product, they may already have an idea in mind for what they want to do first. Some user onboarding flows prompt users to select their own course of action. Each option leads into different first-run experiences.
This branching can happen without the user knowing it—by using data collected on signup—or perhaps they ask the user what they want to do. In either case, persona-based user onboarding should help users get more relevant first-run experiences that should lead to higher engagement rates.
Tips for persona-based onboarding UX design
Most often, personified user onboarding 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 desires, or it may be to select their job role.
It’s important not to have too many choices for the user to select as you do not want to overwhelm them. From what I’ve seen, 3 options seem to be the magic number.
You can build persona-based user onboarding with Appcues or by hard-coding the logic and data loops with one of these open source alternatives.
7. Checklists
When to use them
Checklists, like progress bars, can help users know what is expected of them to get onboarded. The main difference, however, is that checklists are more often used for long-term onboarding items.
Quora uses a checklist for long-term user onboarding tasks.
Tips for checklist design
From what we’ve seen, checklists are never the primary content for a user onboarding UX flow. They simply compliment it. For that reason, if you’re using a checklist for your product, put it to the side of your welcome screen or product.
Appcues’ checklists are under development. Unfortunately, I couldn’t find any good open source checklists to recommend. If you know any, please add them to the comment section below.
8. Hotspots
When to use them
Hotspots are a relatively new UI pattern that have started popping up all over the SaaS world. Hotspots are a nice alternative to tooltips because they are less invasive to users. They do not open automatically and can be easily ignored.
Hotspots are often used to give a little bit of contextual help to entice new users to activate certain elements or features of your product.
Tips for hotspot design
Hotspots may have unique pulsing animations to catch a user’s eye. You’ll likely want to adjust the intensity of your hotspots’ animation depending on how important the hotspot information might be to your users’ success.
You can build hotspots with Appcues. There are no open source alternatives at this time.
9. Action-driven tooltips
When to use them
For more technical workflows or account activation across multiple pages, action-driven tooltips can be a game changer in terms of your activation and retention rates.
Action-driven tooltips isolate elements such as form fields or buttons to guide a user through account set up. Once a user completes a step, they are guided on to the next one. This heavy hand-holding can deliver similar results as a white glove onboarding service with the time and scaling advantages of a low-touch relationship.
Tips for action-drive 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. This heavy hand-holding should be used sparingly as it may make users feel a bit trapped at times.
Appcues’ action-driven tooltips are under development. Until then, you can build your own based on the open source alternatives listed above.
Bonus footage
We put together this video for you to give some additional color commentary on what these UI patterns mean to SaaS businesses. Enter your email and take a look:
