Tour Design pattern

Problem summary

The user need to learn about an offered service or product or make the decision to join a service or buy a product.

Example

www.yola.com Yola.com has a great way of explaining its features. When you hover an explanation, the corresponding number on a screenshot is highlighted!

Usage

  • Use to give users an insight into what a product is about before they decide on spending time or buying the full product.
  • Use to help sell your product.
  • Use to allow users to make an “informed” purchase decision.
  • Use to instruct users in how to solve common tasks.
  • Use to teach users about your product and what it can do.
  • Use to teach users about uncommon features.
  • Use to teach users about non-website related issues.

Solution

A tour explains a product or service in terms of features, benefits, and in general what the product or service allows you to do. It is most often split into more than one section, which is sometimes put on separate pages.

A product tour is a marketing tool. This is especially seen at more established companies websites, who use the tour to sell their product more than to teach users about their product. Selling and compelling copy that appeal to users’ emotions is especially seen here.

On the opposite, a tour for some companies means a list of screenshots that are accompanied with a few elaborating captions.

A good mix of the two are video tours: a combination of screencasts and, marketing talk, and teaching.

With this in mind, here’s a few principles to keep in mind when developing a tour.

Focus on users’ tasks

Whether the tour is strictly a marketing tool or a tool to teach, a focus on the users’ tasks is important. How can you help them? Aim for a good balance between only describing essentials and explaining everything. Only describing essentials might not give users an elaborate enough view of your product to aid their decision to engage with your product. If you are too elaborate you might on the other hand scare then away.

Resist the urge to show off the latest and greatest features – the most important thing is to convince your users that your product will help them with their fundamental problems. New users aren’t interested in your bells and whistles; they just want to accomplish their goals1.

Provide visual references

Don’t just write about your product and its features. Show it! Include screenshots, illustrations, and even video clips of how to use your product.

This will allow your users to get a better feeling of where exactly to click – but also how easy your product actually is – how it was meant to work and be used.

Include direct links

As users use tours to learn about your product or service, they will go back and forth between the tour and the product. The tour is their reference point, so make it easy for them to go back and forth between the two. Provide direct links, if possible, to the sections you explain.

Address issues or concerns up front

Address the top concerns your users might have when they are trying to decide whether or not to use your product or not. “Is it safe”, “Can I import my data easily?”, “Can I export my data if I decide to move?”. Put any concerns to rest so that your users can start using your product or service with confidence.

Rationale

A tour of your product or service help your users get a feeling of:

  • What your product can do
  • If your product is what they’ve been looking for
  • If your product will help users accomplish their tasks
  • Whether or not they should join your service or pay for your product

Actually joining a service or signing up for a product is costly. It takes time and you have to pay (with your money or by providing your email). A tour allows users to get a glimpse of your product without having to sign up.

Sources

1 Guided tour design pattern at welie.com by Martin van Welie

2 Submit now – Designing persuasive web sites, New Riders, 2003

More example images of the 'Tour' pattern

  • www.facebook.com

    Facebook dims the page's content to let you focus only on one part of the page while implementing the "Steps Left" pattern to set expectations of what is going to be toured (and how long you have left...)

  • Monitor_1294612002673

    The CampaignMonitor feature tour has its sections listed in a sidebar and its features listed in an icon-based list.

  • Basecamp_1294611928931

    The product tour for Basecamp has copy that especially appeals to emotions over facts. It seels more than it teaches.

  • screenshot-checkout

    Clean product tour with all its sections listed in the left sidebar.

1 Comment

Post a comment

Required. Real name or initials only.
Required. Will not be published.
Vote down Vote up
Out of 88 votes, 79.55% like this one.