Storyboard

1
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

2
The four primary navigational structures used in
hypermedia
3

• 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.

4

• 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
• 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
• structure of the program can be described in
  terms of
• standard interface components
• interactivity controls
• additional specific functionality
• describes anticipated outcomes in terms of
• testing and evaluation strategy
• user acceptance testing

5

• 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.

6

• 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

7
Example
8
Example
9
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.

10
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.

11
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, theyre easy
  to find
• The problem with knowledge is that its not made
  up of simple linear relationships. Its a messy
  interrelated thing

12
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

                                                
 
13
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

14
Linear Structure

• The web user navigates sequentially, moving from
  one page to the next.

15
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.

16
Non-Linear Structure

• Web users can navigate freely through the content
  of the web project, unbound by predetermined
  routes.

17
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.

18

• How we organises information, whether its 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 dont work for anyone else.

19
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

20
Command line interface

• 1st interactive dialog
• Express instructions to the computer directly,
  using function key, single characters,
  abbreviations and whole-word commands
• Powerful
• Direct access to system functionality
• Flexible
• 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

21
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

22
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

23
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

24
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)

25
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

26
Example of WIMP
HOME This hypertext home page link issimple and
unambiguous

                           Another typical
navigation elementproviding a clue to its
purposebut giving no visual feedback when
clicked
                             This could be an
imagemapwith hyperlinks to other referencesbut
there is no immediate clueto tell the user that
it is not just apretty picture - until you
notice thatthe cursor changes over
certainobjects and read the messages inthe
browser status bar.
                       The home page link on
the leftis obviously a button but provides
novisual feedback when clicked
       An unlabelled icon that isfairly easily
understood because it isrecognisable
throughfamiliarity and is in context
    This could be a buttonor just a 'dead'
bullet
27
Point-and-click Interfaces

• Point at any area of images
• Closely related to WIMP
• Extensively used in touchscreen information
  systems

28
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

29
Problems in Navigation

• Disorientation
• Cognitive Overload

30
Disorientation

• Situation where user lost or they dont 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

31
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)