Effective Tour Pages: Trends and Showcase

I was recently working on the tour page for Vandelay Premier and doing some research on other tour pages to gather inspiration. I decided to put this post together because it is a topic that can have a great deal of impact on the success of a web app or web business.

Looking at the analytics data shortly after launching Vandelay Premier it was obvious that the tour page will have an incredibly significant impact on the success of the site. When visitors arrive at a site that they are not familiar with the tour page is very inviting since it promises to help them get acquainted with the site very quickly. Many sites and apps place a link or a button for the tour in a very prominent location, so it provides a very valuable opportunity to sell.

By looking at the trends and examples of well-designed tour pages you can pick up some ideas for use in your own work. Here we will cover some of the most common trends of tour pages and we’ll include a showcase of pages for your own inspiration.

Trends of Tour Pages:

1. Lists of Features and/or Benefits

The most important job of a tour page is to show a visitor why they should care about the site or product, and what it can do for them. Effective tour pages break down the main features, benefits, or selling points in a way that shows visitors how useful it can be to them. The screenshot below shows how Basecamp quickly lists the benefits, and visitors can click on any of them for more information.

2. Numbered Items (Lists)

Lists are useful for making the key points on a tour page easy to read and scan. The purpose of the page is to quickly communicate the main points to visitors, and lists are great for accomplishing this. Wufoo uses a list to display the key features, and visitors can click on an item for more information.

3. Video

Video is also very common for tour pages and can be great for actually showing visitors how an app or a product works. Videos can also do an effective job of helping to connect with the visitor. Business Catalyst includes a number of videos on its tour page to show different features and so visitors can see the system in action.

4. Screenshots

When video is not being used it can still be helpful to give visitors a visual tour by showing screenshots of the product or app. This is especially common with web apps because it helps to show the visitor exactly they will be using. Ballpark includes multiple large screenshots of the user interface to demonstrate what it can do.

5. Less is More

One of the tricky parts of creating a tour page is including all of the most important information without going too far and overwhelming the visitor. You want to give them enough information to show why they should be interested in the product or app, but providing too much information will probably cause them to leave the site without taking the time to go through it all. Project Bubble does a nice job of getting to the point quickly and wasting nothing.

6. Sign Up Buttons and Calls to Action

The purpose of the tour page is to lead the visitor to take action. That action may be to sign up for a free trial or to make a purchase. Since this is of critical importance it makes sense that it should be clear to visitors what action they should take and it should be as easy as possible. Most tour pages will have sign up buttons, or some other call to action, on the tour page. It may be at the top of the page, sidebar, or below the relevant information provided through the tour. MediaLoot uses a button at the top of the page and a link at the bottom.

7. Unique Template or Design

Tour pages rarely use a sitewide template that is used on other pages throughout the site. In many cases they will have the common header and footer just like every other page, but the sidebar is frequently eliminated or changed to included items specific to the tour. This allows the page to focus strictly on one purpose without other distractions for the visitor. Campaign Monitor‘s feature tour page contains a small sidebar with links to some of the specific features, so visitors who are interested can take the tour in a certain direction.

8. Links to Pricing and Plans

Most web apps offer a few different plans for customers to choose from. Tour pages also often include prominent links to a page where visitors can see the various options that are offered. The top of Bidsketch‘s tour page includes a button that leads to the pricing page.

Showcase of Tour Pages:

The Invoice Machine

Backpack

ProtoShare

Basecamp

Wufoo

Notable

LightCMS

Shopify

Gist

Bidsketch

activeCollab

Dialogix

Ronin

FreshBooks

Pulse

Huddle

Squarespace

For more design inspiration please see:

• 25 Flash Portfolios for Your Inspiration
• 27 of the Best Real Estate Websites
• 25 Impressive Design Portfolios
• 35 Excellent Ecommerce User Interface Designs
• 25 of the Best Websites of Bands and Musicians

Published August 23rd, 2010 by Steven Snell