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:


  1. YAHOO.CH.stepByStepConfig = {
  2.   autostart:true,
  3.   autoplay:false,
  4.   delay:1000,
  5.   panelFade:true,
  6.   fadeSpeed:500,
  7.   nextLabel:'next: ',
  8.   prevLabel:': prev',
  9.   endLabel:'close',
  10.   cancelLabel:'close',
  11.   steps:[
  12.     {
  13.       id:'journey',
  14.       orientation:'tl-bl',
  15.       header:'Your checkout Journey',
  16.       body:'At any time of the process you can...',
  17.       width:'500px',
  18.       time:4000
  19.     },{
  20.       id:'billing',
  21.       orientation:'tl-tr',
  22.       header:'Your billing address',
  23.       body:'Enter your billing address',
  24.       width:'200px',
  25.       time:4000
  26.     }
  27.   ]
  28. };

You can see Step by Step in action via the demo page.

Posted by Rey Bango at 6:48 am

2.9 rating from 10 votes


Comments feed TrackBack URI

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.

Comment by rudy23 — February 19, 2008

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.

Comment by FrenkieB — February 20, 2008

Ok, I get it! Did anyone of you try out the non-automated version?

Comment by Chris Heilmann — February 20, 2008

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.

Comment by FrenkieB — February 21, 2008

Leave a comment

You must be logged in to post a comment.