Information Presentation on the Web: Unlearning 500 Years of Knowledge

1. Information Presentation on the Web: Unlearning 500 Years of Knowledge Haim Levkowitz Institute for Visualization and Perception Research Department of Computer Science University of Massachusetts Lowell haim@cs.uml.edu http://www.cs.uml.edu/~haim

2. Outline • Focus • Goals • Background, foundations • Examples • Recommendations

3. Focus • “Low-level” visualization • 3-4 attributes • 5-6 applications

4. “Low-level” visualization • No “rocket science” • Simple, well-known attributes • But ignored • Touch many walks of life • Wide range of applications

5. Attributes • Text • Color • Graphics • Overall gestalt

6. Applications • Presentations • Computer screens • User interfaces & interaction • Web pages • Signs (traffic, street, commercial) • Printed material?

7. Goals • Most effective usability • ==> Perception • For info presentation: Aesthetics only secondary!

8. History, Background, Foundations • 1455 Guttenberg’s moveable-type printing press • Beginning of “learning” • 1950s-60s: electronic displays • Mid 1980s: desktop publishing • Beginning of “unlearning” • Mid 1990s: The Web • Full-blown “unlearning”

9. Requirements • Acuity, resolution • Color perception • Text: fonts, size • Contrast • Design

10. Acuity and resolution tan Beta/2 = S/2D S = size D = distance • Visual angle S3 S2 Beta S1 D1 D2 D3

11. Visual angle: some objects • 12 pt. Character on 17” screen at 50 cm: 28’ • Diameter of sun, moon: 30’ • Quarter at arm’s length, 90 m, 5 km: 2o, 1’, 1” • Diameter of fovea: 1o • Diameter of foveal receptor: 30” • Position of inner edge of blind spot: 12o from fovea • Size of blind spot: 7.5o (v), 5o (h)

12. Acuity requirements • Detection: 0.5” (seconds of arc) • Localization (vernier): 2” • Resolution + recognition: 30” • Dynamic (60o/sec motion): 1-2’

13. Color perception • Measured in isolation, perceived in context • Contrast essential • Blue weak • On small samples • Against dark background • Color deficiencies • Color symbolism

14. Pure hue Same hue Complemenatry Apparent brightness Apparent size “Color is colors”—Josef Albers

15. Perceived hue depends on context

16. Complementary colors

17. More on color interaction • Apparent depth relationship Receded Pop out

18. Black Mourning Elegance Profits (business) Red Alert, danger Loss (business) Green Go ahead Environment White Elegance Mourning (orient) Color symbolism

19. “Crimes” • Text • Layout • Background design • Color • Multimedia

20. Text • Font, size, weight • Stacked (vertical) characters • All caps • Distorted baselines • Long lines • Alignment

21. Font, size, weight • Serif for long bodies of text • Sans-serif for headings • On screen/projected: more weight • Minimum size: at least 2.5% of height of screen • Test: readable at arm length Serif | sans-serif Bold | regular 24pt | 20 | 16 | 12 | 10 15” screen ==> ~16 pt.

22. Stacked (vertical) characters Read me Read me

23. All caps READ ME Read Me

24. Distorted baseline a e d r t o h i t s r e d I r t a s i h It is easier to read this

25. Long lines • Hard to read long lines • Most readable • No longer than 1.5-2 times the lowercase alphabet in font, size used

26. Alignment • Most readable • Left-justified (“ragged right”) • Hard to read • Centered, right-justified, justified

27. Layout/design • Too many boxes, borders, underlines Underlined text No underline Boxed diagram Un-boxed

28. Background design Not crowded Crowded

29. Color • Bad contrast • Deficiencies ignored • Red near green • Blue on black • “Las Vegas” effect

30. Bad contrast • Yellow on white • Blue on black • E.g., • Yellow on white • Blue on black • Textured background • Best: yellow/black (bees, road signs) • Also good: white on blue (slides) • Textured background

31. Deficiencies ignored • Red-green, most common • Yellow-blue • Red-green • Yellow-blue

32. Red near green • Vibrate

33. blue Blue on black • Fuzzy

34. “Las Vegas” effect • Too many colors, frames, fonts Window 3 text window 3 text window 3 text Window 3 text window 3 text window 3 text Window 1 text window 1 text window 1 text Window 1 text window 1 text window 1 text Window 3 text window 3 text window 3 text Window 3 text window 3 text window 3 text Window 1 text window 1 text window 1 text Window 1 text window 1 text window 1 text Window 3 text window 3 text window 3 text Window 3 text window 3 text window 3 text Window 3 text window 3 text window 3 text Window 3 text window 3 text window 3 text Window 2 text window 2 text window 2 text Window 2 text window 2 text window 2 text Window 2 text window 2 text window 2 text Window 2 text window 2 text window 2 text Error message error message error message Error message error message error message

35. Multimedia • Motion sickness! • Blink • Animated GIFs • Java animations • ....

36. The Good, The Bad, The Ugly • Where is the good? • Hard to find • Lots of bad and ugly • Just a few examples

37. Bad color contrast • http://www.att.com/ucs

38. Bad background contrast • http://www.cdromworld.com/special.htm

39. Small text, hard colors • http://www.e3central.com

40. Busy • http://www.e3expo.com

41. Tough color contrast, busy • http://www.Intellifax.com

42. Colors, small text, busy • http://switchboard.com

43. Busy • http://switchboard.com, results

44. You tell me! • http://www.comradery.com/e3/crindex.html

45. http://want2dance.com

46. http://www.subjectmatters.com

47. http://lynda.com

48. Many more • http://www.cameracare.com • One of the worst • http:// www.sony.com • Search results, blue on black • http:// www.metway.at/photo/nikon1.htm • Disturbing background • Plenty more

49. Traffic & road signs • School bus • “Please do not tailgate” • Vertical street signs • “Can’t read” color contrast • More

50. On back of school bus UNLAWFUL TO PASS WHEN RED LIGHTS ARE FLASHING Unlawful to Pass When Red Lights are Flashing