25 Jul 2003 | Lance Osborne said...

This just launched recently. In Flash, though.

http://www.richcommerce.com/

25 Jul 2003 | fajalar said...

I'm not saying it's great, I'm not saying it's bad, just an example of HTML product/site tour:

State Farm Bank Tour

25 Jul 2003 | suppafly said...

That state farm one is messed up.. it must make some bad assumptions about screen size.. everytime you click next it resizes the browser window to be smaller than needed to see the whole screen that they are displaying so you have to resize to get to the next button.

25 Jul 2003 | hurley #1 said...

The CityDesk tour appeals to me in that it's all on one page so you can see the flow all at once, rather than the typical site tour approach of taking you through a series of pages. Granted this "tour" is pretty simplistic, but that's appropriate since they're trying to sell you on the simplicity of the product (which I've never used so can't vouch for).

25 Jul 2003 | fajalar said...

The link I put was only to view content. I didn't realize there was a window formatting issue.

To see it properly, go to statefarm.com and click on the "Take our guided tour" link under the State Farm Bank heading in the middle of the page.

25 Jul 2003 | Darrel said...

Ugh. Morons. I use a dual monitor set up so every click puts the damned window split down the center of my two screens.

DON'T FUCK WITH MY BROWSER!

Sorry. Had to rant.

25 Jul 2003 | Tim said...

This is flash, but it's really good (Todd Dominey's work):

The Washington Post, Electronic Edition (click Take the Tour)

25 Jul 2003 | fajalar said...

My guess is that the user profile for statefarm.com doesn't include people who use 2 monitors. ;)

25 Jul 2003 | AJB said...

I think www.gateway.com has excellent product tours:

http://www.gateway.com/products/tours/prf4_sb_prodtour.shtml

Flash, not HTML, but still, very very effective.

AJB

25 Jul 2003 | Darrel said...

My guess is that the user profile for statefarm.com doesn't include people who use 2 monitors. ;)

Which simply shows the whole problem of defining user profiles too strictly.

25 Jul 2003 | hurley #1 said...

This is flash, but it's really good (Todd Dominey's work)

Maybe I'm missing something, but this Washington Post Electronic Edition tour seems totally unnecessary. Why do you need a tour to explain something as straightforward as an online version of a newspaper? The tour itself doesn't tell you anything that couldn't be said in a sentence or two on the home page, and the Flash animation doesn't add any value. A more useful tour would have shown the things that you get in the online version that aren't available in the print version or the standard online version (the one that's really designed for the Web).

I think a product tour should show you features and/or the steps you need to take to create whatever it is the product will help you create (as in the CityDesk example). A guided tour is great when you want to force the user to see certain features or if you have a stepwise process to illustrate. An unguided tour (like the Gateway one) would be more appropriate for products like computers and cars where you want to look at it from all angles, "kick the tires" and see what's under the hood.

25 Jul 2003 | paul said...

to toot my own horn, the sporg tour i did a year or two ago isn't half-bad for html tours.

25 Jul 2003 | Brian said...

hey, he said HTML based, NOT flash-based. help a brother out!

25 Jul 2003 | nathan said...

Tours are typically dreamed up by presentation happy execs or marketing people. Flash and HTML tours I've built usually end up being presentations for the suits rather than tours for actual internet users, and our traffic reports confirm this.

Tours are only appropriate for secure web applications where you need to get the gist across ("This is how your online banking statment will look"), or for client apps that the user has to download and install before evaluating.

Another problem with tours? Screenshots, especially tiny blurry screenshots. You want people to understand the app before they commit to it? Why not use the 37Better-style static HTML mockups?

25 Jul 2003 | IMR said...

Here are a few b-to-b companies that are using product/site tours. Most are flash (sorry).

www.myitx.com
Turn down the sound and check out the "interactive demo"

www.colorforce.com
Click "view the 8050"

www.zoll.com
Have a look at the 'Virtual Trade Show"

www.paychex.com
Look for "product tour" on the home page

www. microflex.com
Take a tour of the company's laboratory

