Chapter 5

Designing for Multimedia

1
Designing
Two approaches:
Spend great effort on storyboards, describe
project in exact detail.
Less-detailed storyboards, more effort rendering
the product.
Depends on whether same person do design
and implementation.
The more planning on paper, the easier to
construct project.

2
Navigation
Navigation Map
Provides table of content and chart of the logical flow of the
interactive interface.
Fundamental organizing structures used in
multimedia projects:
Linear: Navigate sequentially.
Hierarchical: Navigates along the branches of tree structure
Nonlinear: Navigate freely through the content.
Composite: Users may navigate freely, but are occasionally
constrained to linear presentations of movies or critical
information that is most logically organized in a hierarchy.

3
Navigation (cont)
Many navigation maps on nonlinear
Viewers free to jump to an index, glossary,
various menus, Help or About.
Important to give viewers the sense that
free choice is available.
Should still provide consistent clues
regarding importance, emphasis, and
direction by varying typeface and look.
Color, indenting, special icons.

4
Navigation (cont)
Keep messages and content organized
along a steady stream of the major
subjects ,letting users branch outward
to explore details.
Provide a secure anchor, with buttons
that lead to expected places, and build
familiar landscape to which users may
return at any time.
5
Navigation (cont)
If material deals with a chronology of events
occurring over time, may design the structure
as a linear sequence of events and then send
users along that sequence.
Even within linear, time-based structure, can
still sort events into categories regardless of
when they occur.

6
Creating the Appearance
Balance
Refers to the distribution of optical weight in the
layout
Optical weight is the ability of an element to
attract the users eyes
Optical weight of an element is determined by its
nature (shape, color, brightness and type) and size
Balance is determined by the weight of the
elements and their position on the screen.

7
Creating the Appearance
Symmetrical balance is achieved through
arranging similar elements
Symmetrical design is appropriate for
multimedia titles that focus on corporate
image.

8
Creating the Appearance (cont)
Asymmetrical balance is achieved by
arranging dissimilar elements. Typically off-
center or created with an odd or mismatched
number of disparate elements.
Asymmetrical design is dynamic and suggests
diversity and informality (suitable for
entertainment titles where movement and
discovery are very important)

9
Creating the Appearance
More Optical Weight Less Optical Weight

Large Small

Dark Light

Color Black, White, Gray

Irregular shapes Regular shapes

10
Ways to Achieve Balance in Design
Use even numbers of elements of equal
weight (symmetrical)
Use two or more elements of smaller weight
to balance one large element (asymmetrical)
Enclose text in a box or use color background
to give more weight
Surround a dark graphic with abundant white
space.

11
Viewers Perceptions
Larger objects are thought to be more
important
Objects that are located higher on the
screen are considered important
Color can imply significance
Too many objects too close together
may give the impression of clutter and
disorganization.

12
Unity
Concerns with how the various screen
elements relate to one another how they fit
in
An elements that seems out of place can be
disconnecting to the user and distract from
achieving the desired effect of a particular
screen
Unity reinforces the message or theme on
individual screens (intra screen unity) and
provide consistency throughout the title
(inter screen unity)
13
Cont
Unity can be achieved by consistency in
shapes, colors, text styles and themes
Unity applies to the interactive design
as users navigate from one screen to
another.
Unity applies to the design of each
screen and the design of parts of a
screen.

14
Movement
Movement has to do with how the user works
through the elements on the screen
Optical center is referred to a point somewhat
above the physical center of the screen
Viewers tend to read from the upper left to
lower right corner of the screen.
Movement is useful in training and
educational titles in which designers wants
the user to work through the content in more
structured way.
15
Ways to Create Effective Movement
Controlling where the user starts on the
screen by placing emphasis on graphics,
headlines or text block
Creating asymmetrical balance
Using lines or objects that point in a certain
direction
Using color gradients that go from a light
shade to dark shade
Having people or animals looking in the
direction that the user should be looking at
16
Designing for Interactivity
Definition:
When interactivity is built into the
multimedia titles, control is given to the
user
Design need to be user centered
Several things that affect the nature of
interactive design, including audience, type
of titles and content.

17
Designing for Interactivity
Audience:
Designers must understand the users need and
how they work with the product
Designers tends to approach the problem from
his/her own point of view (not the users)
Designers would need to ask themselves some
simple questions in order to come out with the
appropriate screen designs for users what does
the user see on screen and what does the user
want to do

18
Designing for Interactivity
Type of Title
A simple straight forward menu would be required
to display information directly to the users such
as corporate annual report
User would be given more options and movements
should the multimedia application be an
educational titles
User should be able to move from one field to
another easily
Random interaction should be emphasized if it is a
game

