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.