#1 Guide to Onboarding UX/UI Patterns – everything you need to know

I got vaccinated a while ago and believe me, it was NOT what I expected.

I thought I would show up, get the shot, and leave.

What happened instead was that I had to fill a form, got asked the same questions, no one told me where to go, and it took me half an hour just finding the right room.

onboarding ux patterns

No disrespect to healthcare workers, but at that moment I could only think of one thing.

“This is unorganized as hell.”

And now that I’m thinking it over, it reminds me of a bad onboarding experience. Trust me, there is an end to the pandemic. But bad onboarding UX will be a thing forever.

Of course, there is a way for you to NOT be a part of that.

So, let’s talk about onboarding UX/UI patterns and how it can save you time, money, and customers if you apply them correctly.

What is Onboarding UX?

Onboarding UX is an experience or process that your users go through the moment they enter your website, app, or product, often even before that. It is also a tool that SaaS companies can use to make a good impression on their users and get them to purchase or upgrade.

To find out more about onboarding UX, you can also take a look at our onboarding UX guide.

Now that we are on the same page about Onboarding UX, it is finally time to delve deep into onboarding UX/UI patterns.

Onboarding UX/UI Patterns

Every user needs onboarding.

Even employees need onboarding, so it is impossible to think you can just leave users to their own devices.

Why?

Because if they don’t understand your product, they will leave. You only get one shot.

Tough biz, I know. But that’s where onboarding UX/UI comes into the picture.

What is an Onboarding UX/UI Pattern?

An onboarding UX/UI pattern is a way of designing UX or UI to create an onboarding experience specifically for a given context. For example, in a context where a user has already started using the product but still has things to learn, a tooltip might be the appropriate onboarding UX pattern.

Why Onboarding UX/UI Patterns?

“But why do we need different types of onboarding UX patterns for different contexts?”

The short answer is: User psychology.

UX is all about what the users want to see, hear, and experience.

An onboarding UX pattern is thus about what a user sees, hears, and experiences during onboarding.

So, it is only natural that there are several types of UX patterns. They have to take shape according to what the users need and expect.

What are these several types of onboarding UX patterns we are talking about then? Let’s take a look.

Categories of Onboarding UX/UI Patterns

Conventionally, there are three categories of onboarding UX patterns:

  1. Annotated – patterns for when you want to point out a specific feature
  2. Embedded – patterns for when you want to announce something or alert
  3. Dedicated – patterns for when you want to get users excited or ask them something

But here at UserGuiding, we like to divide onboarding UX patterns into two categories.

Tour onboarding and contextual onboarding.

Tour Onboarding

Tour onboarding includes walkthroughs, product tours, some types of guides, and anything else that is a tour.

Mostly, it is part of the initial onboarding, but often tours can be triggered after product updates or new launches as well.

onboarding ux patterns tour onboarding

Why use tour onboarding?

What are the chances a new user knows how to use your product?

Not very likely.

To make sure they can keep learning by themselves, you have to hand-hold them at the beginning of their journey with your product.

That is when tour onboarding is needed. Still, it is important to keep it short and let the users know that it is not a long process.

Contextual Onboarding

Contextual onboarding is, as can be seen in its name, the type of onboarding UX that is very much specific to context; anything from segments of users to time of the year.

These types of onboarding UX patterns are generally utilized after the initial onboarding, preferably during the first month of use and as more features are explored.

onboarding ux patterns contextual onboarding

Why use contextual onboarding?

Contextual onboarding has just what tour onboarding lacks.

With contextual onboarding, users can learn through experience, explore features when they need to, and not get annoyed as much.

Because of this complementary nature of tour onboarding and contextual onboarding, it is easier to categorize them this way.

If one doesn’t help, the other can.

Of course, it is not that easy.

Let’s take a look at the individual types of onboarding UX patterns.

Types of Onboarding UX/UI Patterns

When I say there are hundreds of onboarding UX/UI patterns, I make no exaggeration.

Anything can be a pattern.

From a specific type of guides to a rarely used kind of blank slate, there are WAY too many.

But still, it is possible to come up with a general picture of the most used types of onboarding UX/UI patterns.

And that is exactly what we have in this article.

Behold, the list of the top onboarding UX patterns:

  1. Product tours
  2. Self-segmentation
  3. Checklists
  4. Interactive Guides
  5. Hotspots
  6. Tooltips

1- Product Tours

Let’s talk about the elephant in the room. Everybody hates product tours.

Or do they?

My take on it is that we all hate bad product tours. And yes, if it has more than 5 steps it is automatically bad. Sorry, I don’t make the rules.

For example, look at this 4-step product tour by PayPal.

