Transcript Document

Storyboard

What do we mean by the term “Storyboarding”?






Storyboarding is a powerful and simple technique for
capturing ideas about the form and appearance of a
system
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
Derived from film and video production
In planning a scene, a storyboard is created representing
the different shots that will be linked together to form the
scene.
In multimedia design we can use a line drawing to identify
the main features of one screen, drawn at a chosen level
of precision. A series of such drawings can be linked
together to illustrate the links and transitions between
screens.
We start by developing a navigational structure, for the
presentation itself
The four primary navigational structures used in hypermedia

The Storyboard actually begins life in the description of the
goals of the project itself.

The clients descriptions of their requirements can be divided
into :






the context of the application (metaphor(s))
the content of the application
the goals and anticipated outcomes of the project
functionality additional to the standard interactivity controls
provided for multimedia applications
multimedia/hypermedia requirements
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.

From this information an initial specification can be
developed :


described in film/video development as an application script
outlines the project goals in terms of :





structure of the program can be described in terms of :




development of context and context-related material
incorporation of existing content
identification of new content to be developed
use of multimedia and hypermedia to support/provide context and
content
standard interface components
interactivity controls
additional specific functionality
describes anticipated outcomes in terms of :


testing and evaluation strategy
user acceptance testing

From the initial specification, an outline can be developed:




uses same basic technique as outlining content for an essay,
identifying main sections of the content under specified
heading, then identifying subsections and subsection headings
within each section, and so on
only major difference is that it translates the outline structure
(the content entries) into branches (points of decision) on the
screen
thus the major headings in the outline become the options
available to the user in the main menu of the program,
subheadings form subsidiary menus on branched screens, etc
this branching provides a halfway-house between the linearity
of a standard film/video outline and the full hypermedia web,
which includes lateral as well as hierarchical links.

From the specification and the outline, a logic flow
chart is developed :



provides a map of the proposed system, to support
multimedia authoring
illustrates the choices available to the user from each
screen
The storyboard itself is a graphic representation of
the proposed multimedia application, essentially a
rendition of the specification :



can use standard templates
supports the development of hypermedia linking, at
screen level
provides a history of the development of the design of
the application, through the production log
Example
Example
Information in Storyboard

following information must be included:










A sketch or drawing of the screen, page, or frame.
Color, placement, and size of graphics, if important.
Actual text, if any, for each screen, page, or frame.*
Color, size, and type of font, if there is text.
Narration, if any.*
Animation, if any.
Video, if any.
Audio, if any.
Audience interaction, if any.
Anything else the production crew needs to know.
The Advantages of
Storyboarding







It helps catalyse feelings about the feasibility of the program idea. If
the storyboard looks wrong, the program will too.
Omissions may be spotted as a result of producing the storyboard.
There is a document which everyone can point to as a common point
of reference, enabling the design team (which includes the client) to
say, 'Yes, that is what I meant', or 'No, we've a problem here'.
The storyboard helps focus on the total content of the program, both
from the point of view of the overall size of the program, and in
discussing user interaction times.
Problems may be spotted from the storyboard which may have proven
more costly to correct at a later stage.
A detailed storyboard can save time in writing project documentation,
e.g., in the production of the product specification document.
Advanced planning can result in templates for the content-writer to
work with. This speeds up the content-writing process and makes the
production of the storyboard itself so much faster.
Interaction/Navigation Design



The World Wide Web, by its very nature, encourages
jumping from one site, from one page, from one
thought, to another. It's all so easy
Reading a book is essentially a linear process. You start
at the beginning and read to the end
With the advent of interactive hypertext, you can be
reading a line of text on one page, and with the click of
a button, be transferred to a cross referenced line of
text on a site on the other side of the world
If things are where you expect them, they’re easy to find
The problem with knowledge is that it’s not made up of
simple linear relationships. It’s a messy interrelated
thing
Interaction Design

Delight is the facilitative component of experience. It
can be stimulated through a variety of means,
including:
surprise
confirmation of expectations
aesthetic stimulation

Difficulty is the challenging component of experience. It
can arise through a variety of means, including:
error
violation of expectations
conflict
Navigation Maps





A navigation map outlines the structure of the entire web
project...showing all of the html pages and the connections
from one page to others. It is useful for organizing and clearly
seeing how material should be connected. The Navigation Map
is similar to a storyboard, except that it doesn't provide detail
as to the contents of the individual pages. Below are some
examples of navigation maps.
Linear Structure
Hierarchical Structure
Non-Linear Structure
Composite/Hybrid Structure
Linear Structure

