MELJUN CORTES Instructional manual multimedia

CCS FACULTY 1/21

MELJUN P. CORTES, MBA,MPA

MULTIMEDIA A presentation of information combining text, sound, pictures, animation and

video.

Using more than one type of media simultaneously like with text, sound,

moving or still images, music, etc.

Computer based multimedia systems integrate and control presentation of

different media data types, i.e, text, graphics, still images, animation, video,

audio in one or more combination.

MULTIMEDIA SYSTEMS HISTORY

The term ‘multimedia’ was first used in the 60’s to describe presentations

combining photographic slides and audio tape.

Major developments came in 1978 with the launch of the Philips Laser vision

video disc.

This analog system combined audio, still and motion video.

Laser vision led the first interactive video applications.

Laser vision also gave birth to the digital audio compact disc (1982).

This led to CD-ROM and later in (in 1991) to CD(Compact Disc Interactive)

Note the gradual move from analog to digital systems. These systems exist in

order to communicate information.

Communication may use a variety of forms of expression.

CCS FACULTY 2/21


ADVANTAGES OF MULTIMEDIA

More control

More portable

Reusable pieces

Command attention

Enhances information retention

Clarifies complex information

Interacts with your audience

DISADVANTAGES OF MULTIMEDIA

Too detailed

Time consuming

Expensive

MULTIMEDIA COMMON APPLICATIONS

1. Entertainment

2. Computer games

3. Education

4. Computer based training

5. Remote Interaction

6. Tele presence and Tele conferencing

7. Simulation

8. Virtual experiments

9. Visual font ends

10. Online catalogs

11. Prototypes (virtual showroom)

12. CD-ROM titles

13. Interactive Kiosks

14. Content-rich applications

CCS FACULTY 3/21


MULTIMEDIA ELEMENTS

1. Visual Elements

Photographs, drawings, and other still images must be formatted for

computer used and display. Such formats include bitmapped graphics and

vector graphics. Bitmapped graphics represented images as rows and

columns of tiny dots. Vector graphics use mathematical formulas to

recreate the original image and they generally lock better.

Video files can be quite large, so they are usually compressed, a

technique that replaces recurring information, such as one hundred black

dots in a row, with a single piece of information. Data compression can

shrink video files by 95%, but introduces fuzziness.

2. Sound Elements

Sound must also be formatted for computer use. One format store actual

sounds in large files that may require compression. Another format stores

instructions that enable devices called synthesizers to reproduce the

sounds or music. Instruction files are much smaller, but the quality of the

sound reproduction is worse.

3. Organizational Elements

Organization of a multimedia representation is enhanced by hyperlinks,

associations to additional related material. A user points the cursor to

colored or underlined ext or to a small picture, called an icon, and clicks

on a mouse to access the material. Hyperlinks may lead users to

unexpected information.

MUTIMEDIA CONCEPTS ARE BASED ON THREE BASIC ELEMENTS

1. Sound / Audio

Coding

Storage

Music

Speech Processing

CCS FACULTY 4/21


2. Images and Graphics

Representation

Format

Synthesis

3. Video and Animation

Basic media for multimedia systems

Visual representation

Coding and compression

MULTIMEDIA ELEMENTS CHARACTERISTICS

I - TEXT

Text is at this time still the used and accessible medium in the developed

world.

Hypertext can be used as navigational tool.

Hypertext can be used to build conceptual layers of meaning.

Indexing and searching possible.

Of no use to illiterates.

Eyestrain.

Could be used as an ineffective---one can become lost in a “Hyperforest”.

Still the best way to communicate large quantities of information.

Use text to support graphics.

Hypertext can support lateral thinking.

Other media can communicate the message better.

Guidelines in Working with Text

1. Be concise.

Don’t rely solely on text to get your point across.

Text should fill less than half of the screen.

2. Use appropriate fonts.

To enhance readability.

To set the right tone.

CCS FACULTY 5/21


To project the right image.

3. Make it readable.

Serif fonts are easier to read.

Sans serif fonts are heading and small amounts of text.

