Step by Step – create feature walkthroughs for your web sites

There is a lot of software out there that allow you to create screencasts by recording what is happening on the screen. Some programs even allow you to annotate each step and tell people what needs to be done. The issue with most of this software is that the outcome are large video files and that users cannot interact with the system while the explanations are given.

Step by Step in action - a highlighted page element with an explanation in a panel

Step by Step is a JavaScript solution based on the YUI that allows you to script an annotated walk-trough of your web applications that happens directly on the application and does not require any video editing skills or large downloads.

What do you think?

Tags: , , , , , ,

5 Responses to “Step by Step – create feature walkthroughs for your web sites”

  1. Arjan Says:

    My first reaction when I opened the ‘automatically’ variant was: irritating. If you are a bit more experienced the appearance of the box is that, so I’d find something better for that. The manual variant is much better.

    The tips are also quite useless for almost everyone with only a bit of experience with computers. I can imagine the way the script controlls the page (eg putting the active field at the top of the screen) can be a surprise for those people who actually might find this a useful addiction.

    A solution to this might be a Find Position script, like this one at Quirksmode.org.

  2. Rob Says:

    NO NO NO! This would make me leave the site immediately….

  3. Thom Shannon Says:

    Its cool, I like it.

    @Rob there’s no reason for it to be mandatory! In a real application there should be a start button. eg. http://icant.co.uk/sandbox/stepbystep/noauto.html

    A nice feature might be an animated scroll, when the page position jumps around you quickly loose track of where you are on the page, if it scrolled to position you’d be able to follow it more easily. Perhaps also an emergency stop, it should probably stop if you click anywhere or hit a key, or just pause with notification and an offer to resume on the current popup.

  4. Dave Bauer Says:

    Wow, this is great. We did a one-off version of this, but your tool looks even better.

  5. Tc Says:

    Nice help system, only one thing, I’m using it in IE and theres a 2-3 second pause from the time that I click on the next link to the next message being shown. I’ve set delay, fadeSpeed and time on each message to 0 but this has not made a difference.

    Any ideas what I’m doing wrong?

Leave a Reply

Wait till I come! is the blog of Christian Heilmann , a developer evangelist living and working in London, England. Download vcard.

Feed me, Seymour: Entries (RSS) and Comments (RSS).