Multimedia Screen Design

1. Multimedia Screen Design Lynne Koenecke Applied Computer Science Illinois State University, 1997

2. Text • place the title for a screen on the top line with at least one blank line before the body of the text • use left justification • organize complex information into tables • use various type sizes and fonts to emphasize certain materials and provide variety Garner (1990)

3. Text • utilize bold for higher-level information (titles and headings) • avoid hyphens to split words at the end of lines • use mixed upper and lowercase letters for higher legibility and faster reading • omit punctuation for abbreviations, mnemonics, and acronyms Garner (1990)

4. We read by recognizing patterns: http://info.med.yale.edu/caim/manual/pages/typography.html

5. We read by looking at the tops of words. http://info.med.yale.edu/caim/manual/pages/typography.html

6. Type • most guidelines tend to be based on print research • legibility (leading - default is 2pts.) • readability • dark letters on a light background are more readable than the reverse • size (10-12 point for print, 14 or 16 for screen)

7. 20 points

8. 72 points = 1 inch 72 pt. Times New Roman 72 pt. Arial

9. Graphics • Text can be balanced with diagrams or graphics • Graphics: • provide information as alternative to text • provide sources for questioning and responding • illustrate an effect • summarize a lesson part

10. Graphics • enliven a presentation • emphasize a relationship • focus attention • convey a message or concept

11. Graphics Dos • use simple, clear images • use for instruction, motivation or attention-focusing effects, not for making the screen pretty • label all key components • consider prior knowledge • avoid sexist, culturally-sensitive and other offensive imagery • obey standard conventions (standard symbology)

12. Color • The average person is able to distinguish between 10,000 and 20,000 colors • Monitors today can display well into the millions of colors

13. Color • Additive vs. Subtractive • Inks are subtractive CMYK • Light is additive RGB

14. Color • Humans see color as • HSL (Hue, Saturation, and Lightness) • Hue • basic component of color • Saturation • purity of hue • Lightness • amount of light reflected

15. Color • Color adds accents • Can add memory and enhance information understanding • Enlivens and informs the user • Makes displays attractive and emotionally appealing • Views usually better understand when viewing color vs. monochrome

16. Color • links logically-related data • differentiates between required and optional data • highlights student errors • separates various screen areas • prompts, commands, input/output fields • emphasizes key points • communicates overall structure Rambally and Rambally (1987) and Strickland and Poe (1989)

17. Color • use a maximum of 3-6 colors per screen • be consistent in color choices within a program • use the brightest colors for the most important information • use bright colors to cue the learner for new information • use a neutral gray as a background • gray recedes optically Bailey & Milheim, 1991

18. Color • use significant contrast between text and a background color to provide a higher degree of text readability • avoid the use of complementary colors • blue/orange • red/green • violet/yellow

19. There was a cool breeze.

20. There was a cool breeze.

21. There was a cool breeze.

22. Color • use commonly accepted colors for particular actions (remember these may only be culture specific) • red for stop or warning • yellow for pause or consideration • green for go or proceed

23. Color • Backgrounds cool, dark, low-saturation colors recede on the screen • olive green, gray, blue, brown, dark purple, black, etc. • Foregrounds brighter colors come forward on the screen • lemon yellow, pink, orange, red, etc.

24. Color • Light colors give impressions of • large sizes • light weights • tall heights • close distances • Dark colors give impressions of • small sizes • heavy weights • short heights • far distances

25. Color • Changes in color to signify changes (small and large) • blue to green signifies a small change • blue to orange signifies a large change

26. Being Careful With Color • If colors are not appropriately used or the designer uses too many colors, we can create visual noise (1+1 = 3) • “Above all, do no harm” Tufte (1990) • too much color is distracting

27. Let’s Use Every Color • This software is great. • I can use lots of colors. • Let’s not waste these colors. • What is your favorite color? • Graphics have lots of colors!

28. Problems With Color • Color blind users • It is estimated that over 2% of the population have some sort of sensitivity to color reception • Most common is not color blindness, but color weakness • 1% of the population is weak in perception of red • 5% of the population is weak in perception of green • up to 15% of the population has some kind of color deficiency

29. Problems With Color • Color insensitivity solutions • Instead of using different hues, use different saturations or different levels of lightness • Don’t use bright red and bright green, use bright red and pale green • Use consistent shapes in addition to color

30. Problems With Color • Problem colors • The eye cannot precisely focus on all colors together • Red and Blue can’t be focused on together this causes eye strain • The center of the retina has virtually no blue receptors • small blue objects almost disappear when we try to focus on them

31. Blue type on red is hard to read. It causes eye strain.

32. Problems With Color • Problem color solutions • Avoid pure, saturated colors at opposite ends of the spectrum • Don’t use blue for fine lines and text

33. Responding to Color • Not everyone responds to color the same • cultural differences • gender • age • occupational differences

34. Responding to Color • cultural differences • In Japan, green implies youth in energy, but in France it connotes criminality • In the US, yellow stands for caution, while it signifies happiness and prosperity in Egypt • gender • Several studies show differences in color perception between males and females

35. Responding to Color • age • Older people prefer bright primary colors • it is thought that color acuity declines with age • Children are not able to use color coding as quickly as adults

36. Responding to Color • occupational differences • Blue • represents corporate reliability to financial managers (as in “Big Blue” IBM) • represents death to health care professionals (as in “code blue”) • Red • represents danger to process control engineers • represents healthy to health care professionals