Decorative fonts are best use for emphasis.

Use 10-12 points for text.

Use larger points for headings.

4. Consider type styles and colors.

Bold, Italic and Underline styles are used for emphasis in print.

They are used for hot words in multimedia.

Clicking on a hot word takes a user to a related information.

5. Use restraint and be consistent.

Generic Font Families

1. Serif – Ex. Times New Roman

2. Sans Serif – Ex. Arial

3. Fantasy – Ex. Lucida Console

II – PICTURES

1. Quick communication

2. Ease of understanding

3. A picture: a 1000 words

4. Visual metaphors can be effective communicators

5. Multiple coding

6. Can be overused

7. Should draw attention to important concepts and not the computer’s

capabilities

8. When it reinforces the lesson’s objectives

9. For amusement

10. For decoration

CCS FACULTY 6/21


11. When not supported by text: Avoid concentrating on graphics to the detriment

effective instruction.

III – SOUNDS

1. Utilize more than one sense; multi coding

2. Can create atmosphere/emotions

3. Allows for illiteracy

4. Ephemeral

5. Deafness

6. To support text or graphics

7. Allow user control of volume etc.

8. When not appropriate: Don’t use to punish

IV – MOVEMENTS

1. Animation creates movement that can not be represented on paper

2. Time consuming/expensive

3. Use only if it enhances the message

4. To grab attention

5. Simulation

6. Present as a series of meaningful chucks

7. When not appropriate: Do not use for motivation or punishment

THE PEOPLE OF MULTIMEDIA

1. Graphic Designers – the art director and production artist rolled into one.

2. Programmers – the programmer and the designer must get along very

well because these two forms the most basic team unit and are always

working hand to realize one vision.

3. Producers – they handle all the business aspects of a project, including

client relations, and work with the Project Manager to ensure that all

elements of a project come together on time and within budget.

CCS FACULTY 7/21


4. Project Mangers – they are responsible for over seeing the project’s

timeline and resources.

5. Writers – creative and technical writers may be needed to develop

everything from characters and stories to polished and effective text.

6. User Interface Designer – User Interface Design is the process of

ergonomically and strategically presenting media in order to communicate

a message.

7. Sound Designers – well-executed voice-overs, original composition, and

vibrant sound effects designed expressly for a multimedia environment do

wonders for a titile.

8. Videographers - because video, like sound, is inherently linear, the same

careful planning and creative thinking goes into every “mega byte” of

multimedia video.

9. 3D and 2D Animators – multimedia usually involves of animation of some

sort. It maybe as simple as the creation of “highlight” states (graphics that

acknowledge a users action) or as complex as developing entire worlds

and charters and bringing them to life.

TIME LINE

A reference tool.

A media production schedule (used by production managers to coordinate the

various development efforts).

The overall multimedia design and development process.

PHASES OF TIMELINE

1. DESIGN PHASE- encompasses all the initial steps, from brainstorming and

story boarding to the creation and user testing of the prototype.

a. Brainstorming

- The first phase which involves a tight group of about 3 to 7 key people,

including a designer, a programmer, and anyone else important to the

particular project.

CCS FACULTY 8/21


b. Storyboarding

- Serve the purpose of roughly illustrating a concept and inspiring people

to think of possibilities.

- Should showcase the entire key screens, or “places”, that compromise

the proposed title.

- Paint the initial picture of multimedia concept.

c. Places

- The organization of a multimedia title.

- When conceptualizing a multimedia project, you need to think about all

the different places that you will need to accommodate the given

content.

d. Flowcharts

- Complements the storyboards by giving a sense of organization and

navigation to a multimedia design concept.

- Begins to “wire” together all the places mentioned in the storyboards.

e. Paper Design

- Will act as a blueprint for the entire project’s development.

- It covers the structural design and the software strategy, as well as the

media production requirements and the user interface design.

- Consists of the following documents.

a. Original storyboard

b. Flowchart indicating the architectural structure and general

navigation through the title

c. Detailed “Functional Spec”---details of the action on the screen and

illustrates how the user interacts with it.

