Storyboarding Multimedia

Adrian Mallon, 1995

Table of contents


Depending on the nature and scale of your operation, you might be sceptical of the idea of storyboarding programs. It can be time-consuming and if the product development time is short (as in TV or Radio news programming) then who has time to produce a shot-by-shot plan of how the end product should look and sound? But if you are in film, commercial or TV magazine and documentary production, dealing with large multidisciplinary production teams who may be split between different sites, then careful planning is essential. Storyboarding plays an important role in these areas in providing everyone, including the client, if there is one, with a common point of reference, to verify and validate structural and content elements. The same is true in multimedia production, perhaps even more so since teams in this area are still in the process of developing a common cross-disciplinary language and, with development tools still in the process of evolution, experience is not always there to draw on when it comes to the incorporation of more obscure design elements.

Multimedia authoring tools such as Hypercard and Macromedia Director have already made an impact in storyboarding for more tradition media such as film and commercial production. Their use in storyboarding multimedia productions is even more appropriate and can lead to faster production times and fewer design problems to overcome in later production stages. The major assumption in the recommendation of this approach is that the designer is fluent in the authoring/storyboarding tools. Without this fluency, it makes more sense to pursue alternative, more traditional, paper-based storyboarding techniques.

So what is a storyboard?

A storyboard is an expression of everything that will be contained in the program -- what menu screens will look like, what pictures (still and moving) will be seen when and for how long, what audio and text will accompany the images, either synchronously or hyperlinked. Typically, storyboards may be written documents and off-the-shelf storyboard pads for TV and video formats, adaptable for multimedia, are available. For me, the storyboard expresses, in one way or another, everything that can be seen or heard or experienced by the end-user of the multimedia program. It's more than a test-of-concept model, and just short of the final product specification document.

Multimedia Storyboarding Tools

The illustration at the top of this section is from a storyboard produced using Hypercard on the Mac. It shows some screens in an interactive program for the teaching of Home Economics which was commissioned by the Design Council. Each storyboard page actually contained eight such illustrations in B&W.

It was produced by the interactive designer, to use in communicating what was required to the interactive programmer and to the graphic designer. This example of a storyboard doesn't give any feel for the interactive structure of the program -- that was expressed separately in a flowchart diagram, cross-referenced to the storyboard screens, to avoid having to work with large wall-chart diagrams. But from this storyboard, the team could decide on screen text-fonts, screen layout, image size and resolution, and do the sums necessary to calculate the file-size of the application to ensure it would fit on the target distribution medium (in this case a high-density floppy disc). These decisions were made before the programming and final artwork stages to avoid having to go back to the content-definition team to ask for re-writes then.

The Advantages of Storyboarding

Storyboarding need not take the considerable time that some think it does, depending on how one goes about it. And there are significant advantages to be considered. Measuring the true effectiveness of storyboarding is, of course, problematic. There is a lack of data from commercial developers, and questions must be asked of the reliability of what data is available. Few developers are keen to admit, or even measure, the costs of program revision arising from weaknesses in planning, -- increased costs being added to the client's bill or absorbed as acceptable loss of profit by the developer. But if storyboarding has a role to play in the design process then studying how to go about it the right way must influence product design; indeed, I would argue that, for complex multimedia products and in extended working teams, detailed storyboarding is essential.

Interactive Storyboarding

With the increased power and ease-of-use of present multimedia authoring tools, interactive storyboards are now possible. An interactive storyboard is a working version of the program but produced in an easily adjusted form to material to be added and adjusted without requiring any deep-level programming. Used in conjunction with other design and production documentation (the treatment, flowchart, product specification and individual team-member production briefs), it adds greatly to the development team's understanding of its objectives by providing a common point of reference to illustrate the structure and feeling of the projected software program from the end-user point of view.

