Saturday, July 14, 2007

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:
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.


Diana said...

Thanks for posting all of this great information, Gena!!! I would really like to learn how to do some on-screen tutorials, and you've given me some great tools and ideas to start with!

Gena said...

No problem - I promise to finish this before my trip. It was just that I couldn't talk about easy Flash Animation without talking about the other stuff.

Compulsive information packrat - CIP disorder.