Product tours (or product walkthroughs) introduce new users to apps by giving them the lay of the land. You can think of them like tutorials—they help users get comfy with your UI while guiding them to the core processes that bring value to your product. Good product tours set users up for long-term engagement and increase the odds of product activation, product adoption, and user retention.
Products without at least a basic set of instructions frustrate users from the get-go. Imagine receiving a brand-new, still-in-the-box vacuum cleaner only to find a smorgasbord of individual components in the box. You know from the image on the box what the vacuum should look like—and you certainly know what it’s going to do when it’s put together. However, without a set of instructions, you’ve got little confidence that you’ll know how to get it functional. What’s more, you can just go buy a vacuum that comes with instructions—or better yet, one that works right out of the box. (One might say the whole situation sucks.)
If you want to keep new users as customers, your product has to work seamlessly from the start —and there’s no better retention mechanism than a stellar product tour.
Why use a product tour?
You should expect the adoption of any new software to come with a bit of a learning curve. A product tour helps users navigate this friction while promptly revealing an app’s important value-laden features. Good tours walk a tightrope between annoying users with over-engagement and frustrating users with under-assistance.
Product tours do a lot of good for new customers who are learning how to use your SaaS product for the first time. They:
- 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 users to take critical actions within your product.
- Guide users toward their aha moment. An aha moment is when users first realize the value that your product provides. Users who stumble upon their aha moment understand how your product improves their work (or life). This isn't always something they'll discover on their own—but a product tour makes that discovery process a heck ton easier.
- Can be simple to build and experiment with. Tools like Appcues allow you to create or amend a product tour without making software changes within your app. This makes experimenting with your onboarding process a breeze and quickly uncovers what resonates with your users.
Tips for building successful product tours
Every product has different features and every user has different needs—that’s why effective product tours look different for every app. That being said, here are four best practices for designing a great product tour that moves users through your flywheel and onto the next stage in their journey.
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 the core value
Explaining every little feature will only lead to frustrated and annoyed users. Make sure you're only highlighting necessary features users need to experience your product's core value to keep them truckin' along to their aha moment. (You can always introduce additional features 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 too long. Unnecessary steps add unnecessary friction to the onboarding process. Less is more—and three to five steps are 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? Users can’t take the next step without first knowing where to start, so show them!
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.
Below, we’ll go through the 3 most popular UI patterns for building product tours, and explain how to use each one.
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 onboarding flow design patterns; using patterns like tooltips, hotspots, and modal windows engage users 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 basic tips. You should also think about your users' motivation. 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 are the three most popular UI patterns for building product tours:
Tooltips
Tooltips point out specific features or elements within a SaaS product. These small overlay boxes are the most common product tour UI pattern you'll come across in the wild, and for good reason. They offer a highly contextual way to guide users through your app without being overly prescriptive (unless the occasion calls for it).
Tooltips come in two varieties: action-driven or non-action-driven. Action-driven tooltips force users to perform a requested task before moving on to the next tooltip. Non-action-driven tooltips guide users without requiring them to—you guessed it—perform a specific action. Tooltips are endlessly handy. Use them to target specific users, or zero in on a cohort of users who haven't logged into your product for a while to determine you're providing them with the right guidance.
Employee management system Humanity, for example, uses action-driven tooltips to sequentially guide users through key actions that help them achieve value faster.
Modal windows
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 gives you prime real estate to include more details than you can in most tooltips, which makes them perfect for extra elements like images or videos.
Indiegogo built an Appcues modal to announce a new feature. It included an illustration of a tooltip calling out the new feature instead of walking users through the product with an actual tooltip. This clever illustration demonstrates where users can expect to find a new feature.
Hotspots
Hotspots consist of small dots and icons that draw attention to the feature being highlighted. The hotspot then displays information about said feature once the user selects it. Since users must click on a hotspot to activate each step in a product tour, they can ignore it if they don’t require more information. 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, will find a hotspot on their dashboard highlighting the “Add New” button. Clicking this button opens the New Item menu along with a tooltip explaining how they can create a new project.
3 amazing product tour examples
There’s no better way to level up your product tour game than looking at great examples in action. Here are several of the best IRL product tours and walkthroughs that set the bar for what a product tour should achieve.
Mint
Personal finance management app Mint built its product tour to guide users through a lengthy setup process that involves everyone’s favorite task: typing in sensitive personal information. Mint uses tooltips to make what would otherwise be a thorny starting process a cinch.
After entering their email address, Mint asks users to add all of their bank accounts. Mint knows that most people don’t enjoy tracking down all of their financial information and giving it to a private company, so they include a reassuring sidebar on the right side of the screen to build trust with users. The sidebar includes a checklist of the steps required to get started, while including blurbs highlighting its dedication to security and the trust of its millions of clients.
After that, Mint liberally uses tooltips to point out the most important features within the app. The tooltips employ bold colors to contrast against the rest of the UI. It also includes CTAs and options for more information for users who want to engage with the feature immediately. For everyone else, the “Next Tip” button stands out brightly against the dark gray tooltip.
Mint’s tooltips also employ the use of gentle animations to further draw attention to its onboarding tips.
Zenefits
HR platform Zenefits uses a combination of modal windows and tooltips to acquaint users with its app. Its product tour funnels users to a demo version of its platform that allows them to learn about and engage with important features before venturing off on their own.
First, Zenefits uses modal windows for users to input the information required to get started.
Another modal window then informs the user that they’ll be working inside a demo version of the software. It also uses this as an opportunity to have users review its Terms and Privacy policy.
.png)
From here, Zenefits guides users from function to function with the use of tooltips. The tooltips point directly to the features mentioned in the copy. The product walkthrough thoughtfully includes a “Back” button within each tooltip in the event a user accidentally hits the “Next” button.
Zenefits also grays out the area behind the tooltip and feature to emphasize the feature’s location within the UI.
Zuora
Product tours should stay short to retain users’ attention, but sometimes complex products require more guidance. Enterprise software company Zuora bills itself as an “all-in-one” solution. It offers a full stack of subscription management tools to stand out from competitors. Users must understand how to work every tool in its stack to see the full benefit of the product. This means its product tour runs long by most standards.
Zuora solves this problem through the smart use of modal windows. Early in the product tour, new users select whether their interest in the app concerns “Product & Growth” or “Finance & Accounting.” This allows Zuora to immediately introduce users to the features that brought them to the product in the first place.
Zuora uses tooltips as the framework for most of its product tour. Too many tooltips will disengage readers and can lead to customers clicking “Next” without reading anything. Zuora throws in a few action-driven tooltips to prevent this from happening:
It wraps up its lengthy product tour with a modal window congratulating the user. This final modal contains a video that allows curious users to find more helpful information on how to use the product to get results. Users who’ve seen enough can click the “Done” button in the bottom right corner.
3 tools for building product tours
There are plenty of free, paid, and open-source tools to build modal windows, tooltips, and more for your product tour or walkthrough. It's great to have options, but the reality for most SaaS companies is that building your own product tour from scratch isn't cost-effective. This rings especially true once you factor in the costs of maintenance and iteration. Instead, consider using dedicated tour-building software to build your product tours. Such platforms are usually more efficient, easier to use, and less expensive in the long run than their alternatives.There are many platforms out there that can help you build a user-friendly product tour, including:
Appcues
Appcues has accrued nearly a decade of experience in the product tour space. Companies like Amplitude, Heap, and Hotjar use Appcues to enhance their UX and delight their users. Its easy-to-use tour builder allows you to create pleasing walkthroughs without getting bogged down in coding. Tooltips, slideouts, hot tips, and modal windows can all be constructed in Appcues and implemented across tours and flows. It’s the premier tool for companies looking to enhance their product tours or build their first one from scratch.
Consider Appcues for its:
- Wide array of UI patterns
- Easy installation
- Code-free tracking and powerful analytics
- Many integration options, including Salesforce, Slack, and Mixpanel
- Mobile app support (coming in late 2022)
Pendo
Pendo allows you to create product tours across your website and mobile apps. Its UI pattern toolbox includes banners and lightboxes to add flavor to your walkthroughs. Its analytics functionality is powerful and works well for product managers whose interest in analytics capabilities exceeds their need to improve the user experience.
Userpilot
Userpilot is another popular option for product tours. You can build tooltips, checklists, and more using its no-code builder. Userpilot backs its tour-building features with analytics tools to help segment users and test flows for optimized performance, though these features are not as robust as some of its competitors.
Don’t settle for first drafts and single solutions
Remember that no one experience fits every customer’s needs. Customers returning to your product after some time away won’t want to watch a full-fledged product tour again. It’s worth creating different product tours for unique user segments to provide more personalized and pleasing UX.
And one final piece of advice: test your product tours thoroughly. You and your team know your product inside and out, so your experiences with your product are inherently biased. Employ A/B testing, usability tests, and product analytics to create a tour experience that balances between being helpful without being obtrusive.
