← Visit Appcues.com
×
×

Product tour UI/UX: Best onboarding flow patterns

Learn how to use product tour UI patterns to design user onboarding tours. Increase activation, adoption, and retention rates!
Skip to section:

Skip to section:

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.

Tooltips can be action-driven, which means that users have to perform the requested task before they are taken to the next tooltip.

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.

this is a screenshot image of employee management tool humanity. it shows a product tour that uses an action-driven tooltip ui pattern. in this example a user has to click on an element on the screen to progress to the next step in the user onboarding tour

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.

ibm cognos analytic tooltip made with appcues

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.

this is a gif image of design tool invision's user onboarding product tour that shows a series of tooltips used to introduce new users to a toolbar. this is a good example of using the right ui pattern for toolbar onboarding

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.  

Check out our guide—Tooltips: How to use this small but mighty UI pattern correctly—for more suggestions and examples. Ready to start building your own tooltip-driven product tour? Learn more about Appcues tooltips.

3. The welcome committee: Modal windows

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:

qoroba user onboarding welcome modal example made with appcues

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.

yotpo user onboarding modal video

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.

Check out Modal windows: How to use this bold UI pattern for more examples and advice about using this in-app messaging pattern. Or jump right in with Appcues modals and start building your own product tours, no coding required. 

4. The friendly reminder: Hotspots

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.

Hotspots can be used as a standalone pattern on a page, or they can be combined with other UI patterns in a lightweight product tour, like marketing content stream Zest does in theirs:

this is a gif image of an animated hotstpot and tooltip. this is an example of a fun ui pattern that is really good ux. it shows a green hotspot on a ui element that turns into tooltips with animations when the user clicks

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:

this is a gif image of grammarly editor's new user onboarding demo document that demonstrates a learn by doing apparoach to user onboarding. there are pulsating hotspots aka beacons that open into tooltips when a user clicks on them

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.

this is an image from behance's user onboarding flow that shows the use of hotspot and tooltip ui patterns. the hotspot is white against a white background which makes it hard to see

Want more info? We categorized over 500 user onboarding experiences into 8 UI/UX patterns, including hotspots. If you’re interested in integrating hotspots into your own product tour—good news! Appcues offers hotspots, too.

Measure, experiment, and improve

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.

slack new version onboarding tour

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.

The ultimate guide to user onboarding. Discover user onboarding definitions, examples, best practices, and resources.

Author's picture
Katryna Balboni
Content and Community Director at User Interviews
Katryna is the Content and Community Director at User Interviews. Before User Interviews, she made magic happen with all things content at Appcues. Her non-work time is spent traveling to new places, befriending street cats, and baking elaborate pies.
Skip to section:

Skip to section:

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.

Tooltips can be action-driven, which means that users have to perform the requested task before they are taken to the next tooltip.

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.

this is a screenshot image of employee management tool humanity. it shows a product tour that uses an action-driven tooltip ui pattern. in this example a user has to click on an element on the screen to progress to the next step in the user onboarding tour

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.

ibm cognos analytic tooltip made with appcues

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.

this is a gif image of design tool invision's user onboarding product tour that shows a series of tooltips used to introduce new users to a toolbar. this is a good example of using the right ui pattern for toolbar onboarding

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.  

Check out our guide—Tooltips: How to use this small but mighty UI pattern correctly—for more suggestions and examples. Ready to start building your own tooltip-driven product tour? Learn more about Appcues tooltips.

3. The welcome committee: Modal windows

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:

qoroba user onboarding welcome modal example made with appcues

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.

yotpo user onboarding modal video

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.

Check out Modal windows: How to use this bold UI pattern for more examples and advice about using this in-app messaging pattern. Or jump right in with Appcues modals and start building your own product tours, no coding required. 

4. The friendly reminder: Hotspots

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.

Hotspots can be used as a standalone pattern on a page, or they can be combined with other UI patterns in a lightweight product tour, like marketing content stream Zest does in theirs:

this is a gif image of an animated hotstpot and tooltip. this is an example of a fun ui pattern that is really good ux. it shows a green hotspot on a ui element that turns into tooltips with animations when the user clicks

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:

this is a gif image of grammarly editor's new user onboarding demo document that demonstrates a learn by doing apparoach to user onboarding. there are pulsating hotspots aka beacons that open into tooltips when a user clicks on them

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.

this is an image from behance's user onboarding flow that shows the use of hotspot and tooltip ui patterns. the hotspot is white against a white background which makes it hard to see

Want more info? We categorized over 500 user onboarding experiences into 8 UI/UX patterns, including hotspots. If you’re interested in integrating hotspots into your own product tour—good news! Appcues offers hotspots, too.

Measure, experiment, and improve

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.

slack new version onboarding tour

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.

The ultimate guide to user onboarding. Discover user onboarding definitions, examples, best practices, and resources.

Author's picture
Katryna Balboni
Content and Community Director at User Interviews
Katryna is the Content and Community Director at User Interviews. Before User Interviews, she made magic happen with all things content at Appcues. Her non-work time is spent traveling to new places, befriending street cats, and baking elaborate pies.
You might also like...