Guidelines for Creating GOOD Storyboards for the WWW

Good storyboard is essential to the effective and efficient creation of a web site. Note the word efficient. Good storyboards will facilitate ease of understand the structure of a site, how information is to be presented and what information is to be presented. Not so good storyboards will make the designer and webmaster spend time trying to interpret what was really meant instead of working on the actual creation of the site/graphics. The point here is to try to define just what makes a bad storyboard and to come up with some guidelines for good storyboards.

I am drawing on my own experience here. These characteristics are the most annoying and frustrating that I have found.

Bad Characteristics

1. Too much information. As many times as I've tried to let the person who creates the bulk of our storyboards know that the screen can hold only so much at one time, he insists on creating storyboards that try to cram many very large, very detailed images, and large blocks of text on the same screen. I've attempted to explain the concept of INFORMATION OVERLOAD, but it just doesn't sink in. I usually find that I have to partition most screens into three or more pages of information.

2. Inconsistent Structure. We have a very defined structure for our pages, and the type of activities and navigation on our site. Unfortunately, the person working on the storyboards seems to try to "reinvent the wheel" with every batch of storyboards. He has this "thing" for having an identifying icon to click back to the main page of a section, Often, the icon really doesn't fit anywhere into the design, or we already have navigation in place to do that. Or he'll accompany the icon with the words "Click the Icon to return to the main page." ?? What is the point? We have a text navigation bar that the students will use for the other eight areas. Why throw something new at them now? We need to be consistent so that students will be able to find information consistently.

3. Inconsistent Design. Why is it so hard for some people to understand that we can't redesign every page? A site needs to have a consistent design through the use of color and layout, with a set of about three variations for the type of information on the page. There is the main page, which generally holds more navigational information, a section page, which organizes information by topic and gives introductions, and a subsidiary page, which holds the actual information. Sections may have different colors and the same general layout and image "looks", or sections may have slightly (very slightly) different layout and use the same colors. If you use different layouts and colors, you run the risk of your viewers becoming confused and lost. You need to have a strong overall site identity.

4. Inappropriate Supporting Images. Part of the problem here is that our storyboard person tends to Xerox first and ask questions later. He'll include copies of images pasted to the cards, and won't make any reference to who created them, or where he got the image. "Just find or create something similar." Most of the time, I just write to our artist and let him handle it. But if we are very close to deadline, there may not be time to recreate an image or diagram. A certain amount of original work is good, but time consuming. I've asked him to look at our catalogs of images that we've collected and have the rights to use, and try to find appropriate images there from the start (maybe 80% of images). He, as a content person, has more of an idea about what he is trying to communicate than we do.

5. Penciled in Handwriting. We all have computers. I spend more time trying to decipher handwriting than the person spent writing it. Plus, pencil does not Xerox well, if at all. I end up having to trace over text and sketches with a black pen, spending more of my time (I do not get paid overtime) trying to make them copy-ready.

6. Incomprehensible Numbering. A good numbering system allows for the fact that storyboard cards may have to be divided into two or more cards in order to show image examples or more information. We usually create outlines first, then use the outline numbers for both the storyboard number and the HTML name of the file. This really helps in creating site maps, too. A bad numbering system is not understandable to anyone, and does not indicate what section or topic that it belongs to.

7. Not Enough Information. A card with two words and a little vague sketch is not a good card. At times I've had to just set aside these vague cards, then schedule a time to meet for further explanation. I'd rather have what I need in front of me so I can just get most of the HTML done in one sitting. It's worse when even our other faculty members can't shed any light on what the third meant to say or show.

8. Bad Storyboard CARD design. I spent a good chunk of time figuring out what I needed in a storyboard card meant specifically for page creation. One of our group went ahead an made up his own based on a mutilmedia card design and had them printed. The cards basically had sections for just about everything except what I needed. There were sections for music, special effects and narration, none of which we were using. There weren't any areas for image information, HTML file names, or banner information, which were areas that I really needed. I've spent all year crossing out the labels and putting in my own. It's also confusing to the other faculty members who are creating storyboards.

These are the major problems I've experienced. There are others that I'm sure I've forgotten, and won't remember until I go back through the cards to see that everything is finished.

Good Characteristics would then be as follows:

1. Approriate amounts of information (text and images) for the screen.

2. Consistent Structure of Information and navigation.

3. Consistent Design of page layout and site identity.

4. Approriate Use of Supporting Images

5. Clear representation of text and image information. Make sure that the handwritten information or sketches are done or traced in black ink, so that cards can be photocopied.

6. Consistent and Logical Numbering System. Allow for additional cards, and use the numbering to identify different sections of information.

7. Essential Information must be present on each card. All the information needed for the person to create the screen or page must be present on the card and must be understandable.

8. Good Storyboard Card Design. If your tools are not well designed, it is difficult to work with them, or use them efficiently.

These are by no means the only guidelines to use when making storyboards or planning sites. These come from my own personal experience. There are many, many more elements that need to be considered than I could possibly cover here. Just use your own judgement and logic.

 

Jennifer Nieland
March 26, 1999

 

[Back to the Articles]