19
Designing for Interactivity
Content
Large amount of content
Determine how many levels to navigate
The more levels, the more confused the user
should be
Provide shortcuts in the form of hot words or hot
spots that skip several levels
Replace parts of the original screen with new
content, but leave the shell of the screen intact to
maintain the users frame of reference.

20
Designing for Interactivity
Use pop-up windows that display
additional information
Use scroll bars for text-intensive titles
Provide tabs or book marks that
indicate where the user has been and
allow the user to quickly return to a
previously viewed screen.

21
Designing for Interactivity
Elements used in titles
Depends on which elements is used in the
titles (text, graphic, sound, animation or
video)
Different elements required different
considerations

22
Designing for Interactivity
Nature of the content
The content can suggest a theme that the
interactive design would need to
complement or reinforce

23
Guidelines for Interactive Design
Make it simple, easy to understand and easy
to use
User should be taught how the navigation scheme
and media controls work
From the moment, the first screen appears and
throughout the interactive process, user should
know where they are and where they can go
The initial screen should indicate what is
contained in the title and how to navigate through
it
For each screen presentation, determine if words,
illustrations or icons are most appropriate.
24
Guidelines for Interactive Design
When texts and visuals are used, ensure that
the message are not redundant
Verify the packaging of information does not
overpower the intended message
Use color to enhance communication
Verify that the visuals and icons are culturally
sensitive
Check that the inclusion of visuals and text
truly augments the learning process
Determine the attention value vs. learning
and recall for each screen presentation.
25
Guidelines for Interactive Design
Build in Consistency
Applies to both the appearance of each screen and how the
navigation scheme works.
Using Design Templates
A template is a precise layout indicating where the various
elements will appear on the screen
Provide consistency (each elements of the screen would be
in the same location)
Shorten the development time (reduce time required to
arrange elements on various screens)
Prevent object shift (utilize grids that can specify the exact
layout)

26
Guidelines for Interactive Design
Provide Feedback
Interactivity is a two way process
Users need to be informed when a
particular action had taken place (when
button is clicked, the color of the button
may changed)

27
Guidelines for Interactive Design
Provide choices and escapes
Avoid long introductions of automatically scrolling
text, narration, music or credits
Do not make the user view a video or animation,
or listen all the way through sound clips that may
have already been heard by the user
User need to be able to escape from one screen to
another
Quit button should be made available for the user
to exit from the application
A prompt should appear when the Quit button is
selected to allow the user to confirm the desire to
quit.
28
Guidelines for Interactive Design
Testing the multimedia application
thoroughly before delivering the
multimedia title to the intended
audience:
Test that delivery of materials relates to
the knowledge of the user
Test the effect of how people process
certain illustrations
Test the usability of icons

29
Common Elements in Multimedia Titles

Title Page
Set the opening tone of your title
Purpose is to grab audiences attention
Usually is the name of the multimedia
title/companys name

30
Common Elements in Multimedia Titles

Table of Content
Provides a text based overview of how the
multimedia titles is organized

31
Common Elements in Multimedia Titles

Map
Quick, visual overview of how different
parts of a title relate to each other
Information is presented in a non-linear
fashion
Allows the audience to move freely and
confidently around a title

32
Common Elements in Multimedia Titles

Navigational System
Usually refer to icons such as arrows to
indicate how the audience may navigate
through the entire multimedia application

33
Common Elements in Multimedia Titles

Content
Information that need to be included into
the system
May be reusable
If some of the content cannot be reused,
then new content need to be provided

34
Common Elements in Multimedia Titles

Index or browsing capabilities

Include some way to search for information
Glossary
List down various terminologies that are
linked to the appropriate screens to enable
easy access to frequently used unfamiliar
words.

35
Graphical User Interface
User Interface
Involves designing the appearance
How object is arranged on the screen
and the interactivity how the user
navigates through the multimedia software

36
Graphical User Interface
GUI
User friendly interface that could enable
the user to interact directly with the user
Make the interaction interesting and dual
direction

37
Prominent Features of GUI
It has a bitmapped, high resolution display
It has a pointing device, typically a mouse
It promotes interface consistency between
programs
Users can see graphics and text on their
screen as it looks in print
It follows object-action interaction paradigm
It allow transfer of information between
programs

38
Prominent Features of GUI
There can be direct manipulation of onscreen
information and objects
It provides standard interface elements such
as menus and dialogs
There is visual display of information and
objects (icons and windows)
It provides visual feedback for user actions
and tasks
There is visual display of user/system actions
and modes (menus, palettes)

39
Prominent Features of GUI
There is use of graphical controls
widgets for user selection and input.
It allows user to customize/personalize
interface and interaction
It allows flexibility between keyboard or
other input devices.

40
Widgets

41