onboarding ux patterns paypal
A step from PayPal’s Product Tour.

With 4+1 tooltips, PayPal explains the most important features of the product/service, and the best part is that there is an “end tour” option.

We don’t see that every day, take notes.

Of course, PayPal’s natural ease of use helps too.

And then look at this one.

onboarding ux patterns nimbus capture

Nimbus Capture exceeds the five tip limit, but they make up for it by telling the user just how many tips they will see.

And of course, being able to leave the tour is always a delight.

It is a lot harder to onboard users to a complicated product like analytics tools or spreadsheet-based software.

And that’s when you should start looking for other onboarding UX patterns.

Why use product tours?

Pros

  • Great jump start for new users
  • Overall understanding of the product can be achieved
  • First impression good if done right

Cons

  • Often skipped or no attention paid
  • Can easily agitate users if designed poorly
  • Not helpful in the long run without further onboarding

2- Self-segmentation

Unlike walkthroughs and product tours, self-segmentation might be the least frowned upon onboarding UX pattern. And it is rightfully so.

Here’s the catch.

We all want to talk about ourselves. But not questioned.

A self-segmentation onboarding designed right can set a path for each persona without asking too many questions.

And of course, it can do it without annoying the users.

Let’s talk about the classic Pinterest example.

By having the users pick five things they are interested in, Pinterest creates a personal feed for the users.

An instant jumpstart for anyone.

And that is exactly why it works.

Everyone wants a personalized feeling in any product they use, even the toaster or the bathroom sink. 

Pinterest does it in less than a minute.

onboarding ux patterns pinterest
onboarding ux patterns mailchimp

Another great example of self-segmentation would be Mailchimp’s initial onboarding.

Rather than focusing on user personas and creating a custom UX, this one focuses on giving users freedom.

Of course, this is essentially an illusion 😬

But it still gets the job done.

Self-segmentation can come in any form, what matters is that it can help identify a user persona and tailor their user experience in that light.

Why use self-segmentation?

Pros

  • Can help identify user personas and improve UX
  • Lets the user know that you care about their preferences and needs
  • Can get them started right away with the content of your product

Cons

  • Might be problematic when user personas are not clear-cut or hard to identify
  • The user might prefer not to choose – always helpful to add a skip button
  • Might be frustrating after a long product tour or too many questions

3- Checklists

Oh, to tick off a complete checklist. What a magnificent feeling.

I don’t know anyone who doesn’t appreciate a good checklist and that’s why checklists are replacing product tours. Every. Single. Day.

But of course, even a checklist can be bad UX.

Can you imagine an onboarding checklist with 10+ tasks, no progress bar, and no completion/celebration message afterward?

Sounds like torture to me.

Let’s talk about good checklists instead. Look at this beautiful checklist from our UserGuiding onboarding.

onboarding ux patterns userguiding checklist

Friendly welcome? Check. ✅

Very few and small tasks? Check. ✅

Progress bar? Check. ✅

Turn it off any moment? Check. ✅

Of course, there are very different types of checklists.

Hundreds of patterns, remember?

But at the end of the day, what makes a good checklist is how it makes the user feel.

If you cannot make your users feel like they are getting the job done right off the bat, you can’t guarantee customer acquisition or retention

Dont think it over, just get a good checklist.

Why use a checklist?

Pros

  • Better than product tours, especially for bigger products
  • Gets users to achieve from the very beginning
  • Helps manage cognitive load more effectively

Cons

  • Might fail to impress without a progress bar or with too many tasks
  • Essentially like a product tour, onboarding fails if nothing comes after
  • Problematic if it doesn’t reappear after skipping once

4- Interactive Guides/Walkthroughs 

If I had the chance to tell all onboarding UX designers just one thing it would be:

“Show, don’t tell.”

When designing onboarding UX, we seem to be forgetting the most important factor.

The users.

If you ignore the needs of users and just focus on promoting your product to the fullest, you will fail both.

So, show them.

Instead of putting up a show with 10+ tooltips, video tutorials, and hotspots all around, just hand-hold your users to do a small task and that’ll be their most memorable moment with your product.

For example, look how Vieworks used UserGuiding to create an interactive guide/walkthrough.

onboarding ux patterns vieworks
Viework’s Product Tour, Created with UserGuiding

Although it resembles a product tour at first, there is one crucial difference.

The users don’t watch, they do.

And it creates a huge difference in onboarding considering interactivity is six times better than static learning.

Why use interactive guides?

Pros

  • The users get to be included and learn better
  • Direct focus and hands-on trial make UX more memorable
  • Can be accessed later through virtual assistants

