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.
Sample 1
The first example is from a tutorial presented within an HTML5 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.html [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.]
| Screen Description | Notes |
|---|---|
| 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] | 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 transcript 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.] |
| 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.] |
Sample 2
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: example-storyboard.html
| Content Description | Notes |
|---|---|
| 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> | Text Outline: -Intro -Sample 1 (multimedia example) -Sample 2 (this page) -Nav links |
| Rationale – User will want to see the process in action. | Will use text instead of importing graphics to save development time. |