Create annotated walk-throughs with Step by Step
Written by on February 19th, 2008 in Ajax News.
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:
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.
Source: Ajaxian
Original Article: http://feeds.feedburner.com/~r/ajaxian/~3/237520081/create-annotated-walk-throughs-with-step-by-step