Resources /

Inline guides outperform tooltips 4x

Meera Kanani
2 min read

When our team has built in-house onboarding at other startups, one of the trickiest constraints is the lack of data to know what kind of form factor would be most effective. Larger projects lend themselves to research, but that can easily balloon an onboarding design project from four to six or 8 weeks.

Most onboarding projects start with a Figma research file where screenshots of other apps’ onboarding are collected and reviewed for what might work. That creates a natural convergence towards the most commonly seen form-factors. If you see it everywhere, then you may as well do it too, right?

But how do you know if it works?

Over the past year, we’ve been able to collect and measure user engagement rates across different onboarding designs (form factors, step lengths, and even when it is shown). Let’s take a look at the numbers as it comes to initial onboarding (more about everboarding to come)!

Form factors for onboarding

To set the stage, let’s do a quick revisit of the most common form-factors we see in SaaS onboarding:

Tooltips

  • Bite-sized, usually with some text or an image
  • CTAs are generally about progression, i.e. “next”
  • Traditionally shown as a pop-up, i.e. when a user lands on a page. Bento defaults to a version where users opt-in by hovering over an element, or a visual tag.
  • Can be standalone or strung into a product tour. 
  • Gone once it’s seen or dismissed.

Modals

  • Usually larger than a tooltip and covers a large part of the page.
  • Usually a single screen, but sometimes presented as a multi-step slider.
  • Usually loads on a particular page or at the start of a new websession. 
  • Gone once it’s seen or dismissed.

Overlay guides / checklists

  • Single or multi-step guides with content and calls-to-action. 
  • Shown as a sidebar, usually sliding over to cover some content on the page
  • Accessible from a toggle or navigation item across multiple pages.

Embedded guides / checklists

  • Onboarding cards or a quickstart guide that lives in a particular page, or on the homepage in lieu of an empty state.
  • Feels like a part of your product vs. a 3rd party addition
  • Accessible until the guide is completed (and sometimes after a guide is completed, too).

Engagement and success rates by form factor

Embedded inline guides – particularly when added to a dashboard page – drives nearly 4x the engagement of tooltips and modals
While tooltips and modals are limited,  checklist guides are naturally suited to tracking more completion.

Embedded guides perform 4x better than overlay guides

The most surprising thing we found wasn’t the improvement of guides over modals. It’s self-evident that an experience which can be re-accessed will be re-accessed more than ones that are ephemeral. The most surprising thing was to see the jump from overlay guides (i.e. via a sidebar) compared to guides which are embedded onto a page.

And it makes sense. Products that think deeply and care a lot about their onboarding usually will give it the attention it deserves. But to see a 6x improvement from embedded guides vs. tooltips suggests that this decision isn’t one to be made lightly. If you’re going to bother creating an onboarding experience, it matters that users can access it easily and that it remains top of mind from session-to-session until they’re past a critical point.

What are your stats?

We’d love to hear about your benchmarks on engagement and completion. Give us a shout at hello@trybento.co and we’d love to hear about your wins, your insights, and anything we can be a thought partner on!

Get updates from Bento

Get the latest news and views from Bento
delivered to your inbox.

We won't SPAM or share your email with third party.

👌 Got it!

We're excited to have you along for our journey!
Oops! Something went wrong while submitting the form.

Everything you need to start everboarding*
and reduce churn in days.

See Bento

*Not a typo