Tuesday, February 19th, 2008
Create annotated walk-throughs with Step by Step
Category: Yahoo!
Finding ways to help your users leverage your application's full potential can be a challenge and UX experts rack their brains daily trying to figure out new ways of improving this experience. One useful technique is the use of annotated walk-throughs which help guide users via detailed textual indicators (eg: popups). Chris Heilmann has created Step by Step which uses JavaScript to create these guided experiences:
Step by Step is a JavaScript solution based on the YUI that allows you to script an annotated walk-through of your web applications that happens directly on the application and does not require any video editing skills or large downloads.
Some use cases for Step by Step include:
- Contextual help for web applications
- Making new features of web sites more obvious
Developed using the Yahoo User Interface library, Step by Step makes it simple to write out your script by creating a JSON object that outlines the steps:
-
-
YAHOO.CH.stepByStepConfig = {
-
autostart:true,
-
autoplay:false,
-
delay:1000,
-
panelFade:true,
-
fadeSpeed:500,
-
nextLabel:'next: ',
-
prevLabel:': prev',
-
endLabel:'close',
-
cancelLabel:'close',
-
steps:[
-
{
-
id:'journey',
-
orientation:'tl-bl',
-
header:'Your checkout Journey',
-
body:'At any time of the process you can...',
-
width:'500px',
-
time:4000
-
},{
-
id:'billing',
-
orientation:'tl-tr',
-
header:'Your billing address',
-
body:'Enter your billing address',
-
width:'200px',
-
time:4000
-
}
-
]
-
};
-
You can see Step by Step in action via the demo page.
Either i didnt get the point of this or this is one annoying as hell feature.
I think I saw this on some yahoo signup page and it does more to frustrate the end user then help alleviate any problems.
I got scared! Things started popping up, unasked page scrolling. I don’t think this is such a good idea. In theory perhaps but not when it’s implemented.
Ok, I get it! Did anyone of you try out the non-automated version?
Yeah I tried the non-automated version. That’s one that might be useful. Then the user expects something to happen instead of unasked events.