Multimedia Design

Table of Content
1. Navigational structures
2. Storyboard
3. Multimedia interface components
4. Tips for interface design
• When you are done with the planning stage, it
is time for you to organize your content.
• Computer screens are better suited to show
concise chunks of information.
• Very long content/pages are disorienting
because the user has to scroll long distances
and remember what was off-screen.
• Organize your information into short
categories.
Questions to ask yourself:
• What categories should the information be
organized into?
• What are the priorities for these categories
(what is the most important)?
• Can I make the chunks of information flow
without repeating information?
• Are the categories logical and well organized so
that the user can predict where to go to find
what he wants?
• The simplest way to plan and view this flow of
information is to draw a flowchart to show how
the information will be mapped.
Navigational Structures
Navigational Structure

• Linear
• Hierarchical
• Non-Linear
• Composite
Linear

• Sequential navigation (sequence of step by step

procedures)
• Users navigate sequentially, from one frame to another
• They usually go Forward or Backward.
• E.g. slides and video presentation
Hierarchical

• Based on the logic of the content

• Applications are structured through menus and the user
makes a choice that leads to another menu.
• The user can go down through levels and just can only
return by selecting exit button or equivalent events which
will lead the user back to the main menu.
Non-linear

• Users navigate freely through the content of the project

• Navigation is unbound by pre-determine routes.
• users are free to jump any page they like.
• E.g. website
Composite

• Mixed structure (combines linear, non linear,

&Hierarchical.)
• Users may navigate freely, but are occasionally
constrained to linear presentations of movies or
critical information and/or to data that are most
logically organized in a hierarchy.
Storyboard
Storyboard

• Storyboarding is literally building a story or sample

page on paper that describes roughly the layout.
• This is a process lifted from other media
development including movie making, cartoon
animation and marketing.
• A visual representation of the different frames, or
screens, that will be included in your production.
• The storyboard page is used to describe specific
frame of time within a multimedia presentation. It
can contain the formatting, layout of the content,
layout of the navigational controls, interactivity
information and useful comments.
Example of storyboard

Title : Main Page Voice

V1
Shapes
V2

V3

Frame
Shapes Shapes Shapes Shapes
V4

S1 S2 S3 S4
Example of storyboard

Title : Main Page Voice

V5
Shapes

Frame
Shapes

S5
Example of storyboard

Title : Second Page Voice

V1
Lines
V2

V3

Frame
Lines Lines Lines Lines
V4

S1 S2 S3 S4
Multimedia Interface
Components
• Background and texture
• Buttons, icons and picons
• Rollovers and sliders
• Hotspots and menus
• Feedback
Background and texture
Buttons, icons and picons
Rollovers and sliders
Hotspots and menus
• A section of an image which
when clicked invokes an
action
• In one image there can be
multiple clickable area.
• Menu are used such as pull-
down menus usually place
on the top or the side area
of applications
Feedback
• Immediate response triggered by user’s action.
• E.g. After user answered a question, a pop up
window will respond whether the answer is
correct or not.
Extra Knowledge
Tips for Interface design
• Make sure your information is readable
without straining your eyes. Use appropriate
background and foreground colors. Do not
overuse color and limit the use of strong colors
particularly red.
• The navigational controls should have
indication or visual cues of what are their
function.
• Make sure users do not have to click too many
times to look for specific information.
• Do not put too many things/information in one
place. It will make the screen too ‘busy’.
• Create your interface as simple as possible.
• Make sure the size of text and graphics are
legible.
• Be consistent in the use of symbols and color.
Your navigation controls should be at the same
place so that users will always know where they
are.
• Choose clarity over sophistication.
• Keep Screen Content Simple and Clear
• Good use of Margins and White Space
The police car in the top
image has no relevance
in a presentation on
playgrounds.
Avoid Excessive and Improper Use of Color

Uses of Type Uses of Type

Serif type Serif type
• Ideal for large headlines • Ideal for large headlines
• Difficult to read in long blocks of • Difficult to read in long blocks of
text text
• Looks best when surrounded by • Looks best when surrounded by
lots of white space. lots of white space.

