storyboard what do we mean by the term “storyboarding”? storyboarding is a powerful and simple...
TRANSCRIPT
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)