You take your dog Max for a walk without his leash but decide to explore another path today.
Max is smelling anything he finds on his way as usual while you are smiling from head to toe at his silliness.
Such a lovely memory for you to remember later on until you hear big bad stray dogs coming your way.
Now, this wouldn't have happened unless you had made sure that Max wore his leash, but that's not the case, and you are worried. So, you grab Max and start walking towards your building swiftly.
This is not only a risky situation but also a bitter experience. Anyhow, it applies to many real-life cases too.
For example, user onboarding experience.
When people encounter rather upsetting conditions in the onboarding process, they start to avoid it. Thus, they churn.
To prevent them from churning, one must provide them with a spectacular onboarding UX pattern.
What are Onboarding UX Patterns?
Onboarding UX patterns can be defined as the road that is designed in regards to the product and the user expectations to onboard your users. They contain information on the product, how-tos, and anything new.
Therefore, it is safe to say that these patterns are a way of proving that your product is capable of fulfilling their needs and meeting their expectations within the onboarding flow.
Technically, UX patterns are broken down into three categories:
1- Annotated UX pattern functions the best when you need to highlight a particular feature.
2- Embedded UX pattern functions the best when you need to notify about something.
3- Dedicated UX pattern functions the best when you need to acquire information from your audience.
There are types of onboarding because every user is individual. Therefore, every user experience is personal.
However, one can rightfully claim that there are two types of onboarding UX patterns the SaaS companies benefit from most of the time: Tour onboarding and contextual onboarding.
1- Tour Onboarding
Tour onboarding is where you demonstrate your features step by step to your users. This user onboarding process may include walkthroughs, guides, and product tours.
It usually appears at the initial onboarding; however, it can be seen when there are product updates too.
What makes them shine is that they can afford to display the product features from head to toe, and might even highlight the core value of your product or service.
3 Examples for Tour Onboarding
#1 Whimsical
However, what triggers the tour onboarding is clicking on the Getting Started: Boards guide. Once you start this interactive guide, it will show you to perform the actions that are musts for the product experience via gifs on the left one by one.
It will even give you a space on the right for you to try it out on your own.
#2 15Five
When you select Next, the left side explains how to use the respective feature and lets you try it firsthand.
Meanwhile, you can see the visualization of the feature just like you'll see after the tour on the right side.
3# Monday.com
Later on, it puts a checklist for the steps that are to be completed to fully grasp how the product works while providing short videos for each feature during the customer journey.
When to use Tour Onboarding
In most cases, this onboarding pattern is used for onboarding users for the first time. This is due to the fact that tour onboarding has a good potential to make the features of the product known and dwell upon the mostly-missed features.
Thus, it is practical to use tour onboarding when your first-time users are getting accustomed to your product during user onboarding.
Also, tour onboarding has a really high chance of making a good impression when it is used right, as it is where you showcase your product features and subtly give reasons for your audience to stay.
2- Contextual Onboarding
Contextual onboarding is where you display your features to your users the moment they are exploring them. So, it usually doesn't appear as a part of initial onboarding.
It is quite different from tour onboarding because contextual onboarding doesn't point out what is there back to back as a full tour. Instead, it focuses on specific areas.
For example, a new feature or upgrade announcement can be made through contextual onboarding.
Additionally, when you onboard your users to a new feature or remind them of a shortcut, this pattern is what you'd like to use.
In a way, these two onboarding UX patterns - tour and contextual - complement each other. While the former gives a detailed tour of the product thoroughly, the latter only refers to some individual details or features.
3 Examples for Contextual Onboarding
#1 Coda
If you start exploring what you can do on this page, you'll witness pop-ups that are interactive appearing. For example, these two below can be changed according to your needs.
After you edit these templates however you wish, you can find the side menu below if you click on Learn Coda. On this side menu, you can see sections such as keyboard shortcuts, beginner videos, and formula lists. These are examples of contextual onboarding where you get to learn through tooltips or hotspots.
#2 GatherContent
#3 Squarespace
When to use Contextual Onboarding
Contextual onboarding can be used to reinforce the key actions that are part of the initial onboarding.
Besides, it can be used for mentioning the details that aren't part of the initial onboarding. By making use of contextual onboarding, your users could notice more features, thus use them actively.
Or, this could go as the initial onboarding for the people who skipped it at the beginning.
Of course, this is not the end of it.
You could make announcements via pop-ups.
You could make use of tooltips and hotspots when introducing a brand new feature.
To sum up, you can use contextual onboarding when you cannot use tour onboarding.
Conclusion
All user journeys matter.
What you have to see through when designing onboarding UX/UI patterns is what the users expect. If you can put yourself in their shoes and look from their point of view, then you'll be able to determine which type of onboarding pattern you should use.
Once again, there are three categories of onboarding UX patterns: annotated, embedded, and dedicated.
However, nowadays, two different patterns have come into fashion in the SaaS industry. The first one is tour onboarding; the second one is contextual onboarding.
Tour onboarding is able to showcase your product features while promoting your real value to your audience. When onboarding new users, it would be better if tour onboarding is chosen as the main onboarding pattern.
Contextual onboarding, on the other hand, is for when your users are freely exploring the areas that aren't part of the initial onboarding. During this process, they'll get to see tooltips, hotspots, etc. in action.
No matter which one is more applicable to your product or service, both of these onboarding UX patterns are quite beneficial if you know when and how to use them properly.
Additionally, it is safe to say that tour onboarding and contextual onboarding are counterparts, which cannot work to the fullest without one another.
Still, you should be extra careful when and where to apply them throughout the user onboarding flow because it could be a quite complicated road to take if you overutilize them.
Frequently Asked Questions
1- What is UX onboarding?
UX onboarding is a process during which your users and prospects get to interact with the product or service you supply. Also, it works as a great tool that SaaS companies use to get their users to buy or upgrade.
2- How do you improve onboarding process in UX?
By listening to the needs and expectations of the users. Their experience could say a lot about the current onboarding process; therefore, it is highly beneficial to lend an ear to their words and wishes while improving the onboarding process in UX.
3- How many onboarding screens does UX have?
As much as they wish to have. This kind of detail totally depends on the UX designers and their team as they are the ones managing the onboarding UX process.
