storyboard, user interface flowchartchapter #
DESCRIPTION
Storyboard, User Interface FlowchartTRANSCRIPT
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?!!