f. Prototype

- There are (2) approaches in creating a prototype:

a. To use a friendly authoring tool for the sole purpose of mocking up

the user interaction and the graphic style.

b. To pick a small cross section of the title and use your intended-

authoring tool to put together a prototype.

CCS FACULTY 9/21


g. User Testing

- An important exercise that should occur throughout the design and

development process.

- A few hours spent testing your prototype with a focus group can save

hundreds of production hours later on.

2. DEVELOPMENT PHASE – is a broken down into a few sub phases: the

alpha, beta and finally, the golden master.

a. Alpha

- There should not be any “bugs” that block access to the major features

or places of the title.

b. Beta

- The last round of final media production, programming , and testing

before a title is declared finished and ready for duplication.

- There should be only minor bugs left in the title.

- Fine-tuning.

c. Golden Master

- From disc, all the rest are pressed then packaged and distributed.

ARCHITECTURE OF MULTIMEDIA

1. Hierarchy

- One of the simplest ways to organize a multimedia title.

- This structure features a main menu screen that branches into other

areas of the title.

- Depending upon the scope of the title, there may be multiple submenu

screens branch users deeper and deeper into the tile.

- Disadvantage: Users frequently get lost in large titles because they

lack ability to step back trough the title and there is often more than

one route to the same place.

2. Linear

- Media are presented more or less sequentially.

CCS FACULTY 10/21


- Titles with a linear structure follow a predetermined course of action,

but offer localized interactions along the way.

- Users are able to trigger animated sequences, “flip” forward and back,

or jump to any section of the title.

3. Multi track

- This structure features multiple streams of synchronous media.

- Users control which “tracks” of media that they view or participate in

as they roll forward through the title.

4. Interactive Stories

- Multimedia structure that features on the stories which the audience

has control over its presentation.

- Two structures featured:

a. Branching Story Structure – each ending of the story is the result of

a unique set of decisions made throughout the story by the reader.

Each reader starts at a common “trunk” and then branches out

along different paths until he or she reaches a unique ending.

b. Web Structure – titles of this nature generally start out with a short

linear sequences, or “cut-scene”, that set the stage, introduces the

characters, and provides information about the adventure that

awaits you. Once the cut scene is over, you are left to explore a

“web” of places where you can collect clues and meet more

characters.

5. Visual Space

- It consists of a familiar multidimensional space, such as room or even

a book, presented in such a way that users intuitively know how to

navigate through it.

6. Modular

- Some multimedia titles are the result of multiple independent media

objects coming together in different ways to create a custom

experience for the user.

- Advantages:

CCS FACULTY 11/21


a. Uses enjoy the flexibility of creating their own title based on their

interests or needs.

b. Titles of this nature can be continually expanded because new

media objects can always be developed.

7. Constructive

- This feature a collection of independent media objects, but each object

has a set of behaviors that have been engineered to create interesting

and sometimes unpredictable interactions.

- The whole design paradigm of constructive title is based on cause and

effect.

8. Simulation

- Multimedia is an excellent medium for emulating real-life systems.

- In multimedia simulation, individual objects have been designed with a

set of “behaviors” that respond to conditions set by the user.

GRAPHIC PRODUCTION

I – Tools of the Trade

- Software for creating multimedia imagery.

Software that make up the cornerstone of multimedia graphics production:

1. Adobe Photoshop

- The single most powerful software workhorse for creating the imagery

found in most multimedia and online application today.

- Allows you to edit and manipulate an image, to access and edit all

three RGB plates that together make up an image.

- A bitmap-based program, made up of a collection of colored pixels in a

fixed resolution defined by dots per linear inch.

2. Adobe Illustrator

- A vector-based program, images are defined by points connected by

lines and curves that create mathematical outline.

CCS FACULTY 12/21


- Advantage of Adobe Illustrator is it can create graphics that are

resolution independent.

3. Equilibrium DeBabelizer

- It’s an Automated Image Editor

When you edit one image, DeBabelizer can perform the same

commands on tens, hundreds, or even thousands of other files

