storyboard, user interface flowchartchapter #

STORYBOARD

Mdm. Madihah Sheikh Abdul Aziz

Overview

Strategies for creating interactive multimedia.

Designing a multimedia project.

Strategies for creating Interactive Multimedia• A user can either describe the project in

minute details, or can build a less-detailed storyboard and spend more effort in actually rendering the project.

• The method chosen depends upon the scope of a project, the size and style of the team, and whether the same people will do design and development.

• If the design team is separate from the development team, it is best to produce a detailed design first.

Designing a Multimedia Project Designing a multimedia project requires

knowledge and skill with computers, talent in graphics, arts, video, and music, and the ability to conceptualize logical pathways.

Designing involves thinking, choosing, making, and doing.

Navigation Maps Navigation maps are also known as site maps. They help organize the content and

messages. Navigation maps provide a hierarchical table

of contents and a chart of the logical flow of the interactive interface.

Navigation maps are essentially nonlinear. 4 types:

Linear Hierarchical Non-Linear Composite

Linear

• Linear - Users navigate sequentially, from one frame of information to another.

Hierarchical

Hierarchical - Users navigate along the branches of a tree structure that is shaped by the natural logic of the content. It is also called linear with branching.

Non - Linear

Non-linear - Users navigate freely through the content, unbound by predetermined routes.

Composite

Composite - Users may navigate non-linearly, but are occasionally constrained to linear presentations.

Designing a Multimedia Project Designing the structure. (flowchart,

storyboard) Designing the user interface.

(storyboard)

Designing the Structure

Storyboards are linked to navigation maps during the design process, and help to visualize the information architecture.

Designing User Interface

Graphical approaches that work: – Plenty of "non-information areas," or white

space in the screens. Neatly executed contrasts. Gradients. Shadows. Eye-grabbers.

Designing User Interface

Graphical approaches to avoid: Clashes of color. Busy screens. Requiring more than two button clicks to

quit. Too many numbers and words. Too many substantive elements presented

too quickly.

Designing User Interface

Audio interface: multimedia user interface can include

sound elements. Sounds can be background music, special

effects for button clicks, voice-overs, effects synced to animation.

Always provide a toggle switch to disable sound.

Flowchart

• The flowchart visually represents the sequence of events in the multimedia title as well as what the user will “do” (if anything) and what will happen when they’ve done it.

• Together, the storyboard and flowchart present the production team with a “blueprint” of the nonlinear multimedia title.

• It is usually understood that, until the project is completed, both the storyboard and the flowchart are works in progress and will change over time as the production team work through the details of the project — and that’s OK!

Flowchart

1) All major elements of the project are indicated.

2) The elements are clearly labeled.3) Sequence of elements is clear and there

are no gaps or dead ends.4) Sequence of elements is logical from

user's point of view.5) Flowchart symbols are used correctly

Flowchart

What is storyboard?

Think of the storyboard as a visual script, which acts as a blueprint for the “look” of the completed project.

In multimedia production, the storyboard contains information on:- graphics Video Sound Text audience interaction color, type fonts, type size, etc.

Storyboard Checklist

• Title page to include the following:– Date of Storyboard– Project Title: Don’t make the title too long or

enigmatic– Brief Description: One or two sentence statement

about the project – Submitted By: Names of the production team

members• A storyboard for each page, screen, or frame.• Each storyboard is numbered.• All relevant details (color, graphics, sound,

font, interactivity, visuals, etc.) are indicated.

Template

Functionality:-1.TextX=Static/Animated/hyperlink2.ImageX=Static/Animated/Button/Link to Screen No.3.VideoX=AutoPlay/ Clickable using what?4.SoundX=AutoPlay/ Clickable using what?

Interface

Elements/Assets:-1.TextX=“TEXT”,TypeFace, Size, Style,Colour2.ImageX=“FileName”,Dimension,Size,Bitdepth3.VideoX=“FileName”,Dimension,Size,Duration4.SoundX=“Filename”,Size,Duration,SmapleRate

Project Name:Date:Screen Title:Screen Linkage:

Screen No:

Brief Description:

Functionality:-1.Text1=Animated2.Image1=Static3.Image2= animated button, link to Screen 14.Image3= animated button, link to Screen 55.Image4= animated button, link to Screen 2.16.Image5=animated button, link to Screen 2.2

Elements/Assets:-1.Text1=“Lets Learn Arabic”,Arial, 12, Bold,Red2.Image1=“learnCartoon.jpg”,30x10,10kb,8bit3.Image2=“home.jpg”,10x10,10kb,8bit4.Image3=“exit.jpg”,10x10,10kb,8bit5.Image4=“lessonOne.jpg”,20x10,10kb,8bit6.Image5=“lessonTwo.jpg”,20x10,10kb,8bit

Project Name: My Jawi WorldDate: 3rd June 2005Screen Title: LearnScreen Linkage: 1,2.1,2.2,5

Screen No: 2

Brief Description: Interface for learning Arabic

Image 2 Image 3

Image 1

Image 4

Image 5

Text 1

Summary

Feedback loops and good communication between the design and the production efforts are critical to the success of a project.

The four fundamental organizing structures are linear, non-linear, hierarchical, and composite.

The user interface should be simple, user friendly, and easy to navigate.

Ready for your next task?!!