.png)
A lack of good user onboarding UX can affect the general experience just as drastically as its presence. In this article, I will talk about the different types of user onboarding UX you can use to renovate your onboarding experiences completely.
But first, let's underline some important concepts and facts before moving on to onboarding UX patterns.
What is User Onboarding?
User onboarding is a process of presenting the first-time users and existing users with value, outside and within your product. Contrary to popular belief, the user onboarding process is a continuous part of the product experience and is, in fact, one of the best tools for shaping a user's first impression and, in the long run, their ongoing feelings regarding your product. User onboarding has a direct effect on conversion rate and user retention.
A successful user onboarding flow takes note of its industry, users, the scope within the product, and other important factors.
The goal of user onboarding for a specific tool or software can change a lot too.
But what makes a user onboarding flow successful is the patterns that dictate the actual onboarding experiences — the micro-interactions, the design, the timing, so to say.
For more detailed info on user onboarding, check this blog article.
Now, let's take a look at different types of user onboarding experiences, onboarding UX patterns you can use for your user and customer journey, and examples for each.
Types of Onboarding UX
Onboarding UX can be categorized into three different categories; product tour-based onboarding UX, self-serve onboarding UX, and lastly, announcement onboarding UX.
While these categories might be named and explained in various ways on the internet, the core functionalities and areas of use for each type are pretty much fixed.
Thus, we can say that although the names change, these categories are all the same.
Comprehensive onboarding UX
Probably the most popular and the most overly used type of onboarding UX would be a product tour-based one.
This is because, from a conventional point of view, we are very much accustomed to the idea of a guide of sorts or a product tour to show us around the product in one go.
However, as time passes, we see a decline in the number of product tour-based experiences. This might be due to the fact that other types of onboarding UX are taking center stage, especially in our decade.
Here are some onboarding UX patterns that create a comprehensive initial onboarding.
1- Product Tours
A product tour is what we expect to see on any platform we are not familiar with. Especially serving as app tutorials in the mobile app onboarding context today, product tours are still going strong in websites and desktop products too.
However, there is essentially a problem with the execution of product tours.
That is a very small number of steps if you want to show users all-around your product. It is also worth reminding that users don't deal with long copy very well.
So, if you are going for product tours, they must look something like this:
Candu's product tour consists of 6 steps and shows the most crucial elements of the interface. It also features a progress bar, a skip button, and a "got it" button, a great microcopy for extra encouragement.
2- Walkthroughs
It is a common misconception for walkthroughs to be considered the same as product tours and vice versa.
However, one tiny detail that makes walkthroughs a bit different from product tours is that their focus is on app functionality.
A product tour shows where a feature or page is, while walkthroughs show how something works. Still, walkthroughs are exactly like product tours in terms of shared hate from users when done wrong.
Walkthroughs also mustn't be too long or too complicated; otherwise, users end up abandoning. Or worse, skipping. No one wants to have completion rates that low, especially when the product is intricate enough to require a walkthrough.
A good product walkthrough example could be Candy Crush's initial product walkthrough.
.png)
Candy Crush's product walkthrough is especially user-friendly, and even though it does jump around, it does so in a meaningful manner. The walkthrough is interactive and lets players try out functions to learn.
3- Checklists
When it comes to onboarding users, checklists are the most meta thing you can offeryour users.
A well-designed onboarding checklist can be the perfect tool for users to manage their own onboarding willingly and willfully. This then becomes the perfect opportunity to create a positive experience for users.
A good checklist can direct users to the crucial parts of the product, show product features and common actions performed within the tool, and has a clearly visible progress bar or progress indicator.
Asana's user onboarding process makes use of a really cool checklist.
The checklist appears on the dashboard and has 5 steps. When users click on each step, it takes them to the respective pages in-app. It even has a congratulatory message at the end with unicorns and rainbows.
Contextual onboarding UX
User onboarding experiences are all essentially contextual.
Even a product tour or an interactive walkthrough happens in a context. But when I say contextual onboarding UX, I mean patterns that really take place a couple of breadcrumbs inside.
And to point out really specific parts of the initial onboarding (or the rest of it throughout the continuous user onboarding process), you would need really specific patterns.
Here are some.
4- Tooltips
Tooltips are the go-to onboarding UX pattern when making a point about a specific element on a page, screen, website, etc.
What's more, a tooltip can be a part of a product tour, walkthrough, or an interactive guide. This proves that it is the perfect UX pattern for when you need to point at something or get users' attention on one part of the screen.
The various potential use cases for the pattern, however, make it a lot easier for a poorly designed contextual onboarding flow to take place.
A good tooltip or a tooltip sequence preferably features a short copy, has images when the copy is long or when there are too many steps, and most importantly, has a skip button.
Figma's contextual tooltip to suggest using a shortcut is a great example.
This example is perfect for the standalone, contextual use of tooltips. It is used to give a useful tip to the users and has a simple "got it" button and a skip button.
5- Hotspots
Hotspots aren't as commonly used as tooltips, but we all come across them every now and then.
And if you know your way around onboarding UX patterns, you would know that hotspots are actually perfect for a less irritable, more friendly approach to contextual onboarding.
Similarly, they are used in comprehensive onboarding UX patterns as well, but they can be standalone too.
Here's Typeform's take on a good hotspot use.
Here, the hotspots are used in a demo environment to urge users to check some key features and get onboarding tasks done. Looking very similar to a tooltip, these hotspots also feature a "got it" button to make sure the point is understood.
6- Feature guides
Like product tours, feature guides are used to introduce new features to users in a contextual way, preferably when the users are already in proximity to the new feature.
Most of the time, there is not much difference between feature guides and walkthroughs or products apart from the former being a lot more micro-focused.
And that is all about being contextual.
Here's a look at Trello's new feature guide for their enhanced interface design.
Trello's feature guide for their new interface design consists of 4 steps, doesn't jump around in between pages, and features quite short and understandable copy; thus, it is a quite good example of the right approach to onboarding contextually.
Announcement onboarding UX
A less acknowledged yet still a valid category of user onboarding UX would be announcement onboarding UX.
Rather than providing the users with instructional content, this type of engaging onboarding UX is closer to in-app messages to inform users and direct them within the product.
Most of the time, announcement onboarding UX is not a part of the signup process, in fact, it comes after the initial onboarding. We come across announcement user onboarding examples like banners and announcement modals during the mid-lifecycle of users.
When that's the case, it is important that announcement onboarding UX is non-intrusive and yet still manages to catch the users' attention.
7- Announcement Modals
Announcement modals, as the name would suggest, are layout windows or, in simpler terms, pop-ups on an interface that let users know of new information about the product they are using at the moment.
Some welcome modals, exit modals, feature modals, and in general, all types of modals that let current users of what is going on with the product would be considered an announcement modal.
A good example of announcement modals could be Figma's modal introducing users to a new way of doing things.
The modal is actually a gate to the new feature onboarding that will take place in the playground, Figma's editor. The hierarchic copy and the visual design of the modal are just right.
8- Banners
Banners or announcement bars are the less intrusive, more prominent way of announcing things. After modals, it is the most popular type of onboarding UX pattern for announcements. And this clearly has a reason.
Thanks to their non-invasive nature, banners are great patterns for promoting seminars, celebrating new achievements, or giving out sale codes. Basically, everything that doesn't require the immediate attention of users.
Moreover, a lot of products do banners right.
A good example would be Intercom's announcement bar.
Intercom uses a banner on the top of its interface to promote some new enhancements. Its color is a pretty one that matches the interface color design but also gives off a different hue to make users easily notice it.
Mostly preferred by B2B products, banners are a part of an efficient onboarding experience.
User Onboarding UX is: More and Beyond
The user onboarding UX patterns and examples on this list are just the tip of the iceberg, the more in use ones. A product might benefit from them while another doesn't.
Some unique products could need unique onboarding UX patterns.
To find out what you need for your product, all you can do is keep exploring. You can start with our material on the topic here at User Onboarding Academy.
