This expert guide includes 30+ links to original content—just click on each link to dig deeper, or simply bookmark this page to refer to as you build out your own product tour.
Product tours—sometimes called product walkthroughs—introduce users to a new product and help them find their bearings. They can be used to introduce new users to your UI and guide them to take meaningful actions that bring them closer to their aha moment—increasing product activation, adoption, and retention rates.
But a poorly executed product tour can quickly frustrate new users, preventing them from discovering your product's core value and making them more likely to abandon your product too soon. The key is to focus on your product’s value and user goals, instead of dragging users through every feature. We’ll cover more tips for designing effective product tours below.
First, let’s take a closer look at why you’d use a product tour in the first place:
All software involves some kind of learning curve or friction that users must overcome before they can experience its value. As a product owner, your goal should be to get users over that learning curve to help them get more from your product as quickly and efficiently as possible.
Product tours do a lot of good for new customers who are learning how to use your SaaS product for the first time. Product tours:
Now that you know why product tours are so important, let's find out how great product tours are put together.
Every product has different features, every user has different needs, and effective product tours will look different for every app. That said, here are 4 best practices for designing a great product tour that helps move users through your flywheel and onto the next stage in their journey.
A good product tour should:
Next, let's look at some practical tips on how to design an effective product tour for your app.
There's no one-size-fits-all best product tour UI, but there are best use cases for popular onboarding flow design patterns—like tooltips, hotspots, and modal windows—that keep users engaged and educate them on how to use your product.
It's important to match the UI pattern you choose with the needs of your users and the requirements of your app. More complex apps might require more targeted onboarding guidance, while straightforward apps might only require some basic tips. You should also think about your users' motivation level—how likely are they to complete a more extensive product tour? How tech-savvy are they? It's important to empathize with users as you choose which UI pattern to apply to your product tour.
Below, we’ll go through the 3 most popular UI patterns for building product tours, and explain how to use each one.
These small overlay boxes that point out specific features or elements within a SaaS product are the cornerstone of many product tours. In fact, tooltips are probably the most common product tour UI pattern you'll come across. And for good reason: Tooltips offer a highly contextual way to guide users through your app, without being overly prescriptive (although they can also be used for firmer, more prescriptive guidance when the occasion calls for it).
Tooltips can be action-driven—meaning users have to perform the requested task before moving onto the next tooltip—or non-action-driven, meaning users can still follow them in sequence without performing an action. Tooltips can also be targeted to specific users, such as new users or users who haven't logged into your product for a while, so you can be sure you're providing the right guidance to the right users.
Employee management system Humanity, for example, uses action-driven tooltips to sequentially guide users through key actions that help them achieve value faster.
Check out this article for more information on how to use tooltips in your product tours. There are dozens of different plugins to help you implement tooltips, but using Appcues lets you create and iterate on your tooltip-based product tours without writing any code.
Modal windows are another popular option for product tours. Modal windows come in all shapes and sizes and can be configured to pop up over your UI or to take over the whole screen. Their larger size allows you to include more detail than you can in most tooltips, which makes them perfect for extra elements like images or video.
Indiegogo used an Appcues modal to announce a new feature in their product. Instead of walking users through the product with an actual tooltip, they include an illustration of a tooltip calling out the new feature. It’s an interesting illustration that demonstrates where users can expect to find a new feature.
The added flexibility lets Indiegogo provide more detail than could be included in a regular tooltip, and the full-screen overlay ensures they have their users’ full attention.
Note that because large modals are inherently disruptive, they can easily become intrusive and detract from the overall user experience. Use them wisely!
Check out our collection of 18 open-source modal window plugins or use Appcues to implement a modal window-based product tour without eating into your dev resources.
Hotspots are the most lightweight way of building a product tour. Hotspots are small dots or icons, sometimes animated, indicating that users should click on the hotspot to learn more about the feature being highlighted. They can also be combined with other patterns—it's common to see apps employing a combination of hotspots and and tooltips.
Since users must click on a hotspot to activate each step in a product tour, users can ignore the information if it isn't needed. Their small size and subtlety make hotspots perfect for lightweight onboarding experiences or for when you want users to explore an interface on their own.
New users of project management tool Asana, for example, see a hotspot on their dashboard highlighting the “Add New” button. Clicking the button opens the New Item menu along with a tooltip explaining how they can create a new project.
You can read more about using Appcues to create a hotspot-based product tour here, or read more about combining hotspots with other onboarding UI patterns to create a more effective product tour.
Now let's look at some of these UI patterns in action.
We’ve studied hundreds of SaaS user onboarding experiences and come across some great examples of product tours and walkthroughs (along with plenty of terrible ones!) in the process. Here are a few of the best examples of product tours and walkthroughs we've encountered—hopefully these will inspire some ideas for designing your own.
There are thousands of free, paid, and open-source tools you could use to help put together your own product tour or walkthrough. We've put together a few lists showing just some of the many tools you can use:
It's great to have options—but the reality is that, for most SaaS companies, building your own product tour from scratch simply isn't cost-effective, especially when you factor in the costs of maintenance and iteration. Instead, using a tool like Appcues to build your product tours is usually faster, easier, and cheaper in the long run. Don’t believe us? The User Onboarding Cost Calculator can help you do the math.
Whether you build it in-house or design it with a third-party tool, you should be prepared to iterate on your product tours regularly. Experiment to uncover the combination of UI patterns, copy, visuals, and steps that resonates with your users and helps them to realize your product’s core value.
Let us know on Twitter if there are any pointers we missed, or if you have learnings from your own experiences with product tours (good or bad!) to share. We’d love to hear from you.