automatically. DeBabelizer saves you hours of time by automating

more than 300 image editing commands, including many not available

in PhotoShop.

- It’s An Automated Graphics Optimizer

Now you can finally reduce file size safely without risking picture

quality DeBabelizer’s has suite of graphics optimization tools, including

the award winning SuperPalette engine, are the best in business.

- It’s the World’s most Powerful File Converter

Do you create graphics for both print and the Web? Why create

graphics twice when you can automatically convert them with

DeBabelizer? DeBabelizer reads and writes more than one hundred

file formats including GIF< JPEG< TIF< Quick Time, and PhotoShop.

- It’s the solution for Automating your Graphics Workflow

DeBabelizer ties together all of it’s editing, optimizing and conversion

feature in one easy-to-use drag and drop interface. Now you can

harness the awesome automated graphics production power of

Debabilizer in no time at all. You might just wonder why you ever did

anything manually.

Other Softwares:

1. Macromedia Free Hand

A vector-based like Illustrator. Complex Free Hand files,

when opened in Photoshop, does not always convert to

bitmaps.

2. Fractal Design Painter

CCS FACULTY 13/21


A bitmap-based program like Photoshop that specializes in

emulating traditional fine art media such as charcoals and

oils.

II – Hardware

- Basic hardware configurations for multimedia designers.

1. Computers

- Most graphic designers are Macintosh computers.

2. Monitors

- Size of the monitor, at least 17inches.

- Be sure that your monitor is capable of displaying thousands, if not

millions, of

colors at a time.

3. Removable Storage

- Two companies that have set the standard for removable storage are

Iomega and SyQuest.

- Iomega:

a. Zip drive – a small, lightweight, and portable drive that reads

100-megabyte cartridges that are the size of a floppy.

b. Jazz Drive – a small, lightweight, and portable, but their floppy-

size cartridges each hold 1 gigabyte of media.

- SyQuest:

a. 44-megabyte cartridge and 88-megabyte cartridge.

b. A smaller more portable drive that reads 270-megabyte floppy-

size cartridge.

4. Tablets

- Tablets come in a variety of sizes from 12”x 12” to 6”x4”.

5. Scanners

a. Flatbed Scanners – used for scanning flat images only.

b. Slide Scanners – used for scanning slides.

CCS FACULTY 14/21


III- Mutimedia Canvas

- Onscreen resolution

1. Onscreen resolution

- The computer screen has a fixed number of “slots” in which to display

pixels generally 72 slots per linear inch (referred to as “72dpi” dots per

inch).

2. Image Size versus Resolution

- Images that are not 72 dpi are displayed according to their resolution

rather than their actual size.

3. Matching Image and Monitor Resolution

- When designing onscreen graphics, it almost goes without saying that

the resolution of your images should match the resolution of the

display monitor.

4. Screen Dimensions

- Consumers do not usually buy the larger 17” and 21” monitors, so in

order to reach the largest audience, you need to design multimedia

products that fit within the confines of the smaller monitors.

5. Color Palette

- The color spectrum of the RGB computer screen encompasses

millions of color possibilities.

IV- Image Capture

- Ways to capture image into the computer

1. Scanning

- The most common way to digitize image is through the use of a

scanner.

Scanning Tips:

When scanning color images on a flatbed scanner, it is best to scan in

24-bit color and at 150 dpi. In multimedia, your target resolution is usually

72 dpi, so scanning at 150 dpi is about right. This rule applies only when

CCS FACULTY 15/21


the size of the image you are scanning is the correct size or larger. If you

need to enlarge the image, then you should scan at a higher resolution.

Reducing Image Resolution. It is always best to capture as large an

image as possible in the scanning process and then reduce the resolution

with a tool like Photo Shop. A large original scan gives you more options

when it comes to downsizing your image.

Avoiding Interpolation. What you want to avoid at all costs is bumping

images up to a higher resolution (enlarging images). The resolution is

increased by adding artificial dots between the dots gathered by the

scanner. Interpolated data is only as good as the original information and

only makes the image worse when the image is of poor quality to start

