Help Your Site Users with a Step By Step Tour

Tagged:  

Have you ever made an incredible web application that you think is very intuitive to users, just to be told by a friend or user that they couldn't figure it out? Often our knowledge of our applications blinds us to the fact that everything may not be as simple to use as we thought.

Because of this common problem Christian Heilmann has written a good solution to the problem called Step by Step. The script displays a sort of tool tip that walks you through a site step by step.

Below is how the script is explained by Chris.

You might have encountered interactive demos created with screencasting and screengrabbing software that explain an interface to users in a step-by-step manner. This is exactly what this script does for web sites.

When you loaded this page and all went well you'll have seen the examples, download and first paragraph section being highlighted and a small panel with information showing up in succession. This is done with this script.

The script uses the Yahoo! User Interface (yet another good example of the library) for the effects, so it does have that dependency.

You can go to the official website here and you can download the code and examples here. To view the examples click here.

If you use this or any other similar script I would love to hear about them. You can leave them in the comments or write a post about them on this blog using your free Ajaxonomy account.

[...] Help Your Site Users with a Step By Step Tour By David Hurth When you loaded this page and all went well you'll have seen the examples, download and first paragraph section being highlighted and a small panel with information showing up in succession. This is done with this script. … Ajaxonomy - The Study of Ajax… - http://www.ajaxonomy.com [...]

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <pre> <div> <blockquote> <object> <embed> <img> <param>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Copy the characters (respecting upper/lower case) from the image.