An interactive test-of-concept model and an interactive storyboard will differ principally by their level of completeness and also by the purpose for which each is used. The test-of-concept model is produced when the design is at a plastic stage and is an aid to thinking about the problem and arriving at better and best solutions. Thus there may be several test-of-concept models before a final design is fixed on. But once the final design is fixed on, effort should be concentrated on fleshing out the model by developing the content in a detailed way along each of the program's branches and in each of its sections. The storyboard will define largely what needs to be written, what graphics need to be produced, how best to apply transition and other computer effects, and the information playback load on the target-computer delivery system imposed by simultaneously accessing diverse media-types.

If the product is an innovative one, the production of the interactive storyboard should precede the production of the product specification document which enables the prototype to be constructed. This ensures a deeper level of reflection and testing of the methods by which the content is to be delivered before committing to the relatively more expensive production of a prototype. If the program type is not innovative, however, and simply the reapplication of proven strategies and techniques, interactive storyboarding is still of value. In this case, it may occur after the production of a product specification In both instances, it will serve in as an aid in drawing up the briefs which must be produced separately for software, graphics, film and sound-engineer team members.

The speed with which storyboards and working models can be created means that it is unimportant whether or not the final software is to be written on the same platform as the authoring tool, although if the final production itself is to be produced using only an authoring tool then it is, of course, desirable to plan and design using the same tool.

A screen from an interactive storyboard is shown in Figure 5 (an example from the program flowcharted in Figure 4). Pathways can be tested through the material to investigate the look and feel, the consistency and ease of use, of the program, even before the complete screen text (if any) has been added. The top-left-hand part of the screen represents the viewing area to be presented to the end-user. On a 14"-screen, typically, this is all of the storyboard that would be viewable to allow visual impact and cursor-interaction movements to be assessed. On a larger, 16"-screen, say, a wider range of information fields relevant to different parts of program research and production come into view. The program can be customised to conceal those fields which are not relevant to a particular development team member for the sake of clarity. Print-outs are then made, which, along with statements from the interactive designer, document clearly and exhaustively the extent of a program and the detail of what needs to be completed.

Using Interactive Storyboarding to Speed-up the Content-writing Phase

Content writing is an unpredictable phase at best. The unpredictability arises from uncertainties which are inherent in any creative process. Where the content writer and the designer are one-and-the-same there are fewer problems, but this is not often the case. A further problem area is where the client is also the content expert/writer. In such instances, forcing the client to keep to project deadlines can be problematic since development teams' internal scheduling requirements will often be invisible to the client. Anything that can be done to speed up the content-writing phase is to be welcomed.

What I tend to do is to create first a test-of-concept model for a program in Hypercard. The test-of-concept model helps focus attention on the overall form and approach of the program. This is then extendedin functionality to act as a template for the content-writer. A storyboard of every screen in the resource is produced, with blanks to be filled in by the content-writer. These screens can be printed out to allow the content writer to pen in their contributions. Much more interesting and productive is when the content-writer is confident enough to write directly to the storyboard in its interactive form. This involves the content-writer sitting in front of the template version of the program, referring to a printed flowchart which illustrates the overall structure. The writer navigates through the program as an end-user would, with access to all program sections and levels. The writer then clicks on open text fields on the screen to enter the text to appear at the appropriate part of the screen.

The advantages of the technique, which allows content to be composed within an interactive template, are several. First of all, it ensures a systematic approach to the content-writing phase of any project. Secondly, a great amount of time is saved in inputting the text which would otherwise have to be transferred from paper to word-processable form, and then passages and captions cut and pasted to the appropriate part of the interactive program. Thirdly, the technique is useful in motivating the writer by their deeper involvement in the design process. It also ensures that people are writing with the constraints imposed by the output screen in mind,--avoiding too much text on a screen, say, and making sure that the text-size is readable. In this manner, the writerŐs attention is directed to every detail on every screen which concerns them, and potentially serious omissions are avoided. Finally, the technique can greatly facilitate the localisation of the program for foreign language markets, since problems of text-translation which affect screen layout are immediately identified in translating directly to given screen areas.

Using Interactive Storyboarding to Speed-up Report Document Production

