Inline guides outperform tooltips 4x
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:
- 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.
- 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 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 firstname.lastname@example.org and we’d love to hear about your wins, your insights, and anything we can be a thought partner on!
New: Input fields
One of the core differences between in-app guides and help center documentation is that the best in-app guides are interactive. Now, Bento allows you to capture user information (like email or name) and user feedback directly within a guide.
How to design an effective onboarding checklist
Every onboarding checklist project includes screenshotting examples from other applications. In this post, we examine why checklists are a great form factor, as well as the most popular designs in the wild.
Everything you need to start everboarding* See Bento
and reduce churn in days.
*Not a typo