Virtual product tours are one of the best ways to highlight the value that your products can offer your prospective users. They're ideal for showing users around your UI, introducing new features, and helping existing users get to those crucial “Aha!” moments.
However, product tours can also be a major source of frustration if handled poorly.
As with virtually every aspect of product development, there's no “right” layout or UI pattern when it comes to product tours; every product is different as are the needs of your users. That said, there are several UI layouts that lend themselves particularly well to product tours, and in this post, we'll be taking a look at some of them.
Before you can make an informed decision about which layout is best for your users, you'll need to think carefully about what your users are trying to do and the problems they're trying to solve.
Designing Product Tours for End Users
One of the most effective ways of avoiding common product tour pitfalls is to design your tour with the end user in mind. The idea isn't just to anticipate users' needs from a feature development perspective but to empathize with their problems, needs, and preferences.
Although it's pretty difficult to be truly objective about your product and its UI, there are several elements you should consider:
- How broad is your product's range of functionality? Is your product largely singular in its focus, like PayPal or Uber, or does it offer a wide range of tools and features, like Salesforce or Airtable? The greater the range of features offered by your product, the more targeted your guided user flows and product tours should be.
- Is your UI unique? As UI and UX professionals, it's our job to create innovative, intuitive interfaces for our users. Is your UI truly unique, or does it borrow familiar elements from similar products? It's worth bearing in mind that higher degrees of uniqueness don't necessarily translate to lower ease of use. When users first log into your product, is it immediately obvious what they should do?
- What are your users' primary motivations? By the time a user takes your product tour, how motivated are your users likely to be? This aspect of product development is often dependent upon other factors beyond the product itself, such as the messaging and positioning of your marketing.
- How savvy are your users? While it's important to design your products and interfaces with specific user personas in mind, is your product accessible to a range of users? Does successfully navigating or using your product rely on a minimum threshold of technological knowledge or experience?
"One of the most effective ways of avoiding common product tour pitfalls is to design your tour with the end user in mind. The idea isn't just to anticipate users' needs from a feature development perspective but to empathize with their problems, needs, and preferences."
How to Choose the Right UI Pattern for Your Product Tour
Once you've comprehensively evaluated the needs of your users, you can figure out how much guidance you should provide in your product tour. However, this isn't the sole consideration you should bear in mind; you should also think about how much to ask of your users. Your users' attention is limited, so it's vital not to ask too much of your users even when trying to highlight the value of your product.
Here are several examples of popular UI patterns utilized in many virtual product tours listed in order of the most attention-grabbing to the least.
The Personal Trainer
Tooltips are among the most versatile tools at your disposal, and they're particularly well-suited to product tours. This is because tooltips are usually action-driven, which makes them ideal for guiding users through multi-stage processes.
Google's online advertising platform AdWords utilizes sequential tooltips to great effect. Although AdWords is relatively simple to use (considering the potential complexity of pay-per-click advertising), its UI can be very intimidating to newcomers, which makes Google's tooltip-driven tour of AdWords' UI so compelling. Google uses hand-drawn-style arrows to highlight key parts of the UI, which makes the tour even more accessible:
This example also highlights the importance of choosing which features to highlight in your tours. Sure, you could draw your users' attention to less-than-critical product features but doing so risks overwhelming or confusing your users, which can result in them abandoning the tour before they've finished.
The Teaching Assistant
While tooltips are commonly used to draw users' attention to action-driven functions, they can also be used to point out tools and features that don't require users to do anything. This approach can be highly effective when introducing optional functionality or for emphasizing non-sequential workflows.
Non-sequential tooltips are also ideal for highlighting features that aren't essential to a product's use but could also help users drive engagement. Video hosting platform Wistia does this masterfully in its tour, which utilizes non-sequential tooltips to point out optional features that can result in a better experience, such as completing a user's profile:
One of tooltips' greatest strengths is that they can (and should) be tailored to specific users based on predefined conditions, such as the length of time between a user signing up and actually using a product or whether a user has accessed a specific feature.
If you choose to include tooltips in your product tour experience, be sure that they look and feel seamless to the wider experience and UI of your product.
The Welcoming Committee
Another common design convention in product tours is modal windows—floating windows that appear “on top” of a product's UI without being interruptive.
Modal windows are perfect for providing users with a brief, high-level overview of a feature or process without forcing them to explore that process.
Crowdfunding platform IndieGoGo leverages modal windows in its tours, relying on them to quickly introduce feature overviews without bogging users down with a step-by-step demonstration of how these features work. In the screenshot below, for example, you can see how IndieGoGo relies on modal windows to introduce users to its Campaign Tagging feature using a brief animated GIF to show users how the feature works:
Google is also known for its use of modal windows across its ever-increasing range of tools and products. In the example below, Google uses a modal window to quickly highlight new features in its Calendar product:
Google could have used tooltips to show off Calendar's new features, but this might have been too much for this stage of the overall experience; Google understands that, as potentially useful as these features are, asking users to complete a sample action probably isn't the best approach in this situation. In this context, a brief modal window is perfectly sufficient for demonstrating the new feature quickly and non-interruptively.
The Friendly Reminder
Sometimes, users need a gentle nudge to get the most out of a product. Although tooltips can achieve the desired result, oftentimes a more direct—yet strategic—approach is required.
This is where hotspots come into play.
Hotspots are small icons that users have to click in order to engage with the features they highlight. Hotspots are commonly small circular icons that can be overlaid on top of certain UI elements to draw the user's attention to them. What makes hotspots so versatile is that they're inconspicuous and need to be actively engaged with, making them remarkably non-intrusive. Users who want to learn more about a feature can do so, whereas users who aren't interested in a particular feature can largely ignore them.
Task management software Asana utilizes hotspots to highlight new features, as in the example below. Users can click on a hotspot to expand a guided navigational element showing them how to access a new feature—in this case, how to add a project to a team-based view of tasks to be completed:
Google also relies on hotspots across many of its properties, including Google Flights. In the screenshot below, you can see how Google brings the user's attention to its price-tracking functionality that travelers can use to keep track of changes in their airfare for a planned trip:
One of the biggest advantages of hotspots is that they can be easily configured to appear every single time a user accesses a page or feature or just the first time. In Asana's case, the hotspot disappears once a user has taken the action highlighted by the hotspot, whereas Google Flight's price tracker includes hotspots for as long as the user has price tracking enabled.
Quantify, Optimize, Repeat
As with almost every other element of UI design, product tours should be constantly tested and iterated upon to ensure they are as intuitive, non-interruptive, and useful as possible. Once you've designed and built your initial product tour, you can begin conducting user research and evaluating your product's analytics to ensure your tour is helping—not frustrating—your users and make improvements based on how your audience is interacting with your product.
It's also worth bearing in mind that you're not limited to using just one of the navigational elements above in your tours. You can mix and match depending on which features you want to highlight; some elements may deserve more attention (and explanation) than others, so don't be afraid to combine the techniques above until you discover what works best for your users and your product.