Web Site Tours

By Deane Barker on June 6, 2006

Last year, I built a nice little Web site for my church pre-school. Go take a look – it’s really well-done, and has served the school well. (Look hard enough, and you might find my wife in there somewhere...)

However, one of the problems with the site is that new visitors site don’t quite know where to start. Maybe this is their first child or they’re new to the Web. They don’t know what pages they should look at, in what order, and how to know that they’ve looked at everything they should.

So, I want to implement a “tour” system which is kind of like a help system for a Web site, but it’s embedded in the Web site itself. The user can ask the site to display special information about each page, and special navigation along a sequence designed to show them the high points of the site. It would be like having the owner of a Web site sitting over your shoulder pointing things out to you that he or she thinks you should see.


  • Someone can be led through a Web site, from “stop” to “stop,” until they’ve seen everything on the tour. The pages on the tour will be defined by the site owner.

  • Each stop on the tour has some commentary (“this page has information about X, Y, and Z...”)

  • At any time, they can get off the tour, go exploring themselves, then get back on the tour where they got off. While they’re on their own, a little icon or graphic would appear on the page letting them know they’re off the tour, and they can click to get back on.

  • At any time, they can go to a tour page which shows them all the stops on the tour, and which stops they’ve already been to.

  • At any time, they can cancel the tour and go back to just browsing (although they could do this anyway – they just got the little graphic as mentioned above)

To accomplish this, here’s what I think I need to do:


Create a list of pages on the tour, in the order that someone needs to see them. For the preschool site, we may send them to the Mission Statement page, the Philosphy of Education page, etc.

There would be perhaps a dozen pages on the tour, at which point we’re confident the visitor has seen what we want them to see. For each stop, we’d write some commentary about the page and why it’s important to a parent considering the preschool.

(Additionally, you could provide multiple tours for different types of visitors. For instance, the main visitor to the preschool site is parents, but there are also church members who donate and potential teachers looking for information on the school as an employer. You could offer different tours – with different pages, orders, and commentary – to different audiences.)


Create a method to track the pages the visitor has visited already. You could start doing this as soon as they hit the site, so when they start the tour, we know if they’ve seen a bunch of the pages already.


Provide a method to start the tour. There would be a graphic on the home page or something, that advertised a “Guided Tour” through the site. If they click this, they would perhaps be taken to a “Start the tour...” page which told them exactly what we’re doing and the pages to which they’ll be going.

When they actually start the site tour, we need to set some sort of session identifer so every page can know whether that request is from someone on a tour or not.


Check every page request. If the request is from someone on a site tour, we display a informational and navigational element at the top, perhaps with a graphic of some kind, about what page they’re on. There would be next and previous links to the next and previous stops on the tour.

(In a lot of ways, the tour is just a big sequence of pages. However, it’s an option sequence, meaning someone only sees the sequence navigation if they’ve explicitly said, “Okay, I want to go in sequence, so help me navigate that way.”)

There would also be navigation to a “tour status” page.


Provide a “tour status” page, where the user could visit to see all the stops on the tour and which ones he or she had visited already. If they’ve completed the tour, perhaps tell them that and congratulate them or something.

This type of system would work for sites where there’s a lot of information, and users have trouble getting their arms around all of it. For instance, I’m a member of CM Professionals, and their Web site has so much information. I don’t even know where to start. I need someone to walk me through it all.

Now, I can’t be the first person to think of this. Has anyone seen this done someone where else? Has anyone tried to do this themselves?

Comments (6)

Jeremy says:

This doesn’t sound too hard. In my choosen language, C#.Net, I would just use a session cookie to track where you have been before and during the tour. It is easy enough to set a flag as to where your last stop was and whether or not you are currently “on the bus.” A floated DIV could be used to display the tour info as well as the next/prev/list for stops.

Overall, a good idea. My churches website is a clutter of information and something like this would be perfect... can I get a GPL to use this idea :-)

Deane says:

can I get a GPL to use this idea :-)

Uh, sure. For what it’s worth, I hereby place this completely unoriginal idea in the public domain.

Rocky Shoals says:

My $.02 – I’ve never seen an online tour of a website that was worth taking. If your site needs a “tour” feature, I’d suggest that the IA may be too complicated for your audience. However, I looked at the site and it seems about as simple as a site can get. So, in this case the site tour could likely end up being as complex (if not more) than the underlying site.

A tour as you describe sounds like overkill. Anything wrong with putting a banner or link for “Tour” or “Start Here” link to a page with a camtasia/qarbon flash tour of the site? That would probably be a simpler approach for the TV generation, and it could save you a lot of work (for little gain) in your app.

Doug says:

I’m just now embarking on making ‘movies’ of websites for clients. These ‘tours’ of the website are intended to achieve many of the goals you set out here. There are several programs for doing this, notably Camtasia Studio and Adobe Captivate. Probably will require some further massaging in Premiere Elements, etc. These have varying degrees of interactivity and they essentially create self-running movies, as opposed to the ‘user controls’ you’re suggesting here. I haven’t fully read all the stuff you’ve got in your list, but a quick glance tells me what I’m doing on isn’t quite the same thing as that. Yours sounds like a manual transmission.

That said, you could create a series of quick-loading Flash movies which would cover all the bases, and label them accordingly to make an easy time of it for your site visitors. Should be enough to steer people in the right direction and since these are busted into pieces, not an aggravation, bandwidth-wise.

Greg Thomson says:

Take a look at http://www.demofuse.com – It does pretty much exactly what you want.

Andreas says:

Try http://amberjack.org