technology tip of the month Using Storyboards in Online Course Design
Virgil E. Varvel Jr.
2004

Example Storyboards

Below I have included two storyboard examples to help demonstrate the uses described in this article. I usually create my storyboards on paper for projects that I complete on my own, so I have had to convert these for Web purposes. I have added comments not present in the storyboard as brackets.

The first example is from a tutorial presented within a shockwave flash document.

Unit: WebCT Tutorial
Lesson: A - Instructions
Frame #: 001 of A [Rather than trying to keep track of all of the flow chart numbers, I simplify by just giving a number in reference to the lesson.]
Date: June 5, 2002
File Name: intro1.swf [Here the filename was very important because there were eventually several hundred filenames in the final production.]
Description: How does the tutorial work [In this storyboard, I gave a description, but I did not continue for the rest of the frames within this lesson in order to save precious time.]
Text Outline: This tutorial is presented in both audio and text. The text transcripts appear at the bottom of the movie window. When there is too much text for it all to fit within the trascript box, scroll arrows will appear to the bottom right. Press these to move through the text. If an arrow is missing, you are either at the top, bottom, or both of the text. [Normally I only put an outline in here, but since I was narrating this entire production, I included my entire text. This also helped to insure that I wasn't trying to say too much per slide.]

Instructions <title-red/bold>

 

 

[blank space]

 

 

[the organization of the following boxes was designed to allow arrows to their respective items not to intersect]

[red box was here with following text.]
Text transcripts will appear in this area.
[arrow to transcript box]

[red box here with following text]
Use these arrows to scroll through
the text transcripts.
[arrow to scroll bars]

[red box here with following text]
Click the arrow to continue
[arrow leading to button 4 which is forward button]

<note to self - Note choice of red. Red for descriptive elements and blue for interactive elements. This will continue throughout presentation.>

 

[Here were 4 nav circles. The following notes were present.]
<grey out 1-3><link 4 - 002> [002 refers to frame number]. Since no specific point within the page is linked, only the number is given.]

Transcript <black on yellow bkgd> [I also drew the scroll bars to the right of this box with a red divide line]

 

Rationale - begin with a description of what it is as well as how to navigate as that is the first action the user will need to take. [no extra notes were needed.]

 

This example is a storyboard for this page. Although I didn't actually use it, it is presented for example and comparison purposes.

Unit: Storyboard
Lesson: F - Examples
Frame #: 001 of F
Date: August 9, 2004
File Name: page6.asp Text Outline:
-Intro
-Sample 1 (multimedia example)
-Sample 2 (this page)
-Nav links

Top of page will follow Pointer template
///pointer graphic//////////
////Home</default.asp> | Index <../default.asp>///////////////////breadcrumbs

Titles

Example Storyboards

Intro////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////// Keep it short

Example I - description

Graphic - 95% wide <center> / keep as short as possible

////////////////////[I would have a graphical drawing here]///////////////////////

////////////////////////////////////////////////////////////////////////////////////////////////////////////

/////////////////////////////////////////////////////////////////////////////////////////////////////////////

/////////////////////////////////////////////////////////////////////////////////////////////////////////////

////////////////////////////////////////////////////////////////////////////////////////////////////////////

////////////////////////////////////////////////////////////////////////////////////////////////////////////

Example 2 - description

Graphic - 95% wide <center> / keep as short as possible

////////////////////[I would have a graphical drawing here]///////////////////////

////////////////////////////////////////////////////////////////////////////////////////////////////////////

/////////////////////////////////////////////////////////////////////////////////////////////////////////////

/////////////////////////////////////////////////////////////////////////////////////////////////////////////

////////////////////////////////////////////////////////////////////////////////////////////////////////////

////////////////////////////////////////////////////////////////////////////////////////////////////////////

[blank space]

Navigation
Keep same scheme as before.
<navtexts css>

Rationale - User will want to see the process in action. Will use text instead of importing graphics to save development time.

arrow image Introduction
arrow image Why Use Storyboards
arrow image Creating Storyboards
arrow image Putting Storyboards into Practice
arrow image Simplified Storyboard Template
arrow image Example Storyboards
arrow image References


ION Home | Pointers and Clickers

Home | Online Courses | Institutes & Presentations | Educational Resources | Initiatives | Institutional Partners | About ION

uiuc uic uis