A well-produced, computer-generated storyboard can also reduce the time required to produce a product specification document and production briefs, which will differ in each case for programmers, graphic artists, film crews and sound engineers but which require accurate visuals to effectively communicate specific points. As already mentioned, interactive storyboarding enables decisions to be evaluated at an early stage on screen text-fonts, screen layout, image size and resolution, andfacilitates the calculation of the file-size of the application. Once these decisions have been made and incorporated into the storyboard, storyboard screens can be output to print in expanded templates which allow briefing notes to be attached to each screen. Again the argument applies, that an integrated design approach to program modelling and documentation will benefit and speed development.

From Interactive Storyboard to Prototype: A Practical Example

In one laserdisc production designed to run within a PC environment, Hypercard on the Mac was used as a test program to check the laserdisc frame coding and image quality and to examine aspects of the look and feel of a fully-featured implementation of the software program. The program had been storyboarded in Hypercard and the storyboard used in drawing up a specification for the C-programming of the disc. A test laserdisc containing the video footage and program menu and background screens arrived back from the pressing house and, rather than wait a few more weeks for the C-programming phase to be completed, the Hypercard storyboard model was extended by the use of off-the-shelf XCMD's to enable it to control the laserdisc playback on a second monitor. Because the storyboard was already fully featured and contained the full screen text, this took just one day. The laserdisc was then tested and the go-ahead given for the pressing of a master disc and final run. The program still had to be tested under the final conditions, that is, running on a 386 PC, with video-playthrough via a MIC 3000 card, but the Hypercard prototype was a valuable additional test and enabled programming to proceed with confidence that no changes were going to be sprung at the last minute. It was also invaluable in demonstrating the program at a seminar which took place before the C-programmed version was available, allowing a wider audience of consultant specialists to verify film changes earlier recommended.


The purpose of this article has been to argue that the flexibility of present design tools means they should not be considered as contributing solely to the crafting of the product at the end of the development process. Instead, they can contribute at many stages of that process. The tools can, in fact, contribute to the solution of day-to-day problems, speeding development times and cutting costs, making tasks more interesting and less burdensome.

Storyboarding was chosen as a focus to illustrate how an integrated approach to the design process can help design teams. If storyboarding has a role to play in the design process then studying how to go about it the right way must influence product design. Indeed, I would argue that, for complex multimedia products and in extended working teams, detailed storyboarding is essential.

The technique of interactive storyboarding was described and recommended as a supplementary design aid, not as a substitute for paper-based documentation. It may be that the technique does blur the distinction between program test-of-concept models, storyboards and prototypes, but clarity should be restored by considering that all these modelling techniques form part of a spectrum in a process to ensure that what is designed is wanted and will work. Indeed, the design benefits to be gained by interactive storyboarding should more than compensate the time required to re-evaluate basic modelling concepts and adjust to this more flexible and involving approach.


Andriole, S. (1987), "Storyboard Prototyping for Requirements verification", Large Scale Systems in Information and Decision Technologies, v.12, n.3, pp.231-247.
Bove, T. and Rhodes, C. (1990), Que's Multimedia Handbook, Carmel, Indiana, USA.
Bunzel, M. and Morris, S. (1994), Multimedia Applications Development, New York, USA.
Hoffos, S., Sharpless, G., and Lewis, N. (1992), The CD-I Designer's Guide, London.
Holsinger, E (1993), MacWeek Guide to Desktop Video, Emeryville, CA, USA, p.141.
Katz, S. (1991), Film Directing Shot by Shot, California.
Kendall, K. and Kendall, J. (1992), Systems Analysis and Design, New Jersey, USA, 2nd edn.
Marsden, K. and Aiken, P. (1993), "Experiences Using Cooperative Interactive Storyboard Prototyping", Communications of the ACM, v.36, n.6, pp.57-64.
Philips IMS (1992), The CD-I production Handbook, Wokingham, England.
Preston, J.M., ed. (1991), Compact Disc-Interactive: A DesignerŐs Overview, Deventer, The Netherlands, 2nd edn.