StoryboardStoryboard 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 :

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

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

ExampleExample

ExampleExample

Information in StoryboardInformation 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

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 DesignInteraction/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 DesignInteraction 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 MapsNavigation 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 StructureLinear Structure

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

Hierarchical StructureHierarchical 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 StructureNon-Linear Structure Web users can navigate freely through the

content of the web project, unbound by predetermined routes.

Composite/Hybrid StructureComposite/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 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 interfaceCommand 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

MenusMenus 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 LanguageNatural 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

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 spreadsheetsForm 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 InterfaceThe 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 WIMPExample of WIMP

HOMEThis hypertext home page link is

simple and unambiguous

                      The home page link on the left

is obviously a button but provides novisual feedback when clicked

                          Another typical navigation element

providing a clue to its purposebut giving no visual feedback when clicked

      An unlabelled icon that is

fairly easily understood because it isrecognisable through

familiarity and is in context

   This could be a buttonor just a 'dead' bullet

                            

This could be an imagemapwith hyperlinks to other references

but there is no immediate clueto tell the user that it is not just a

pretty picture - until you notice thatthe cursor changes over certain

objects and read the messages inthe browser status bar.

Point-and-click InterfacesPoint-and-click Interfaces Point at any area of images Closely related to WIMP Extensively used in touchscreen information systems

Three dimensional interfaceThree 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 NavigationProblems in Navigation

Disorientation Cognitive Overload

DisorientationDisorientation

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