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:
Why use a product tour?
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:
Compel users to take specific, meaningful actions in your app Instead of leaving users to figure out your app on their own, product tours influence user behavior by explaining why each step is important and guiding to take critical actions within your product.
Guide users towards their aha moment An aha moment is when users first realize the value that your product provides—in other words, how it’s the moment when they understand how it can improve their work or life. This isn't always something they'll discover on their own. A product tour can help make sure users discover the value of your product as quickly as possible.
Can be simple to build and experiment with Tools like Appcues make it easy to roll out your first product tour—or to iterate on an existing experience—without making software changes within your app. This makes it easy to experiment with your onboarding and quickly find the approach that resonates with your users.
Now that you know why product tours are so important, let's find out how great product tours are put together.
Qualities of a great product tour
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:
Be sequential Don't just show users a random collection of tooltips without any clear structure. Each step in your product tour should be clearly defined, and each step should move users further down the path to activation.
Focus on core value Explaining every little feature will only lead to frustrated and annoyed users. Make sure you're only highlighting the features necessary for users to experience your product's core value to keep them moving towards their aha moment. Additional features can be introduced later.
Keep things short and sweet New users are keen to get started using your app. Respect their time by making sure your tour isn't overlong. Unnecessary steps only add friction to the onboarding process and should be removed. Less is more—3 to 5 steps is usually plenty for an onboarding flow.
Provide clear next steps The best product tours clearly explain the next step a user should take. How do they begin adding their data? Do they need to sign up for a paid subscription first? Don't leave them hanging—make it easy for them to take the next step by answering the all-important question: “Where should I start?”
Next, let's look at some practical tips on how to design an effective product tour for your app.
How to choose the right UI pattern for your product tour
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.
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!
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.
Now let's look at some of these UI patterns in action.
Examples of great product tours
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.
The 5 best walkthrough examples This article brings together 5 great examples of product walkthroughs from popular products. It also includes tips and best practices from each example that you can apply to your own product tours.
The 5 best user onboarding experiences While this article covers more than just product tours, it includes some great examples of new user walkthroughs from companies like Slack and IBM. Be sure to check out IBM’s Cognos Analytics for a great example of consumer-grade UX in an enterprise product.
ReallyGoodUX ReallyGoodUX includes many more examples of great SaaS product tours with more being added every .week. It's worth checking back regularly for new ideas you can implement in your own product tours.
Tools for building product tours
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:
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.
Margaret Kelsey is the Director of Brand & Creative at Appcues. Before Appcues, she built content programs for InVision’s design community for 3.5 years and has roots in painting and PR. She’s a big fan of puns, Blackbird Donuts, and Oxford commas—probably in that order.