Sans-Serif type Sans-Serif type

• Works well in smaller sizes • Works well in smaller sizes
especially in body text especially in body text
• Looks busy and cluttered in • Looks busy and cluttered in
large size. large size.
• An image should not distract from the main
message on the screen

Dance (early 1950s - 1970s) Dance (early 1950s - 1970s)

Multimedia Multimedia
(without compute r interaction) (without compute r interaction)

Alwin Nikolais (1910-1993) employed lights, Alwin Nikolais (1910-1993) employed lights,
slides, electronic music, and stage prop s slides, electronic music, and stage prop s
to create environments through whi ch to create environments through whi ch
dancers moved, and more important, into dancers moved, and more important, into
which they bl ended. which they bl ended.

Obtrusive images Unobtrusive images

Make sure there is enough contrast between foreground
and textured background

User will not be able to User will be able to

read this easily read this easier
• Careful use of special effect.
• Use Dark Type on a Light Background

Easier to read Harder to read

 How Does the Internet Work?
Employ Consistent
• Packet switched networks
– if it uses phone lines, it must work like the
Layouts for
phone system, right? WRONG!
– circuit switched/packet switched
Related
difference
• A better model -- the postal systemWhat Makes the Materials
Internet Go?
– think of a packet as an envelope with an
address
H Protocols -- rules of H Routers -- connect
– point-to-point collection the
androad
distribution
for nets various networks
H Packets H The Internet
– 1-1500 characters Protocol
– travel out of – addresses the
sequence and by packets
various routes How Does the Internet Work?
– tells the routers the
best way to go

Don’t • The Transmission Control Protocol

Change – breaks the info into packets, puts ordering

info on and inserts into IP “envelopes”
– opens the envelopes and reassembles
Formats in the – if packets are missing or damaged, it asks
for retransmission -- parity bits
Midst of a Concept • The User Datagram Protocol (UDP)
– used for short messages only
– doesn’t worry about missing packets
• Use Effective Cropping and Image Placement

Uncropped image Most of the trees and part of

the building are cropped,
emphasizing the student
 For Further Reading Avoid Hyphenation
Marr , David (1982).Vision: A computationalinvesti-
gation into the human representation and process-
and Underlines
ing of visual information.Freeman: San Francisco.
Parker, Roger (1993). Looking good in print: A guide
to basic design for desktop publishing(3rd Edi-
tion). Ventana Press: Chapel Hill, NC. For Further Reading
Peretz, Isabel (1993). Auditoryagnosia: A functional Marr , David (1982).Vision: A computational
analysis. In S.McAdams& E. Bigand (Eds.), investigation into the human representation and
Thinking in sound: The cognitive psychologyhu- of processing of visualinformation. Freeman: San
man audition(pp. 199-230). Oxford University Francisco.
Press: Oxford.
Parker, Roger (1993).Looking good in print: A guide to
Porkorney, Cornel & Gerald, Curtis (1989). Computer basic design for desktop publi
shing (3rd Edition).
Graphics: The principles behind the art and sci- Ventana Press: Chapel Hill, NC.
ence. Franklin, Beedle& Associates: Irvine, CA.
Peretz, Isabel (1993). Auditoryagnosia: A functional
analysis. In S.McAdams& E. Bigand (Eds.),
Thinking in sound: The cognitive psychology of
Underlined and human audition(pp. 199-230). Oxford University
Press: Oxford.

hyphenated Porkorney, Cornel & Gerald, Curtis (1989).

Graphics: The princi
Computer
ples behind the art and sci
ence.
Franklin, Beedle& Associates: Irvine, CA.

Clear
Summary
1. Navigational structures:
• Linear
• Hierarchical
• Non-Linear
• Composite
2. Storyboarding is literally building a story or sample page on
paper that describes roughly the layout.
3. Multimedia interface components:
• Background and texture
• Buttons, icons and picons
• Rollovers and sliders
• Hotspots and menus
• Feedback