Hope this helps.

25 Jul 2003 | Jeff said...

iExtend Print on Demand System
http://www.iextend.com

25 Jul 2003 | Chad Brandt said...

Try the MailFrontier Matador tour. The site itself is image heavy, but the tour has a nice balance of semi-legible screenshots and text. The icons in the subnav are a nice touch.

26 Jul 2003 | Andy Edmonds said...

Uzilla LLC uses cross-browser DHTML to stack screenshots and show a changing description as the user mouses over the corners.

I've been using the technique since 1998/IE4/innerHTML and like it a lot. The initial affordance is a bit tricky, but people seem to appreciate it. Feedback very welcome.

The link is to the initial gateway page as the product walkthrough is separated into three screens.

27 Jul 2003 | Philip Fierlinger said...

It's a shame you received so many responses that specifically ignored your request for HTML only tours.

I'm always interested in HTML based product tours/demos. It's a great exercise in minimalist, tactical communication.

Here are links to some well done HTML tours/demos...

Ofoto - I've always considered this an excellent product presentation.

Yahoo Search - this seems extremely well presented and well thought out (as you expect from Yahoo).

A different, older Yahoo tour - interesting to compare the 2 different Yahoo tours.

27 Jul 2003 | Wilson said...

this is ancient, and pretty traditional, but hey it's HTML.

http://www.guidewireresource.com/

(click on the system tour graphic on the right bar)

27 Jul 2003 | Shane said...

I found PayTrust's (formerly PayMyBills.com) new feature tour to be well structured...


PayTrust Feature Tour

27 Jul 2003 | Philip Fierlinger said...

It's a shame my links didn't survive...

Ofoto - I've always considered this an excellent product presentation.

Yahoo Search - this seems extremely well presented and well thought out (as you expect from Yahoo).

A different, older Yahoo tour - interesting to compare the 2 different Yahoo tours.

28 Jul 2003 | ek said...

Great link Philip, I think all of those sites provide great examples.

I really like the way that the Ofoto tour allows you to simulate some of the functionality of the site without leaving the tour flow.

And I think the new Yahoo! Search tour is very well done, though perhaps a bit too text heavy.

The one thing I would change about both Yahoo! Tours is the "Next/Continue" link placement. In both the newer and older the position of that link is variable, so you need to mouse around for it. Of course it's no huge ordeal to move your mouse around, but it's, in my opinion, a wholly unnecessary annoyance and adds one more thing to have to think about.

In the Ofoto tour, on the other hand, the "next" link location is fixed, which makes it just that much easier to leaf through. Ofoto also manages to keep the entire tour "above the fold" which is very thoughtful.

28 Jul 2003 | Ben said...

I thought the Creative Commons introduction movie was well told and kept my interest... I don't know where it is, though. It's just a movie that explains copyrights and how Creative Commons fits in to the equation.

28 Jul 2003 | mike said...

i enjoyed the flash-based animation tour on overture.com

30 Jul 2003 | hurley #1 said...

Typepad is using their blog to do a five-day tour of their application. An innovative concept, although it won't work well as an after-the-fact tour because of the way blogs are organized (newer posts on top).

Still, I think blogs have potential as a way to do product tours, building interest in the product at the same time that they build readership of the blog.

01 Aug 2003 | Benvolio said...

i'll toot my own horn too - go to www.fastfoursvip.com and click take tour on the rhs... spent a lot of time on this sucka!

04 Aug 2003 | Menno said...

I once made a DHTML-based tour system for a site that never made it online. Using it one can create a 'toy version' of a site using (small) screenshots and defining hover- and click-areas.

Hover- and click-areas can have explanatory text and a 'focus' image attached to it that appear when the user mousovers. You can jump to a new slide/page/feature by clicking on click-areas (like clicking on a link in a page). An automatically generated TOC shows where you are in the tour (which is non-linear).

It was a pretty cool system and even supported NS4.x (I made it a while ago). The ownership now falls under my new employer but if you're interested you can email me and I'll see what I can do. I'm sure I can put up a demo somewhere.