Step by Step - Show and explain visitors what your page has for them

What is Step by Step?

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.

Dependencies

Step by Step uses the Yahoo User Interface library, and pulls in most of its dependencies automatically. What you need to include into the document though is the YUI loader and the main script:

<script src="http://yui.yahooapis.com/2.4.1/build/yuiloader/yuiloader-beta-min.js"></script>
<script src="stepbystep.js" charset="utf-8"></script>

All you need to do then is to write your Step by Step script. The good news is, it is not that hard to do. The bad news is that you need to understand JSON :)

Writing the show script

So, what you need to do is write a JSON object in the following format and either embed it in a script tag (like it is on this page, check the source) or link to it as an external file (like all the example pages do).

Here's an example and below you find explanations about the different properties:

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
    }
  ]
};

The main configuration properties

The main configuration properties define the behaviour of the step-by-step show. You can either create a show that runs automatically like the one here or one that needs user input to go from step to step. You can determine the timing and the text in the links necessary to allow visitors to navigate from step to step. Furthermore you can create a show that smoothly fades the panels in and out or makes them appear immediately.

autostart

Boolean defining if the show should start automatically or not. If this is set to false, then you need to start the show manually by calling YAHOO.CH.stepByStep.start()

delay

The delay in milliseconds before the show starts (only relevant when autostart is true)

panelFade

Boolean defining that the information panels fade in smoothly from transparent to solid

fadeSpeed

Duration of the fading process in milliseconds

autoplay

Boolean defining if the show should automatically go from step to step

nextLabel

Text of 'next' link (only relevant when autoplay is true)

prevLabel

Text of 'previous' link (only relevant when autoplay is true)

endLabel

text of 'close' link after the last step (only relevant when autoplay is true)

cancelLabel

text of 'cancel' link on the first step (only relevant when autoplay is true)

Properties of each step

The main show is defined in an array called steps with each step being an object. Step by Step goes through each of the array items in order and automatically creates the navigation necessary when the autoplay option is disabled. The different properties for each step are:

id

the ID of the HTML element this step should highlight and annotate. Step by Step will check for the existence of the element and stop the show if it cannot be found. It also reads the location of the element on the screen and positions the panel accordingly. The currently highlighted element gets a CSS class applied to it called current-step. You can use this to style the element accordingly. Step by Step will automatically scroll the window to the element during the show.

orientation

determines the placement of the information panel in relation to the screen. This is a string that separates two values with a dash. The first value is the corner of the panel you want to align with the corner of the element, the second value. Possible values are tr (top right), tl (top left), bl (bottom left) and br (bottom right). So if you want to align the bottom right corner of the panel with the top left corner of the element you'd use br-tl.

header

HTML content of the panel header section

body

HTML content of the panel body section

width

the width of the panel.

time

the duration of the panel being visible in milliseconds

Use cases for Step by Step

• Contextual help for web applications
• Making new features of web sites more obvious

To-Do and future ideas

• Use progressive enhancement to get data
• Nicer skin with arrows pointing to elements
• Overlay instead of style change for current element
• Pause button for automated shows
• Custom event to tie in with the end of the show
• PHP proxy script to inject Step by Step into web existing web sites.

Copyright and use

Step by Step is copyright by Christian Heilmann and released under a Creative Commons 3.0 license. This means you can use and alter the script even for commercial use if you give me credit as the original author. The script is based on the YUI, which is copyright of Yahoo! and released under the BSD license.