(c) 2001 by The McGraw-Hill Companies, Inc. All rights reserved.1

Multimedia Literacy

(c) 2001 by The McGraw-Hill Companies, Inc. All rights reserved.2 2

Learning Objectives

Arrange text in the proper size, color, and font on a multimedia screen

Choose an appropriate background color and understand how foreground text colors interact with background screen colors

(c) 2001 by The McGraw-Hill Companies, Inc. All rights reserved.3 3

Learning Objectives (cont.)

Arrange pictures on the screen either as background images or design elements for text to flow around

Make text stand out against a background photo

Adopt a common look and feel for the screens in your application

(c) 2001 by The McGraw-Hill Companies, Inc. All rights reserved.4 4

Overview

Layout Font Selection Text Sizing Foreground Versus Background Colors Placing Text on Photographic Backgrounds

(c) 2001 by The McGraw-Hill Companies, Inc. All rights reserved.5 5

Overview (cont.)

Arranging Text and Pictures on the Screen User Friendliness Metaphors Adopting a Common Look and Feel

(c) 2001 by The McGraw-Hill Companies, Inc. All rights reserved.6 6

Layout

Is the relationship between various multimedia design elements– Text– Pictures– Icons– Triggers– Buttons

(c) 2001 by The McGraw-Hill Companies, Inc. All rights reserved.7 7

Layout (cont.)

Plan the screen’s layout so that the content is represented with good balance

Divide the screen in larger regions and define the content of these regions

The screen should contain intuitive navigation control to make it user friendly

(c) 2001 by The McGraw-Hill Companies, Inc. All rights reserved.8 8

Layout Example

Textual screen design Layout analysis of textual screen design

(c) 2001 by The McGraw-Hill Companies, Inc. All rights reserved.9 9

Layout Example

Mixed screen design Layout analysis of mixed screen design

(c) 2001 by The McGraw-Hill Companies, Inc. All rights reserved.10 10

Font Selection

Hundreds of different fonts are available The selected font must be installed on the

viewer’s computer to be displayed as intended

Times New Roman

Courier New

Arial

Symbol

Wingdings

(c) 2001 by The McGraw-Hill Companies, Inc. All rights reserved.11 11

Font Selection (cont.)

Mono-spaced fonts– Each letter takes up

exactly the same space– Suitable for information

that requires vertical alignment

Proportional fonts– Wide letters take up more

space than thin letters

Courier New – A mono-spaced font

Times New Roman – A proportional font

Example:

(c) 2001 by The McGraw-Hill Companies, Inc. All rights reserved.12 12

Font Selection (cont.)

Serif font– Contain lines stemming at

an angle from the ends of the strokes of a letter

Sans serif font– Does not contain serifs

(c) 2001 by The McGraw-Hill Companies, Inc. All rights reserved.13 13

Text Sizing

Measured in points Points define how high a

character is One point is about the

height of a single pixel on a 640x480 computer screen

(c) 2001 by The McGraw-Hill Companies, Inc. All rights reserved.14 14

Foreground vs. Background Colors

Recommended color combinations and colors to avoid

(c) 2001 by The McGraw-Hill Companies, Inc. All rights reserved.15 15

Placing Text on Photographic Backgrounds

Exercise care when placing text on photographic backgrounds

Some photos are so busy that text can be difficult to read

A drop shadow may improve readability

(c) 2001 by The McGraw-Hill Companies, Inc. All rights reserved.16 16

Arranging Text and Pictures on the Screen

Use text overlay sparingly It is better to position text above or below a

picture, or to flow text around a picture Navigational icons should be be lined up in the

same region of the screen

Suggested sequence of icons

(c) 2001 by The McGraw-Hill Companies, Inc. All rights reserved.17 17

User Friendliness

Multimedia screens must be easy to use Navigational buttons, icons, or hypertext are

necessary Navigational icons are language independent Use a consistent scheme

(c) 2001 by The McGraw-Hill Companies, Inc. All rights reserved.18 18

Metaphors

Way of thinking about new media in terms of something the user already knows

For example, when an application launches a series of images that will be shown sequentially, a metaphor of a slide show could be helpful

(c) 2001 by The McGraw-Hill Companies, Inc. All rights reserved.19 19

Adopting a Common Look and Feel

Avoid the temptation to demonstrate every trick you know

Keep it simple A common look and feel helps the user to

navigate and interact intuitively Think like a user