Multimedia Design and Development
Storyboarding and Scripting
Handouts: Lopuck, p. 15; loop storyboard, page of script; Cates storyboard template plus example
After you’ve done your analysis, determining what you will do for whom—
your audience, goals, content, needs and schedule—
you are ready to consider determine how you will do it—your design.
But don’t skimp on analysis—make sure you know what you will do;
especially make sure you do your content analysis.
Why am I insisting that content analysis be thorough,
i.e., more than a paragraph or two, more like several pages?
Output of multimedia design is a complete specification of all media elements and interactivity,
explicit enough that the programmer or producer knows exactly what to implement.
Never begin a multimedia project without first outlining its structure and content!
Products of multimedia design should address two major issues:
1. User interface design
2. Content design
See http://www.cse.lehigh.edu/~glennb/mm/DesignDocPipeLine.doc for a student example.
For user interface design, develop a mock-up of a user interface
Demonstrate your “look and feel”
Indicate all the functions that your user interface will support
Write multimedia programming guidelines, defining standards for screen layout and
advance, text, graphics, audio, video, interactivity etc.
See http://www.cse.lehigh.edu/~glennb/mm/designGuidelines.doc for some UI issues
See http://www.gsu.edu/~wwwitr/docs/idguide/index.html for more guidelines
For content design, develop storyboards, navigational maps or flowcharts, and/or scripts
Storyboards are outlines in graphical forms, telling the story of a piece, screen by screen
o See examples in Lopuck, pp. 10-11, and loop story from UM (handout)
o Each sketch comes with accompanying text, providing details of media elements
(such as text and sound) and interactivity
Navigational maps or flowcharts show overall structure of a piece
o Flow may be linear, multi-linear, hierarchical, non-linear, or composite
o See Vaughan, p. 389 and Lopuck, pp. 12-13 (KidSoft example)
What kind of flow structure does Kidsoft use?
Scripts provide details in textual form
o A text-based approach may at first seem to be least suitable for multimedia design,
but remember that movies and TV shows are produced from scripts.
o From what media do storyboards derive? Animated cartoons.
o Handout from script developed for UM. (More examples via my web page.)
Multimedia design typically proceeds in several iterations:
First iteration describes the user interface: how a user will navigate through the content.
o Rough, initial storyboards is a useful technique—
o Showcase key screens in proposed titles
o Lopuck calls these key screens “places” or environments in which action occurs.
o Note the use of distinct “places” in the Kidsoft title--why is this effective?
o In a page or two, provide drawings with accompanying text to describe the overall
concept of each “place” or key screen
Successive iterations provide more detail
o Storyboards or scripts can become more detailed: see Lopuck, pp. 14-15
o Functional spec walks through each scenario (section), frame by frame, in detail
o Cates’ storyboard model shows details for each screen: base plus successive layering
o Discuss notes on Cates’ handout and example
Which approach to design do you think you will use—storyboards or scripts?
(Remember, combinations are allowed!)
Here are a some practical script-writing guidelines that we developed for the CIMEL project:
1. Start a unit with prerequisites and overview, with links to relevant material.
2. Divide the script into as many small screens as possible (especially for Flash).
3. Number screens in multiples of 10. So, the first screen of any chapter will have a screen number
of 10, the second screen as 20 and likewise.
4. Script writing should be detailed and explicit and ust follow all use case scenarios.
5. Use enthusiastic conversational tone and active voice sentences, wherever possible. The student
should always feel that the experts do really care about him/her.
Take a look at this attached snippet of script as prepared by David Goldfeder with suggested
improvements from Prof. Blank for some effective dialog writing examples.
6. Every four or five screens must be followed by some kind of exercises.
7. The exercises could be any of the following types:
a) Research based
b) Constructive, e.g., drag and drop, programming in a tool, etc.
c) True / False
d) Multiple choice question and answers
e) Choose the correct answer
8. All exercise questions must be followed by feedback, for both correct and incorrect responses.
In the case of a wrong answer, the system should provide a hint that will help the learner figure
out the correct answer. In the case of a right answer, feedback should explain more about why
it’s the correct answer. It’s important for feedback to elaborate on the question, going beyond it
9. Once in a while, allow student to have explicit user-controlled interaction. For example, to click
on something to learn more about it. This kind of interactivity allows the user to participate in
the learning process instead of passively watching the material presented.
10. Every chapter / topic must end with a summary and “end of chapter quizzes”. At this point,
remind the student that the answers to these quizzes will be graded. Jeff Heigl has developed a
Flash smart clip template for end of chapter quizzes; it includes links back to screens for any
questions that the student answered incorrectly.
11. Text based script and Audio script addresses two different sensors of a person – eye and ear. In
case of audio script, conversational writing needs to sound natural and the best way to see if
your copy passes the test is to actually read it out loud. Audio scripts allow you to inject
personality into programs. Because the narrator is an actual person, you can use inclusive terms
like “we” or “our,” creating the illusion that the narrator is viewing the program along with the
user. This makes the program less sterile and helps puts the user at ease. In case the student is
expected to do some action, use terms like “you” or address him by his login name.
12. The script should have distinction between narration text and voice-over text (displayed text),
wherever applicable. For example, in case of display of code fragments, the script should
identify it as voice-over text and NOT as narration text.
13. If a particular screen requires student’s attention to a particular point on the screen, it should be
explicit in script writing. See Example. This example make a button “hot” /stand out when it is
expected to be clicked next.