Cons

  • The focused view might get annoying for some users
  • Cannot be too in-depth to avoid user frustration
  • User needs to be educated to know where to access guides later

5- Hotspots

A hotspot is just perfect for directing users somewhere.

You have something important to say? 

Put a hotspot on it.

You can use them to get the users to click on something, or hover over it to reveal more info as in Zakeke’s case (made with UserGuiding 😏).

onboarding ux patterns zakeke

Or look at this one from Plandisc that offers to start an interactive guide, also powered by UserGuiding.

onboarding ux patterns plandisc

Thanks to their design, hotspots are instant attention catchers, but it is still up to the designer to decide where to use them. 

So again, it boils down to deciding where is appropriate for a hotspot.

But in any case, it is clear that using hotspots too much is in bad taste. Your users aren’t lab mice, people.

Why use hotspots?

Pros

  • Easily catch attention and direct users
  • Help avoid using too many pop-ups
  • Act like an optional tooltip  and reduce cognitive load

Cons

  • Might get frustrating when overused
  • Might result in uninformed users if important information is given through hotspots
  • Unnecessary if not used for very specific button

6- Tooltips

A tooltip is the onboarding equivalent of saying “FYI”.

As in “there is this feature, FYI, you use it with this keyboard shortcut”.

Or “enter a password, FYI, it has to include lower and uppercase.”

But never and ever “Enter payment method, FYI we will charge you an extra $20 next month.”

That is the last thing you want to put in a tooltip because we all skip it sometimes 🤦

Of course, there are tooltips that we don’t skip.

Why not?

Because they are designed right.

Look at this example from the Duolingo app, for example.

onboarding ux patterns duolingo
onboarding ui patterns duolingo

At that moment, the user doesn’t know the meaning of the word just yet.

They have to click on the word to find out, and at the same time they end up learning how the feature works.

To that, I call a perfectly designed tooltip.

Why use tooltips?

Pros

  • Great alternative for product tours in simpler products, best for further learning in complicated products
  • Less annoying than tours or guides
  • Can be used for almost all levels of onboarding – from signup to in-app tips

Cons

  • When not dismissable tends to agitate users
  • Too many at a time might be frustrating
  • Has to be very small content at a time to work

When to Use Which?

Now here’s the thing.

Knowing onboarding UX/UI patterns and knowing how and where to utilize them are two different things.

But hey, I got you covered.

When in doubt about when to use which onboarding UX pattern, just ask yourself these three questions:

  1. What is the content?
  2. Who will see this pattern?
  3. When does it show up?

1- What is the content?

What is the input?

What are you trying to tell the users?

It makes no sense to design a whole product tour using only hotspots. Likewise, conveying important information through hotspots is just as meaningless.

If you don’t consider what the pattern will convey to the user, you fail from the very start.

2- Who will see this pattern?

There are all kinds of SaaS companies just as there are all kinds of user personas.

Think about it.

Cuepath, a medication-monitoring service, works with elderly users and thus has to build their onboarding accordingly.

Would it work out for them if they chose to use tooltips only?

Or would the users be able to follow the onboarding without hotspots?

onboarding ux patterns cuepath

Always consider the personas, and read Cupath’s success story while you are at it.

3- When does it show up?

Onboarding UX works in mysterious ways.

If a certain pattern shows up one moment early or late, the user can get confused.

It’s the user expectations, duh.

That’s why UX pattern triggers play an important role in deciding what pattern you should use.

For example, it sounds normal enough for a welcome message triggering right after a sign-up to be a pop-up. But a pop-up popping up later on in the middle of using a feature sounds off.

Just think from the users’ perspective and it’ll all work out.

Conclusion

There are many types of onboarding UX/UI patterns, almost too many of them. But each type corresponds to a user’s needs or expectations, and the last thing SaaS businesses should be doing is turn a blind eye to these.

A satisfactory onboarding UX is not the easiest task, but when you put the needs of the users first, it turns into a win-win situation.

Don’t miss the chance.


Frequently Asked Questions


What is onboarding in UX design?

Onboarding UX design is a way of utilizing UI and other elements of UX to match the users’ needs and expectations when onboarding.


How do you improve onboarding process in UX?

Improving onboarding UX depends on reducing the cognitive load of the flow, analyzing data, and testing the process regularly. But overall, the main focus should always be on understanding user needs.


How do you design the best onboarding?

To design an excellent onboarding process, UX designers must determine user needs, draw out a user journey map, and conduct user testing. Designers should also consider the nature of the product.

Serra Alban

Serra is a Creative Content Writer of UserGuiding specialized in user onboarding and UX. When she is not writing you can find her playing video games or throwing random movie trivia at uninterested people.