Creating Tutorials & Demos - Storyboards

A storyboard is a visual outline of what you want to present to your audience. It is a necessary technique if you are giving step by step instructions to your viewers.

There is not one storyboard style that will meet everyone's needs. There are storyboards for commercials, television, movies, game creation and interactive presentations. You name it there is a tutorial for it.

Except I haven't found a perfect storyboard for tutorial creation. The following are some of my ideas about how to go about it.

Reverse Engineering Tutorial/Demonstration Presentations

I've been watching a lot of tutorials and demonstrations. In fact, I'm turning into a tutorial junkie. I looked at the style of the better tutorials that seemed to present the information clearly, repeated what I needed to know and gave a summary of what was covered.

The format that I observed for brief under five minute tutorials:

• Title Card – the topic of the tutorial,
• Goal Card – written and audio information on the viewer what they will learn,
• Step 1 – an orientation image followed by a demonstrate of the action,
• Step 2 – an orientation image followed by a demonstrate of the action,
• Step 3 – an orientation image followed by a demonstrate of the action,
• Add additional steps as necessary, then close with
  
• Summary Card – repeating the essential information of the tutorial,
• End Title Card – Perhaps with your name/school's name and a license note, i.e. Copyright notice & date, Creative Commons license or Public Domain.
  

Analog Storyboards

You don't need anything more than a pencil/pen and a piece of paper. For those of you that are text based you can write out the above steps. The analog storyboard advantage over digital is that it is truly portable, instantly accessible and a crash does not render your storyboard useless.

For those of you that are visually based you can use the beloved 3 x 5 index cards to draw, doodle or sketch your ideas If it is good enough for Hollywood it is good enough for you.

For those that don't draw and want a little more visual cues you can download the following Adobe pdf documents:

• Hal Davidson's Storyboard - http://www.halldavidson.net/Storybd.pdf
• Hal Davidson's Multimedia Planning Sheet http://www.halldavidson.net/plansht.pdf
• College of Micronesia Project Planning Sheet http://www.comfsm.fm/pt3/techhelp/multimedia/planningsheet.pdf

Examples of Demonstrations

Some of the tutorials and demos are for commercial products and services. My intent is to show you the various styles of demonstrations on the Internet, not to advocate for specific products and services.

• Grove Online Art Demonstration
  
• Demo Charge example of CodeCharge Hello World Application
• Blackberry Product Demo Page
• The Vector Cross Product - You must have a Java enabled web browser to interact with the tutorial http://physics.syr.edu/courses/java-suite/crosspro.html
• QEDWiki demonstration by IBM video posted on YouTube