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

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 1 st 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

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 The home page link on the left is obviously a button but provides no visual feedback when clicked Another typical navigation element providing a clue to its purpose but giving no visual feedback when clicked An unlabelled icon that is fairly easily understood because it is recognisable through familiarity and is in context This could be a button or just a 'dead' bullet 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)