Onboarding Tooltips For SaaS: How to Best Use This UI Pattern to Guide Users to Adopt Your Product

Onboarding Tooltips For SaaS: How to Best Use This UI Pattern to Guide Users to Adopt Your Product

There’s a simple way to boost product-led growth: giving users a fantastic first impression of your product by using onboarding tooltips.

In this article, we’re going to explore some best practices and principles around how you can use this handy UI pattern as a way of boosting product adoption through great onboarding experiences.

That starts with understanding how new users learn about your product. Then, it’s relatively simple to create an onboarding process that meets their needs and drives adoption.

Ready to get started?

Let’s dive in!

TL;DR

  • An onboarding tooltip is a type of targeted popup enabling users to understand new features in a contextual way – they are often used to create interactive product tours.
  • The primary aim of an onboarding tooltip is to help the user understand what they need to do next by guiding them to the next stage of a task or activity, boosting product adoption.
  • You can use tooltips in a range of scenarios, including launching product tours, announcing key features that are newly released or updated, running interactive guides, triggering in-app contextual help to enable self-service, or upselling a new feature.
  • When it comes to creating tooltips, you have three main options: build them yourself, leverage something open source, or use one of the many tools available.
  • Using a tool like Userpilot has several distinct advantages versus building or re-using code: primarily increasing flexibility, insight from data, and reducing time to value. Get a demo and start creating tooltips without code.
  • Whenever you want to use tooltips as part of an onboarding process, you should consider a set of fundamental principles: build from a foundation of a great user interface, keep tooltips brief and to the point, only use them where it makes sense, avoid clutter, and show users’ progress.

What are onboarding tooltips?

An onboarding tooltip is a type of targeted popup enabling users to understand new features in a contextual way. A well-designed tooltip lets users discover certain features of the product that bring the most value to the new user.

Screenshot of Userpilot onboarding tooltip.
Tooltips slot into the context of a user flow.

Of course, you shouldn’t just think about onboarding new customers – it’s not solely about out-of-the-box product tours or user activation.

User onboarding is an iterative process that cuts across every stage of the user journey and using tooltips to motivate users to take action is part of a digital and interactive design user experience.

What is the purpose of a tooltip?

Tooltips are a neat little feature designed to draw attention and help users understand how to interact with your SaaS product.

Screenshot of Userpilot UI patterns.
A tooltip is one of many tools at your disposal.

Onboarding users is the main purpose of a tooltip and it works by drawing the user’s attention toward what they need to do next. They work like small guidance that offers contextual help as the user moves across the journey and interacts with a new app.

How to use tooltips across the user onboarding process

Tooltips can be a valuable tool in the swiss army knife of any savvy product manager because they are so versatile – you can use them in a range of different scenarios (not just as part of a product walkthrough to introduce users to the product).

Some use cases include:

  • Building a product tour
  • Announcing key features that are newly released or updated
  • Running interactive guides (yes, these are not the same as product tours!)
  • Triggering in-app contextual help to enable self-service
  • Upselling a new feature

Now let’s look at some tooltip examples for each use case.

Product tour tooltips

Product tours are a great example of providing a good onboarding experience – there’s no better way to onboard users to your SaaS product.

Essentially, a product tour is a series of tooltips designed to introduce a brand new user to the key features of your product. When creating product tours, there are many tools to consider.

A key principle of effective product tours to highlight: product walkthroughs should never be too detailed – the whole point is to direct users toward your most important features.

Let’s explore the product tour example from Slack below as an example of initial onboarding.

Screenshot of Slack tooltip.
A handy tooltip indicating what actions to take.

Slack uses two tooltips, showing new users how to send messages and keep track of conversations (reducing the learning curve) during an onboarding flow.

Screenshot of Slack tooltip.
Coupled together, tooltips can make a big difference to user onboarding.

This is a good example of a product tour for an average user since it’s only focused on highlighting how to get started, not taking the users through a whole tour of the product that might or might not be relevant for them.

Feature announcement tooltips

A feature announcement is a way of letting old and new users alike know about changes to key features and functionality in your SaaS.

They can be simple, plain launch messages like this tooltip from Calendly.

Screenshot of Calendly tooltip.
Calendly keeping it simple and crisp.

Or take inspiration from this example from Slack: create interactive tooltips (a great way to communicate a release and boost feature adoption).

Animation of Slack onboarding.
An interactive tooltip can play dividends.

