How and when to use 4 popular UI patterns to create product tours that will delight new users and shorten their time to value.
This article was updated in June 2020 with fresh content and insights.
Product tours can be powerful tools for introducing users to a new product and helping them find their bearings. They can be used to introduce new users to your interface, draw attention to product launches, and nudge users closer to their aha moment—increasing product activation, adoption, and retention rates.
But when done wrong, product tours can end up feeling like a backseat driver. And no one likes a backseat driver.
There’s no "best" UI for all product tours, but there are best use cases for popular onboarding flow patterns. The right UI pattern, used correctly, can turn a heavy-handed product tour into one that not only helps your users achieve value, but that also captivates and fosters an immediate connection with your product.
In this article, we’ll go over some popular UI patterns for user onboarding tours—including modal windows, action-driven tooltips, and hotspots—and explain how each of these can be used effectively to engage users and help them achieve success.
But before we get into the different UI patterns, it’s essential to evaluate what your product tour is really trying to showcase—and to whom.
Great product tours require empathy
Overbearing and ineffective product tours stem from a lack of empathy for new users. To craft a walkthrough that provides true value, you need to think like an outsider and take an honest inventory of the challenges you might face when learning to use your product.
Here are some key things to consider:
Range of functionality—Does your product offer one main functionality, (like Venmo), or a wide range of functionalities (like Airtable or Notion)? The more functionalities you offer, the harder it will be to be selective about which features you highlight in a tour. But keeping the scope focused is critical.
Uniqueness of UI—How unique is your product’s interface? Keep in mind that a higher degree of uniqueness does not always mean lower ease of use—some of the most unique interfaces are also the easiest to use, once learned. Ask yourself: How high is the learning curve for this interface?
User motivation—How motivated are people to complete a product tour? How much motivation have you earned from your users at this stage in the user journey? This can be based on everything from internal motivations (like receiving money) to your company’s marketing efforts.
Tech-savviness of users—Your users may come from a variety of backgrounds with differing levels of technological literacy. If your product is part of an existing ecosystem, it’s worth evaluating how your product stacks up. Users with limited technical proficiency may feel more comfortable with familiar UI patterns, terminology, and a certain order of doing things.
Choose the right UI pattern
Once you’ve done some soul-searching about your product and users, you can start to evaluate the onboarding needs of both. A fundamental question that every product designer should ask is: How much attention should I ask of my users?
User attention is a fragile thing, so ask with consideration and handle with care.
Here are the most popular UI patterns for user onboarding product tours, listed from the most attention-grabbing to the most subtle:
1. The personal trainer: Action-driven tooltips
Tooltips are callout boxes that point to specific elements in your product. They are probably the most popular UI patterns for product tours.
Since action-driven tooltips involve heavy hand-holding, they’re good for encouraging users to take necessary actions or walking users through complex account setups that require doing things in a certain order.
When used in product tours correctly, action-driven tooltips can create a highly engaging and informative interactive experience. Employee management system Humanity uses action-driven tooltips to sequentially guide users through key actions that help them achieve value faster.
But action-driven tooltips can quickly feel heavy-handed and overbearing when used on non-critical features—use them sparingly or risk causing undue user frustration.
2. The tutor: Tooltips
Tooltips that are not action-driven provide contextual help that is slightly less demanding of user attention. Users can still follow “regular” tooltips sequentially without performing an action.
These tooltips don’t require an action (other than clicking “Next”) and are useful for conveying information that is good to know, but not critical in the moment.
IBM Cognos Analytics used Appcues to give new users a short and sweet tour of key features. The tooltips contain helpful information meant to guide users towards success, but users aren’t required to stop and perform all the actions to get value from the tour.
Product tours don’t always have to happen immediately after account creation. In fact, for products with multiple functionalities, onboarding users to each feature as they progress through your product (rather than all at once) can be much more effective.
InVision uses this technique of progressive disclosure to onboard new users to its design tools. When users open up the InVision prototyping tool for the first time, they are greeted with a minimalistic tooltip product tour that runs them through a selection of key features.
Tooltip product tours can reduce support burden and scale up usability. They are highly specific and contextual, and should be used as annotations to the underlying interface. Like other UI patterns, they can also be targeted to specific audiences—new users, users who haven’t performed a certain action, or users who haven't logged into your product in x days, etc—so you can be sure that you're providing guidance where it counts.
Pro tip: When designing tooltips, think about how you can make them stand out from the core product while maintaining your brand’s styling.
Modal windows sit on top of a product’s main interface, allowing you to communicate with users without disrupting the underlying workflow.
Modal windows can be used in product tours to provide a high-level overview of the product. Modals are great for adding visuals when walking your users every step of the way isn’t necessary.
Qordoba used Appcues to give new users an overview of their product with a series of welcome modals:
Yotpo also used Appcues to create their user onboarding sequence. They opted to take users on a product tour via an introductory video. This approach cuts the number of steps down, but does require an attentive audience who is willing to sit and watch the video in full.
Remember: modal tours are bold UI patterns that are inherently disruptive. They’re great for making a splash, less so for contextual help. As with tooltips, your modal windows should stand out from the main interface, but look native to your product.
Hotspots are small icons, often circles, that hint at more information behind certain elements. They are a cross between notification badges and tooltips that require users to click to engage.
Since they require users to actively opt in, hotspots are the least invasive UI pattern for product tours. Users who need the extra help will have access to information, while users who don’t can ignore the tour altogether.
They can also be used to encourage discovery, as in Grammarly’s learn-by-doing demo document that introduces new users to the editing tool’s myriad features:
There are drawbacks to subtlety. Behance uses hotspots to aid feature discovery, which is nice and unobtrusive—but the combination of a small UI pattern with white-on-light coloring makes the hotspots hard to see. Consider adding a pulsing animation and visual contrast to make your hotspots stand out.
As with any user experience, shipped ≠ done. Once you’ve implemented a product tour, use analytics to track and measure its effect. Amplitude and Mixpanel are just a couple popular tools for diving into user data.
If you notice that users are running into bottlenecks or roadblocks, experiment with different UI patterns and UX copy—and don't be afraid to mix and match! For instance, when Slack updated their interface earlier this yar, they used a novel mix of small modals and hotspots to introduce the new experience.
As you dig into the data, think about where users are getting hung up or where engagement is dropping off.
The best user onboarding experiences increase activation and shorten a user’s time to value. This typically takes multiple iterations to perfect—once your product tour is published, be prepared to revisit it and fine tune the experience again and again. You’ll know you’ve gotten it right when you are successfully driving users to value in as few steps as possible.