Russell Chun

Storyboarding is a way to help organize, conceptually and spatially, your story elements. Your story elements are text, video, slideshows, images, audio, various interactive components, and buttons. You need to organize these elements graphically on the “page” (the browser window).

1. Your media elements should be complementary. For example, the text shouldn’t repeat what the video tells you. A video shouldn’t repeat what a slideshow conveys. Each media type tells the story in a different way, that put together, tells the whole story. Each media type has its own advantages and limitations that you’ve been exploring, and the trick is to match the best media to your content.

2. Because your story is told through different media, your story emerges in parts and must be linked together with a navigation system. Navigation consists of buttons and/or hyperlinks that integrate your media. A hyperlink is a clickable item on a web page that takes you to a different “page” that contains new media and content. A button is simply a graphical hyperlink.

3. In order to think about navigation, it’s useful to group your story elements, both by media type and by issue or theme. Grouping helps your story stick together; it’s a good rule to have no more than seven items on the screen at once to choose from. Why seven? That is about the maximum number of items that a normal person can retain in their short term memory. We can easily keep up to seven numbers in our head (a telephone number, a zip code), but beyond that, it becomes difficult and we have to write it down to remember for the short term. If you have more items, you must resort to other interface conventions, such as an expandable/collapsable menu, or a scrolling menu, etc. You may have to come up with an original interface to juggle multiple items!
Thematic groupings help the viewer navigate the story; you may have a background section, a section on the experts, a section on education, etc. Those sections would contain content with multiple media types. You could also provide grouping by media to make it easy for a person who wants to see all your videos, or all your graphs, or all of any particular media type. Many news sites have a multimedia grouping.

4. Grouping can help provide structure to your story, but it ultimately still remains non-linear. The user can click to see your content in any order–they might want to watch the experts before seeing the data in the graphs, for example. Or they might never click on your graphs. This allows viewers to have different levels of involvement, just as a reader of a text article may only read the first paragraph of an article.

5. How do you provide some structure to a non-linear story? Through your groupings and through design. You should arrange your elements spatially on the page to give more prominence to some groupings and less prominence to others. You can order your buttons to make one group more important than another. Readers will look left to right, top to bottom. Think also about font styles and sizes. You can maintain hierarchies like so: MOST IMPORTANT, Important, Not so important. You must also consider color. Therefore: use size, location on the page, text styles, and color to organize buttons and story elements. Khoi Vinh, the Design Director at the NYTimes, sums up digital design as “control”; the effort to manage the user’s experience. See a summary of a recent talk.

6. Now we come to storyboarding. The best way to start is with a pencil and paper. Do not think about the technology and do not think about design. Think only about navigation and layout at this point. Draw little rectangular boxes to represent the browser window or the “stage” and actually draw your buttons and media elements. What does the viewer see when they first land on the page? What and where do they click to see your other content? Draw lines that connect the first “home” page to the inside, or content, pages. How will the viewer get back to where they were? How does the viewer know where they are? Drawing all your pages will help you figure out navigation and layout. Include persistent elements like a header or a footer that contains top-level information like the headline, byline, contact information, and a “home” button.
How much space do you have? Assume a maximum screen resolution of 800 pixels by 600 pixels. While most viewers will have larger screens than that, 800×600 it is a good, safe standard. If the screen resolution is 800×600, make the actual stage or page area 750 pixels wide. In Flash, you’ll set the stage width to 750 pixels, and in Dreamweaver, you’ll set your maximum table width to 750 pixels. The little drawings you make are also known as site maps or wireframes. Sometimes people use Powerpoint to create their wireframes, which you may want to try. After storyboarding is complete, you can move on to mock-ups, which are basically wireframes with actual designed elements in place.

Storyboarding (From Jane Ellen Stevens on the Knight Digital Media Center)

Good information from Michael Cervieri of ScribeMedia:

Wireframes: http://michael.cervieri.com/2007/04/16/wireframe/
Size Matters: http://michael.cervieri.com/2007/04/18/size-matters/

Multimedia Elements:

• Headline: Subhead
• Byline
• Nut graph
• Buttons/Links to inside content (video, text, audio, slideshows, interactives)
• Home
• About/Credits
• Related Links/Resources
• Contact
• Leave a comment
• Media gallery/Media index
• What’s new
• Download (PDF, MP3 podcasts, etc.)
• Print article
• E-mail article