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

2. (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

3. (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

4. (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

5. (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

6. (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

7. (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

8. (c) 2001 by The McGraw-Hill Companies, Inc. All rights reserved. 8 8 Layout Example Textual screen design Layout analysis of textual screen design

9. (c) 2001 by The McGraw-Hill Companies, Inc. All rights reserved. 9 9 Layout Example Mixed screen design Layout analysis of mixed screen design

10. (c) 2001 by The McGraw-Hill Companies, Inc. All rights reserved. 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

11. (c) 2001 by The McGraw-Hill Companies, Inc. All rights reserved. 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:

12. (c) 2001 by The McGraw-Hill Companies, Inc. All rights reserved. 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

13. (c) 2001 by The McGraw-Hill Companies, Inc. All rights reserved. 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

14. (c) 2001 by The McGraw-Hill Companies, Inc. All rights reserved. 14 Foreground vs. Background Colors Recommended color combinations and colors to avoid

15. (c) 2001 by The McGraw-Hill Companies, Inc. All rights reserved. 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

16. (c) 2001 by The McGraw-Hill Companies, Inc. All rights reserved. 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

17. (c) 2001 by The McGraw-Hill Companies, Inc. All rights reserved. 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

18. (c) 2001 by The McGraw-Hill Companies, Inc. All rights reserved. 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

19. (c) 2001 by The McGraw-Hill Companies, Inc. All rights reserved. 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