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.

Basecamp""

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.

Wufoo

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.

Business Catalyst

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.

Ballpark

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.

Project Bubble

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.

MediaLoot

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.

Campaign Monitor

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.

Bidsketch

Showcase of Tour Pages:

The Invoice Machine

The Invoice Machine

Backpack

Backpack

ProtoShare

ProtoShare

Basecamp

Basecamp

Wufoo

Wufoo

Notable

Notable

LightCMS

LightCMS

Shopify

Shopify

Gist

Gist

Bidsketch

Bidsketch

activeCollab

activeCollab

Dialogix

Dialogix

Ronin

Ronin

FreshBooks

FreshBooks

Pulse

Pulse

Huddle

Huddle

Squarespace

Squarespace

For more design inspiration please see:

Published August 23rd, 2010 by

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads. Visit WPEngine.

Join Our Newsletter!

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies. We have 20,000+ loyal readers and counting! We’ll even send you a free e-book (Freelance Designer’s Guide to Multiple Income Streams) and a $10 discount on our most popular product the Freelance Starter Kit.

15 Responses

Comments are now closed on this post.

  • Web Design Portfolio, August 23, 2010

    these are some great examples of tour pages. I always like a certain level of user interaction on tour pages.

  • web connect, August 24, 2010

    i think when we make tour pages then we care about use of picture for tour pages to attract visitors…thanks for sharing above designs

  • Stu, August 24, 2010

    Thanks for mentioning us!
    Stu @ Project Bubble.

  • fly, August 24, 2010

    good tour ;)

  • web designer leicester, August 24, 2010

    Some nice examples here, the tour page can be the most important page on a site, as this is what is going to inform and persuade the visitor to sign up or make a purchase. Basecamp is a great example…

  • Andrea at ProtoShare, August 24, 2010

    Thanks for including us in your showcase; it’s an honor!

    Providing a quick overview/tour of an online application is like a 3-minute elevator pitch on the web. It’s hard to explain everything that a website wireframe tool can do, but one must be able to effectively show the key areas and how they help others. Hopefully we did that.

    Cheers!
    andrea @ProtoShare

  • Esteban G., August 24, 2010

    Check out ours at http://www.getdashboard.com/tour/tour.html

  • Yoosuf, August 24, 2010

    i was just wondering why DropBox is not included in this list, https://www.dropbox.com/tour

  • Mostafa Omar, August 25, 2010

    thanks really nice examples. i would like to include flickr new photo display service tour.

  • sgacheru, August 30, 2010

    These are awesome! I especially loved bidsketch. Thanks for sharing!

  • usenet browser, August 31, 2010

    Good examples and advise. I think the potential member should receive a short but, limited access just like a paying member. Show them exactly what your offering.

    thanx

  • Will, August 31, 2010

    These are great. I love design that visually guides the end user in an overt manner. Thanks for the share. :)

  • Salya, August 31, 2010

    Twunch (in french) site tour correspond at your point 5 “less is more” including dynamic data like city tags http://twun.ch/create-twitter-event/

    Thank you for all these examples, i will try to improve my page =)

  • Joan, September 11, 2010

    I do not have the eye to look at someone elses page and make yours work as well as theirs does. I would rather write the content and let someone else make the important designs. I love to read your site because I love the way you put colors and lines togather. I am glad that you are good at what you do.

  • Toronto Web Developer, June 10, 2011

    Nice examples, Thanks!