with. High resolutions are only needed for those images that need

enlarging.

Purchasing a scanner for capturing images that will eventually be

outputted to print then the resolution of the image should be determined

by the output device. Scanning at higher resolutions will only waste

valuable time and disc space. Redundant data will be disregarded by the

printer and there will be no benefit in image quality. If outputting to print

the majority of applications will be handled easily with 300 x 600 dpi

optical resolution scanners.

1. Digital Cameras

- Like conventional 35mm cameras, digital cameras use optical lenses.

However, rather than capturing the image to film, the image is captured

with a CCD chip and stored internally either as analogue or digital signals.

The images can be transmitted over networks and telephone lines,

displayed on the screen and printed. The speed with which images can be

produced and transmitted is of great value to people who need images

fast. In instances where the images are stored as analogue, one still has

to plug the camera and disc into a digitising board. The images once

captured can then be altered in the appropriate way.

CCS FACULTY 16/21


3, PhotoCD

- PhotoCD is a digital image format and provides a mechanism for

high resolutions. PhotoCD images can be manipulated further using image

processing software.

4. Twain

- Twain is a protocol which defines how bitmapped images from

scanners and other image capture devices can be captured directly

into image processing packages. For example, image manipulation

software such as Aldus Photostyler, Adobe Photoshop and Micro grafix

PhotoMagic are TWAIN aware and can directly capture images from

source. TWAIN drivers are supplied with the image capture hardware.

5. Cataloguing/Indexing Images

- When capturing images and storing them on analogue or digital

storage devices, one area that is often forgotten is that of cataloguing.

With analogue systems, the images are often stored and referenced as

time-codes or frame numbers. With digital systems one is limited to a