The web user navigates sequentially,
moving from one page to the next.
Hierarchical Structure

Analogous to the branches of a tree. To move from top
to bottom, one must move down one branch at a
time...with more branches being available the lower you
go. The structure is shaped by some natural logic.
Non-Linear Structure

Web users can navigate freely through the
content of the web project, unbound by
predetermined routes.
Composite/Hybrid Structure

For the most part users can navigate freely (as in the
non-linear structure), but are occasionally constrained
to a linear or hierarchical structure for some of the
material.
How we organises information, whether it’s on the Web,
or in a library, is a balance between how information
‘wants’ to be organised and how users want to find it.

Three major factors in most personal organisation
schemes:



Time
Frequency of use
Randomness
There are a lot of wonderfully unpredictable folks out
there creating wonderfully unpredictablesites that work
just fine for them. The problem is they don’t work for
anyone else.
Interaction Styles


A dialogue between the computer and
the user
Common interaction styles:








Command line interface
Menus
Natural language
Question/answer and query dialog
Form-fills and spreadsheets
WIMP
Point and click
Three dimensional interfaces
Command line interface



1st interactive dialog
Express instructions to the computer directly, using
function key, single characters, abbreviations and
whole-word commands
Powerful


Flexible




Direct access to system functionality
The command often has a number of options or
parameters that will vary its behaviour in some way
Can be applied to many objects at once
Useful for repetitive tasks
Difficult to use and learn


Command must be remembered
Better for expert user
Menus





Set of option available to the user is displayed on the
screen, and selected using mouse, or numeric or
alphabetic keys
No need to recall since options are visible
Menu options need to be meaningful and logically
grouped
Menus are hierarchically ordered
The grouping and naming of menu options provides cue
for the user to find the required option
Natural Language



Computer that is able to understand instructions
expressed in everyday words.
Language is ambiguous at a number of level (syntax,
structure, meaning, phrase)
the man hit the boy with the stick
A single word has a few meaning
Question/answer and query
dialog





A simple mechanism for providing input to an
application in a specific domain
User is asked a series of questions and so led through
the interaction step by step
Easy to learn and use
Query languages, used to construct queries to retrieve
information from the database
User need to specify attributes for which to search the
database
Form fills and spreadsheets




Used primarily for data entry but also be useful in data
retrieval applications
User filling in appropriate values
Spreadsheets are a sophisticated variation of form filling
Comprises a grid of cells, each of which contain a value
of formula (can involve the values of other cells)
The WIMP Interface



Windows, Icons, Menus and Pointer
Windows, Icons, Mice and Pull-down Menus
Default interface style for the majority of interactive
computer systems
Example of WIMP
HOME
This hypertext home page link is
simple and unambiguous
Another typical navigation element
providing a clue to its purpose
but giving no visual feedback when clicked
The home page link on the left
is obviously a button but provides no
visual feedback when clicked
This could be a button
or just a 'dead' bullet
An unlabelled icon that is
fairly easily understood because it is
recognisable through
familiarity and is in context
This could be an imagemap
with hyperlinks to other references
but there is no immediate clue
to tell the user that it is not just a
pretty picture - until you notice that
the cursor changes over certain
objects and read the messages in
the browser status bar.
Point-and-click Interfaces



Point at any area of images
Closely related to WIMP
Extensively used in touchscreen information systems
Three dimensional interface


Virtual reality
3D workspaces


Objects displayed in perspective when at an angle to the
viewer and shrink when they are ‘further away’
Size, light provide a sense of dictance
Problems in Navigation


Disorientation
Cognitive Overload
Disorientation


Situation where user lost or they don’t
know where they were within non-linear
application. Sometimes this
phenomenon also called lost in
hyperspace
How to avoid



Limit the number of links
Use global mapping, visual location pointer
Create buttons to home or automated
backtracking
Cognitive Overload




Problem arise when user is presented with too
many hypertext (too many choices)
User will getting confuse which link to follow
and could have some feeling of irritating
End up, user no longer favour to use the
application
How to avoid:



Use of glossary for technical jargons
Pop-up windows for glossary, help function
Avoid putting to much hypertext within a single node
(max 8)