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 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: annotation, collaboration, example, script, training, walkthrough, YUI
February 18th, 2008 at 4:19 pm
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.
February 18th, 2008 at 7:20 pm
NO NO NO! This would make me leave the site immediately….
February 20th, 2008 at 3:17 pm
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.
February 25th, 2008 at 10:24 pm
Wow, this is great. We did a one-off version of this, but your tool looks even better.
August 28th, 2008 at 7:38 am
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?