Product Tours: When to Use Which UI Pattern

Written by: Julia Chen Julia Chen 

Product tours can be powerful tools for orientating your users. They can introduce new users to your UI, help with new product launches, and nudge users closer to an Aha! moment.

Done wrong though, and they’ll start feeling like a backseat driver. And no one likes a backseat driver.

While there’s no "best" UI for all product tours, there are best use cases for popular design patterns. From modal windows to coach marks to action-driven tooltips, various UI patterns can be used effectively to engage users.

The right UI pattern can turn an overbearing product tour into a helpful one. Maybe even a captivating one that fosters an immediate connection.

But before you can start choosing your ideal UI patternyou'll need to evaluate what your product tour is really trying to showcase, and to whom.

Consider Both Your Product and Users

To avoid the pitfall of creating an overbearing product tour, find empathy with your users. Try to adopt the perspective of an outsider, and take an honest inventory of the challenges you might face when learning to use your product.

While it's hard to be totally objective about your product, here are some key things to consider:

  • Range of functionality — Does your product offer one main functionality, like Yik Yak or Venmo, or a wide range of functionalities, like Salesforce or Evernote? The more functionalities you offer, the more you’d probably want to provide targeted onboarding guidance.
  • Uniqueness of user interface — How unique is your product’s UI? Keep in mind that a higher degree of uniqueness does not mean lower ease of use. Some of the most unique interfaces are also the most easy to use, once learned. When users log into your product for the first time, will they immediately get it?
  • User motivation —  How much motivation have you earned from your users at the point of the product tour? This can be based on your ability to market and energize your users.
  • User tech-savviness — Your users may come from a variety of backgrounds and levels of tech-savviness. While the goal is to be as intuitive as possible, it’s worth considering the other tools that your users interact with and evaluating how your product stacks up.

Choose the Right UI Pattern 

Once you’ve evaluated your product and users, you can then determine how much attention you should ask of your users. User attention is a delicate thing, so ask with consideration and handle with care. 

Here are the most popular UI patterns listed in order of most attention-grabbing to the least:

The Showstopper: Coach Marks

Coach marks typically take over a full screen with a gradient and mark it up with pertinent information. Coach marks demand the most attention, but they don’t necessarily have to explain the most complex tasks.

Coach marks are best used in product tours to convey a unique interface or one particularly delightful feature.

Google uses a coach mark to introduce the snooze functionality in Inbox. The functionality isn't hard to use, or Inbox's most valuable service, but it is new and unexpected for long-time Gmail users. 

gmail inbox coachmark

Coach marks are also commonly used in mobile apps to denote easy-to-perform but crucial swipe right/swipe left functionality.

Headspace uses coach marks to teach users a simple swipe left interface. While this action isn’t new to mobile users, the coach marks are helpful in telling users this applies to Headspace too and what lies in the left screens.

Headspace Coach mark

Coach marks capture the user’s full attention, if only for a moment, so you should only include information that you absolutely don’t want the user to miss.

One thing to watch out for is designing your coach marks to look too much like your interface, potentially confusing users. Coach marks should be very obvious and look distinct from the background.

Coach marks shine when they emphasize just a few elements. If you find yourself marking up your screen beyond three elements, consider using tooltips or hotspots instead. 

The Personal Trainer: Action-Driven Tooltips

Tooltips are sequential call out boxes that point to isolated 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 going onto the next tooltip.

Since action-driven tooltips involve heavy hand-holding, they’re good for encouraging users to take necessary actions. Because of this, they are often used on forms. 

ebay tooltip

When used in product tours, they create an interactive experience that can be very engaging. Google AdWords uses action-driven tooltips to guide users through specific key actions. Adwords Tooltips

Adwords Tooltips2

This approach make sense for AdWords, a fairly complex product for newbies. Google’s illustration of a hand-drawn arrow lightens the heavy-handedness of action-driven tooltips; they make the product tour seem more casual, as if the user is learning an insider tip.

If you include less-than-necessary steps in action-driven tooltips, you risk the chance of users hitting friction and exiting mid-product tour.

The Teaching Assistant: Tooltips

Many product tours use tooltips that are not action-driven, meaning users can still follow them in sequence without performing an action. 

Since action-driven tooltips require effort, tooltips are better for conveying information that is helpful to know but does not have to be acted on in the moment. 

ProdPad uses sequential tooltips for product tours. The tooltips contain helpful information meant to guide users towards success, but users don't have to stop and perform all the necessary steps to get value.

prodpad onboarding ideas page

ProdPad used Appcues to build this product tour (and decreased trial-to-paid period by 80%!)

Wistia uses tooltips to highlight areas users might have missed and encourage them to take action. This is another great use case for tooltips because filling out an intro is not necessary to benefit from Wistia, but does probably help with user engagement.  

Wistia tooltip

Built with Appcues

Tooltips can reduce support burden and scale up usability. Like other UI patterns, they can also be targeted to specific users, such as new users or users who haven't logged into your product in x days, so you can be sure that you're providing the right guidance to the right audience.

When designing tooltips, it's important to make them look and feel seamless to your product experience. They should be stylized to look native to your interface.

The Welcome Committee: Modal Windows

Modal windows sit on top of a product’s UI, interacting with users without disrupting their flow. Modal windows can be used in product tours to provide a high-level overview. Modals are great for adding visuals when walking your users every step of the way isn’t necessary.

Indiegogo creatively uses a 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 what’s new. It’s an interesting illustration that demonstrates where users can expect to find a new feature.

Indiegogo Modals

Built with Appcues

Google Calendar uses a modal to give a summary of what’s new.

google cal modal

Google often uses tooltips, but in this case, the update to Google Calendar may not require a more intensive walk through. Though it would have been pretty cool if Google showed this new feature in play and pointed to a calendar event added from the user’s Gmail—talk about Aha!

Modals are very flexible tools. They can come in all different sizes and be configured as pop-up windows or full-screen takeovers. They can also be multi-step or be a single window.

The Friendly Reminder: Hotspots

Hotspots are small icons, often in the form of circles, that indicate more information behind certain elements. They are similar to tooltips, but users have to click into them to engage.

Since hotspots require users to actively opt in, they are the least invasive UI pattern for product tours. Users who need them will have the information, but users who don’t can easily ignore them.

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.

New users of Asana see an eyedrop-shaped hotspot in their dashboard next to the plus symbol.

asana_product_tour.png

asana product tour2Google Flights uses a hotspot to remind users of tracked prices (via a nav bar) that they had previously set up. 

google flights hotspotgoogle flights hotspot nav

Hotspots can be configured to show up just once or every time a user visits the page. In Asana’s use case, the hotspot disappears after users perform the intended action. With Google Flights, the hotspot remains on the nav bar as long as the user has tracked prices. Both use cases work for the respective purposes.

One thing to consider with hotspots is how obvious you want to make them. While Asana’s hotspot is pretty, its color and unique shape make it subtle. Making hotspots pulse or styling them to look like question marks can make them stand out on a page.

Measure, Experiment, and Improve

Once you’ve implemented your first product tour, you can use analytics to track and measure what works. Amplitude and Mixpanel are popular tools for diving into user data.

You can also mix and match different UI patterns to get the right point across. Continually improve your understand of your users, and fine tune what you show them

Iteration can be really difficult when you’re hand coding product tours with open source plug-ins. At Appcues, we offer a powerful product solution for non-technical users to create, publish, and iterate on product tours. Check out our homepage to learn more.

user onboarding academy

The User Onboarding Academy

Everything you need to know about user onboarding in 7 weekly emails.

Recommended reading