The Rise of the Tour Page: Best Practices and Examples

2011-02-15  |  Category: Blog  |  View Comments

These days it seems that new services and products are popping up all over the web. Many of them have great websites that include a “Tour” page. These pages exist to give an overview of the product and show off basic features. Like any other page, the best tour pages are simple to understand and engaging to draw users in.

Tour pages come in many forms. In my research I found several ways of naming tour pages. The most common were Tour, Take a Tour and Features, but others exist as well. Tours can also exist in different areas of a website. They can be displayed on their own page, on the homepage or other parts of the site. Regardless of the name or location, a tour page is an important tool for acclimatizing your users and building trust in your product. Let’s take a look at some best practices for designing Tour pages.

Showcasing Features

Strong typographic hierarchy is important on tour pages. Users will likely skim the page quickly to gauge the quality of your product or service.

In the example above from Squarespace they use three buckets with strong headings to explain simply what the service does. Try to draw your visitors attention to three to six key features of your product. Focusing on too many will overwhelm and frustrate users who are looking for a brief overview. Additional features can be listed (see example below) but keep them away from the main points you are trying to get across. As with most areas of design, less is more.

Some sites that showcase complex products use tabs to help simplify the number of features they display. This allows sites like Mint.com (below) to display a larger number of features while keeping a relatively low number key headings on each page.

When it comes to showcasing features, keep it as simple as possible. Visitors aren’t looking for a list of every little thing your product does. They just want to get and idea of what your product does and how easy it is to use. Don’t make it hard for them. Also, make sure your headings explain what problem you’re trying to solve. Figure out what the pain point is that your customers are desperate to have fixed and design your heading accordingly.

Show the #%!?ing product!

It’s amazingly important to show users the product or service you’re are giving them a tour of. It sounds obvious but many sites fail to display adequate screenshots of the thing they are trying to sell. A number of sites I came across either had tiny screenshots or useless snippets of the user interface. Some sites had no images of the product at all, which makes me wonder what they’re hiding.

The example above (Virb) does it right with big, clear screenshots and simple explanations of the interface. Not only are we introduced to the product but we also get a feel for how we interact with it.

Apple always predominantly displays screenshots of their products, like on this tour page for the Mac App Store.

Video

What’s the next big mainstream trend in web design? Many of the pros will tell you it’s video. Video is engaging, it’s as simple as that. You want your tour page to as engaging as possible.

As with your page headings, the points in your video should be clear and concise. Also, keep your video short, a minute or less is possible.

Call to action

A call to action is essential for any tour page. The number of tour pages I’ve visited without calls to action is shocking. After you’ve enticed a user with your amazing tour page it’s time to lead them to the next step.

Your call to action can prompt visitors to sign up for a full paid service, a free service, or a limited trial.

Examples

Mac App Store

Basecamp

Virb

Box.net

Campaign Monitor

Huddle

Kaleidoscope

Launchlist

Mint

Pulse

Squarespace

Things

Upload Robots

Conclusion

There you have it: Best practices and examples for designing compelling, simple Tour Pages. Please let me know of other great examples to add to the list. Any other comments are also welcome!

We should hang out together on Twitter!