Chapter 13:

Storyboarding

Prof.Krithika L B Slide 1
 Storyboard
 A Storyboard is a logical and conceptual
description of system functionality for a specific
scenario, including the interaction required
between the system users and the system.
 A Storyboard "tells a specific story".

Prof.Krithika L B Slide 2
 Benefits of Storyboards

 A storyboard serves multiple purposes

– helps understand how requirements impact
implementation and test
– describes how a system or part of a system is intended
to work “before the fact”
– documents system functionality
 Communicate and verify functionality with relevant
stakeholders
– often not technical or programming

Prof.Krithika L B Slide 3
 Benefits of Storyboards (cont.)
 Conversely, storyboards can be used to document legacy
code
– convey how a system actually works “after the fact” (at
a higher level than code)
 GUI storyboards help business users to identify issues and
gaps early, minimizing the cost of rework.
 Generating UI specs, functional specs and detailed test
scripts saves hundreds of man hours.

Prof.Krithika L B Slide 4
 Benefits of Storyboards (cont.)
 Because storyboards exist independently of the software
system they describe, they have many advantages over
regular prototypes.
• They cannot crash,
• very easy to share with large groups,
• do not give the false impression that the system is
already developed.
• feedback is easier to accommodate.
 Storyboards, like HCIs and GUIs, communicate design
notions more clearly to users than use cases alone can

Prof.Krithika L B Slide 5
 Limitations

 one of the biggest problems with storyboards is that they

can become outdated very quickly.
 User interfaces originally defined often change over time,
and that creates a maintenance burden.

Prof.Krithika L B Slide 6
Prof.Krithika L B Slide 7
 Storyboarding

 Storyboarding describes highlevel system functionality

 Provides a logical model that is common to
implementation and test models
 Typically expressed in the form of activity diagrams
– to show workflow or performed actions
– may be partitioned to show control flow
between different classes
 Usually tied to use cases
– activity partitions correspond to actors

Prof.Krithika L B Slide 8
 Storyboarding

 The purpose of storyboarding is to gain an early reaction

from the users on the concepts proposed for the
application.
• Storyboards offer an effective technique for addressing the
"Yes, But" syndrome.
 Storyboarding
• Is extremely inexpensive
• Is user friendly, informal, and interactive
• Provides an early review of the user interfaces of the system
• Is easy to create and easy to modify

Prof.Krithika L B Slide 9
 Types of Storyboards

 Passive storyboards
• Tell a story to the user.
• Consist of sketches, pictures, screen shots, PowerPoint presentations,
or sample application outputs.
• Walks the user through the storyboard, with a "When you do this, this
happens" explanation.
 Active storyboards
• Try to make the user see "a movie that hasn't actually been produced
yet.“
• Provide an automated description of the way the system behaves in a
typical usage or operational scenario.
 Interactive storyboards
• Let the user experience the system in as realistic a manner as practical.
• Require participation by the user.

Prof.Krithika L B Slide 10
Storyboarding sequence

Prof.Krithika L B Slide 11
 What Storyboards Do

 In software, storyboards are used most often to work

through the details of the human-to-machine interface.
 In this area, generally one of high volatility, each user is
likely to have a different opinion of how the interface
should work.
 Storyboards for user-based systems deal with the three
essential elements of any activity:
• Who the players are
• What happens to them
• How it happens

Prof.Krithika L B Slide 12
 Tools for Storyboarding

 Passive-storyboarding constructs have been made out of

tools as simple as paper and pencil or Post-it notes.
 More advanced storyboards can be built with presentation
managers such as PowerPoint.
 Passive, active, and user-interactive storyboards have
been built with various packages that allow fast
development of user screens and output reports.

Prof.Krithika L B Slide 13
 Tips for Storyboarding

 Don't invest too much in a storyboard.

 If you don't change anything, you don't learn anything..
 Don't make the storyboard too functional.
 Whenever possible, make the storyboard interactive.

Prof.Krithika L B Slide 14
 Who uses storyboards?

 The following people use the Storyboards:

• System analysts, to explore, clarify, and capture the behavioral
interaction envisioned by the user as part of requirements
elicitation.
• User-interface designers, to design the user interface and to
build a prototype of the user interface;
• Designers of the classes that provide the user interface
functionality. They use this information to understand the
system's interactions with the user, so they can properly design
the classes that will implement the user interface.
• those who test to test the system's features.
• the manager to plan and follow up the analysis & design work.

Prof.Krithika L B Slide 15
A Sample Storyboard

Prof.Krithika L B Slide 16
Animating a Storyboard

Prof.Krithika L B Slide 17
 Example

 Imagine that in reviewing this visual storyboard, our end- user accountant
says, "Well, actually, billing numbers are divided into two parts, the year
and a unique number.
 This drawing shows only one field for the account number."
 Then he adds: "And by the way, I don't want to enter the year all the time,
so please initialize this value with the current year, which I can overwrite
if necessary."

Prof.Krithika L B Slide 18
 Example (cont.)
 Two things have happened in the scenario just described.
• We received feedback about the HCI,
• We also learned about the business logic and functionality:
i.e., in this business, accountants archive bills by year.
 With this little mock-up of a screen, we actually gained new
functional requirements.
 We now see how storyboards not only serve to create the presentation
layer, but also the business layer.
 Storyboards provide the means for validating the HCI and can serve
as a valuable requirements elicitation technique. Therefore,
storyboards can target two distinct layers in a software architecture,
the presentation layer and a middle layer that represents the object
model

Prof.Krithika L B Slide 19
 Example-E commerce website
Scene1 Scene2

 Link: Storyboardthat.com
 Example-E commerce website
Scene 3 Scene 4
 Example-E commerce website
Scene 5 Scene 6
 Example-E commerce website
Scene 7 Scene 8
 Example-E commerce website
Scene 9 Scene 10
Final Storyboard
 Key Points

 The purpose of storyboarding is to elicit early "Yes, But"

reactions.
 Storyboards can be passive, active, or interactive.
 Storyboards identify the players, explain what happens to
them, and describe how it happens.
 Make the storyboard sketchy, easy to modify, and not
shippable.
 Storyboard early and often on each project with new or
innovative content.

Prof.Krithika L B Slide 26