Interactive walkthrough tooltips

Not all product tours need to take the same approach – interactive walkthroughs can be a fantastic way to enhance user onboarding and walk users through a series of key actions (sign-up flows are extremely common).

Why? Because most users learn through doing, not just being told what to do. An interactive experience is a great way of teaching a user to get familiar with even the most complex product.

Done right, interactive walkthroughs help users to take meaningful actions and achieve ‘wins’ – which means you’re significantly improving the chances they’ll want to use your product again.

Bear in mind it’s always worth keeping a ‘skippable’ option for experienced users.

So what’s the difference between a quick tour of the product and using tooltips in a walkthrough? It’s down to one thing: user action.

Here’s an example of a walkthrough guiding users to personalize their chat widget from Kommunicate.

Animation of Kommunicate chat tooltip.
Tooltips helping personalization never fail to help.

In-app contextual help tooltips

These tooltips trigger on specific pages and are designed to point out specific features as a user navigates through your product. The better your tooltips, the more likely you’ll trigger an ‘aha moment’.

Used in the right context, these can enhance a minimalist UI and lead to effective onboarding across the entire user journey.

The example from Loom below shows how they can fit seamlessly into your UI, only appearing when your user hovers over a specific element – a clever UI pattern.

Screenshot from Loom.
Protect your users’ attention with a hovering tooltip.

Here’s another great example from Asana (a project management tool), showing a tooltip that pops up when a user opens a task and starts to write a comment.

This highlights an important feature the user might need, at the right time.

Screenshot of Asana tooltip.
A task-specific tooltip from Asana.

Upselling new features

As a rule, you shouldn’t try to slot upselling at random moments. It only works when you share the right message at the right time.

The example below from Intercom is spot on: showing users a ‘greyed out’ inactive feature, which can be upgraded with a simple click.

Screenshot of Intercom upgrade tooltip.
You can use tooltips for upselling features – in the right context.

How do you create tooltips?

It’s obvious that tooltips – focused on the right use case – can make a big impact on user onboarding, drive adoption, and contribute to explosive growth.

When it comes to including tooltips in the user experience, you have three main options: build them yourself, leverage something open source, or use one of the many tools available.

The no-code way: Userpilot

The fastest way to launch tooltips for your users is to use a trusted no-code tool like Userpilot.

You start by creating a flow.

Screenshot of Userpilot onboarding.
It all starts with creating a user flow.

From there, you can use pre-built templates of tooltips – these are completely customizable but can save you valuable time if you want to get value to your users fast.

Screenshot of UI patterns in User Pilot.
Choose from a range of pre-built options to save time.

It’s easy to edit content, change colors, or add sections.

Screenshot of Userpilot customization.
Customization is always a good feature to offer users.

The final step is to set ‘triggers’, define your audience – and you’re good to go.

Screenshot of Userpilot onboarding tooltips.
Choose your triggers carefully.

Valuable performance data and advanced analytics help to understand how tooltips are landing with your users.

If you link a goal, you can also track progress against that objective (e.g. if a tooltip helps your users get to an ‘aha moment’ and utilize a new feature).

Screenshot of Userpilot analytics.
Valuable data – if you know how to interpret it.

You can even A/B test to experiment with how different product tours land, and segment users accordingly.

Screenshot of Userpilot A/B testing.
Use A/B testing to inform your actions.

Want to see Userpilot in action? Get a demo and start building tooltips without code.

The open-source way: Bootstrap and Jquery

Another way to use tooltips in your product tours is to leverage open-source code – you could try Bootstrap and Jquery.

These still require a fair amount of technical knowledge to implement – and you certainly will lack some of the advanced features described above – but you should be able to work through the examples given enough time.

It’s certainly a more arduous way of crafting effective product tours and in-app guidance using tooltips, compared to using a no-code tool.

The ‘developer’ way: Javascript, HTML, CSS

This is the most complex option – but if you’ve got strong development skills (or have a developer you can call on), using Javascript will give you the most autonomy to design, create, and customize tooltips as part of your product tours.

Of course, there’s a constant overhead of time and effort to keep your tooltips up to speed.

HTML and CSS don’t have as steep a learning curve, but you’ll still be limited in terms of functionality and maintenance.

To create product tours and spin up tooltips that delight your users quickly, other tools are a simpler option.

Tooltips best practices for good UX

To get users engaged – and keep them that way – you’ve got to craft user onboarding experiences and product tours that deliver value.