filename of a few characters (eight letters on current IBM compatible

PC's) which is often insufficient for immediate recognition. Imagine you

have several thousand images stored on a compact disc and you need

access to those that illustrate a particular object or scene.

V - Graphic Layers

- Purpose of the Graphic Layers Framework

- The Graphic Layers Framework, GLF, provides a foundation for easy

creation of rendering effects, such as Recessed Shadow or Shape

Texturizing.

The creation of such effects is characterized by:

Repetitive tasks. Rendering operations (for example, filling Shapes) are

repeated many times and are combined to obtain the desired results.

CCS FACULTY 17/21


Large number of options. The rendering options are numerous, from color

settings, to transparency values, to transformation adjustments. Modifying

and visualizing the result of various settings can be a daunting task.

Use of the API's extensible design. The Java 2D API offers a lot of

capabilities. Its open design allows it to be extended to achieve even

richer rendering effects. For example, new types of fills can be added by

creating new Paint implementations.

The Graphic Layers Framework addresses those three characteristics by

providing the following:

1. Layers as reusable rendering components. (This is where the framework's

name comes from.) The framework provides prepackaged rendering

operations in the form of prepackaged com.sun.glf.Layers. For example,

the com.sun.glf.ShapeLayer class supports automatic rendering of a

Shape. Layers are natural building blocks for creating effects with 2D

techniques, and this paradigm is used in many graphics tools.

2. Configuration framework and utilities. The framework provides utilities and

tools to deal with the large number of configuration parameters and to

enable experimentation with different settings.

3. API extensions. The framework provides several extensions to the Java

2D API: different Paint and Stroke implementations, but also Buffered

Image filters and Composite implementations.

VI – Key Color Transparency

Transparency is possible in a number of graphics file formats. The term

transparency is used in various ways by different people, but at its simplest there

is "full transparency" something that is completely invisible. Of course, only part

of a graphic would by fully transparent, or there would be nothing to see. More

complex is "partial transparency" or "translucency" where the effect is achieved

that a graphic is partially transparent in the same way as colored glass. Since

ultimately a printed page or computer or television screen can only be one color

CCS FACULTY 18/21


at a point, partial transparency is always simulated at some level by mixing

colors. There are many different ways to mix colors, so in some cases

transparency is ambiguous.

In addition, transparency is often an "extra" for a graphics format, and some

graphics programs will ignore the transparency.

Raster file formats that support transparency include GIF, PNG, and TIFF,

through either a transparent color or an alpha channel.

Most vector formats implicitly support transparency because they simply avoid

puttting any objects at a given point. This includes EPS and WMF. For vector

graphics this may not strictly be seen as transparency, but it requires much of the

same careful programming as transparency in raster formats.

More complex vector formats may allow transparency combinations between the

elements within the graphic, as well as that above. This includes SVG and PDF.

A suitable bitmap graphics editor shows transparency by a special pattern, a

chessboard pattern.

Key Color Transparency

1. Transparent pixels - One color entry in a single GIF or PNG image's

palette can be defined as "transparent" rather than an actual color. This

means that when the decoder encounters a pixel with this value, it is

rendered in the background color of the part of the screen where the

image is placed, also if this varies pixel-by-pixel as in the case of a

background image.

Applications include:

http://en.wikipedia.org/wiki/GIF

http://en.wikipedia.org/wiki/PNG

http://en.wikipedia.org/wiki/TIFF

http://en.wikipedia.org/wiki/Alpha_channel

http://en.wikipedia.org/wiki/EPS

http://en.wikipedia.org/wiki/WMF

http://en.wikipedia.org/wiki/SVG

http://en.wikipedia.org/wiki/PDF

http://en.wikipedia.org/wiki/Bitmap_graphics_editor

http://en.wikipedia.org/wiki/Transparent

http://en.wikipedia.org/wiki/Image

CCS FACULTY 19/21


an image that is not rectangular can be filled to the required rectangle

using transparent surroundings; the image can even have holes (e.g.

be ring-shaped)

in a run of text, a special symbol for which an image is used because it

is not available in the character set, can be given a transparent

background, resulting in a matching background.

The transparent color should be chosen carefully, to avoid items that just happen

to be the same color vanishing.

Even this limited form of transparency has patchy implementation, though most

popular web browsers are capable of displaying transparent GIF images. This

support often does not extend to printing, especially to printing devices (such as

PostScript) which do not include support for transparency in the device or driver.

Outside the world of web browsers, support is fairly hit-or-miss for transparent

GIF files.

2. Edge limitations of transparent pixels - The edges of characters and other

images with transparent background should not have shades of grey

these are normally used for intermediate colors between the color of the

letter/image and that of the background, typically shades of grey being

intermediate between a black letter and a white background. However,

with e.g. a red background the intermediate colors would be dark red, and

grey edge pixels give an ugly and unclear result. For a variable

background color there are no suitable fixed intermediate colors.

3. Partial transparency by alpha channel - PNG and TIFF also allows partial

transparency, which solves the edge limitation problem. However, support

is even more patchy. Microsoft Internet Explorer does not support partial

transparency in a PNG graphic. Very few applications correctly process

TIFF files with alpha channels.

A major use of partial transparency, but not the only one, is to produce

"soft edges" in graphics so that they blend into their background. The process of

http://en.wikipedia.org/wiki/PostScript

http://en.wikipedia.org/wiki/Shades_of_grey

http://en.wikipedia.org/wiki/Microsoft_Internet_Explorer

CCS FACULTY 20/21


combining a partially transparent color with its background ("compositing") is

often ill-defined and the results may not be exactly the same in all cases. For

example, where color correction is in use, should the colors be composited

before or after color correction?

4. Transparency by clipping path - An alternative approach to full

transparency is to use a clipping path. A clipping path is simply a shape or

outline, that is used in conjunction with the other graphics. Everything

inside the path is visible, and everything outside the path is invisible. The

path is inherently vector, but can potentially be used to mask both vector

and bitmap data. The main usage of clipping paths is in PostScript files.

User Interface Design

The process of ergonomically and strategically presenting media in

order to communicate a message.

It’s about designing an entire experience for people. It involves 2

aspects.

A. Psychological – such as building a mental picture in a user’s mind

of how something works.

B. Ergonomic – such as navigation and ways in which multimedia

responds to a user’s actions.

Provides a structure and an environment that best communicate

contents.

CCS FACULTY 21/21


Steps in Designing A User Interface

1. Identify your Audience and Message

- The first step is to determine who your audience is and what you are

trying to say to them.

2. Determine the Setting

- Designers need to know how and where users will be interacting with a

multimedia title.

3. Create an Experience

- Another decision you need to make is about the kind of experience that

you want users to have.

I– Form and Function

Figure out how to implement the title in terms of actual functionality.

The following guideline are helpful when thinking about questions of

functionality;

1. Less is more – determine how much functionality users really need

especially at one time.

2. Consistency – decide on the functions that users should always be able to

access wherever they are in the title.

3. Three Steps Away – do not bury functions and places so deep in a title

that they are more than three clicks away from one location.

4. Transparency – Good interface design can be judged by the degree that it

goes unnoticed. The most transparent interfaces are those in which all

functionality is embedded in the content.

5. Anticipation – Multimedia that anticipates a user’s actions and provides

the appropriate functions at the right time creates a more dynamic

experience and supports the “Less is More” philosophy.

CCS FACULTY 22/21


II – Bars, Panels and Drawers

A common way to handle functionality in title is to group functions in a

special location such as a navigation bar, a control panel, or a drawer.

1. Navigation Bar – provide a dedicated space for navigational functions

such as quitting, going back, and moving from place to place.

2. Control Panels – provide a dedicated space for global functions (functions

the user has access to at all times).

3. Drawers – collapsed, “closed” state.

III – Ergonomics

The scientific study of human factors in relation to working

environments and equipment design.

The “laws of work”.

Properties that facilitate interaction:

a. Visibility - Visuals play a key role in user interface design because

people rely heavily on eyesight to interact with the world.

b. Conceptual Model – Metaphorical models help people navigate

through multimedia by giving them a strong “Sense of Place”.

c. Feedback – When people interact with machines, they expect some

form of acknowledgement to help them determine that what they

are doing is correct or that everything is in proper working order.

d. Mapping – Designers need to present interface functions in such a

way that the user’s expectations of what will happen match the

actual results when clicked. The best way to find out how well your

interface functions map to people’s expectations it to conduct user

test.

CCS FACULTY 23/21


IV – Hot Spots

The areas on the screen that is currently interactive.

Part of the user interface design problem is to think of ways to identify

these areas by using not only metaphorical visual clues but it also

audio and animated feedback.

1. Feedback

- An important part of multimedia user interface design, feedback not

only lets users know whether or not the computer is responding, but it

also may help to guide the flow of user interface.

2. Roll-over and Highlights States

- To help identify hot spots, a common user interface design practice is

to provide animated “roll-over” states. These are altered graphics that

display themselves when the user simple “rolls” over a hot with the

cursor.

V – Metaphors and Affordances

1. Metaphors

- Reveal a title’s conceptual model of interaction. Because interacting

with a computer can be an abstract way of information, it helps to use

familiar conceptual models to orient users.

2. Affordances

- The little details that tell us specifically what the images are and how

we should use them.

VI – Music and Sound

Music and sounds can contribute immensely to interface design.

Metaphors and affordances are not limited to visual clues but can also

be established with sounds.

1. Sounds Effects

- Multimedia designers can use music and sound effects not only to help

clarify an interface, but also to add depth to a user’s experience.

CCS FACULTY 24/21


2. Background Score

- The background score helps establish the place of the action, set the

mood, and can even build anticipation and suspense.

VII – Agents, Guides and Characters

The use of “personalities” in multimedia provides a very different “feel”

to the experience. Personalities can make a title seem more

personalized or service-oriented, or they can add an element of humor

or cynicism.

1. Agents

- An Agent is a character or object that carries out interactions for the

user- much like a personal attendant.

2. Guides

- A Guide is a simplified version of an agent that offers suggestions or

help during an interaction.

3. Characters

- Characters are personalities that live within a title.

- Characters are part of the content of a title. Sometimes they respond to

the user’s interactions, but mostly, they are just part of the show.

Technology

MELJUN CORTES Instructional manual multimedia