Consider the following principles for onboarding tooltips to keep you headed in the right direction.

How long should tooltips be?

As a rule of thumb, prioritize brevity. Think about tooltips working on mobile apps screen to help you keep it brief. Keep your tooltips as concise as possible.

Think of them as little ‘helpers’ to your users – not lengthy, boring product documentation that should compensate for the lack of a proper user interface design.

What do you write in a tooltip?

UX writing should be concise. Have a clear structure in mind when it comes to creating tooltip content.

Start with a title and tag on a short description, with the primary purpose of helping your users understand their next action – just like this concise tooltip from Narrato below.

Narrato tooltip screenshot.
A concise tooltip is a good tooltip.

The example from Miro below is slightly more detailed and informative – but that’s because it has a different purpose (pointing users towards a useful selection of guides and product tours)

Miro screenshot.
Different types of tooltips work in different situations.

Designing tooltips for usability

You should always prioritize your in-app messages and tooltips for usability. What does that look like in practice?

  • Action-oriented copy – Keep your copy firmly oriented towards the next viable action.
  • Give users a way out – Always add a skip button to your product tours to avoid user frustration.
  • Include CTAs – Where it makes sense, include clear CTAs – like this update example from Asana.
Screenshot of Asana tooltip.
A clear CTA in a tooltip can be a powerful move.
  • Showcase your brand personality. Define clear UI patterns which showcase your brand colors in your tooltips – it helps your users understand the significance of certain types of notifications (like this example from Asana below).
Screenshot of Asana.
Use colors to signify meaning.

Add a progress bar

When using multiple tooltips to create interactive guides you need to consider the user experience first.

Great product tours (or interactive walkthroughs) often include some kind of progress indicator. This massively helps users ‘see the finish line’, and might encourage them to persevere with a journey.

There is a range of UI patterns to choose from: a progress bar, numbers, or dots – quite simply, it doesn’t matter as long as it’s clear for your users.

Screenshot of Userpilot progress.
A range of options at your disposal.

Make sure you add a back button for easy navigation.

Screenshot of Userpilot interface.
The back button is an invaluable part of the onboarding flow.

Avoid clutter and tooltip overlap

While of course, you want to keep your users updated and informed, you need to balance this with clean, straightforward UI patterns to avoid the risk of confusion or over-complication.

When messages overlap, and the user struggles to read them – there’s simply no point in having them (like this unfortunate example from Zoom below).

Screenshot of Zoom.
Crowding tooltips means poor UX.

You can avoid this by setting specific conditions – for example, targeting a specific user segment, a specific screen or page, or prioritizing certain use cases.

Screenshot of Userpilot.
Focus on deciding how to trigger your tooltips for maximum effect. Get a demo and see Userpilot in action.

Don’t rely on tooltips to compensate for a bad UI

As fantastic a tool as tooltips are, they can’t fix a poor user interface. Your SaaS should still make sense and be as clear as possible.

A common mistake is to bombard the user with a prolonged series of tooltips when the product itself needs fixing. Focusing on user adoption and retention means more than relying on a tooltip as a gimmick.

Focus on getting the foundational elements of your design right first, and use tooltips as a way of enhancing that experience.

When are tooltips NOT a good idea and will lead to bad UX

Tooltips are not a silver bullet and definitely not the best route for relaying critical information that a user needs to refer back to frequently.

Typically, they don’t work well with images, videos, forms, or other interactive content. You should absolutely avoid tooltips on repetitive actions – there’s no faster way of frustrating your users than an annoying, irrelevant popup.

The key lesson boils down to this: you shouldn’t use tooltips where they aren’t needed.

It may seem obvious, but many SaaS companies make the mistake of overcomplicating the onboarding process with tooltips when they have fundamental design issues to contend with.

Conclusion

We’ve covered a lot of ground in this article.

From what tooltips are, where they fit in as part of an onboarding flow, best practices, different ways to implement them – and where to avoid them.

The key takeaway is this: tooltips can form a fundamental building block of human-focused experiences delivered in a contextual way if you follow best practices.

Keep them relevant, use them in a relevant way, and avoid unnecessary fluff to drive the most impact.

That’s how you have the biggest effect on user adoption.

Want to build tooltips code-free? Book a demo call with our team and get started! Check out the banner below to get started with creating engaging onboarding tooltips.

previous post next post

Leave a comment