1. Institute for Visualization and Perception Research 1 © Copyright 1998 Haim Levkowitz 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. Institute for Visualization and Perception Research 2 © Copyright 1998 Haim Levkowitz Outline Focus Goals Background, foundations Examples Recommendations

3. Institute for Visualization and Perception Research 3 © Copyright 1998 Haim Levkowitz Focus “Low-level” visualization 3-4 attributes 5-6 applications

4. Institute for Visualization and Perception Research 4 © Copyright 1998 Haim Levkowitz “Low-level” visualization No “rocket science” Simple, well-known attributes But ignored Touch many walks of life Wide range of applications

5. Institute for Visualization and Perception Research 5 © Copyright 1998 Haim Levkowitz Attributes Text Color Graphics Overall gestalt

6. Institute for Visualization and Perception Research 6 © Copyright 1998 Haim Levkowitz Applications Presentations Computer screens User interfaces & interaction Web pages Signs (traffic, street, commercial) Printed material?

7. Institute for Visualization and Perception Research 7 © Copyright 1998 Haim Levkowitz Goals Most effective usability ==> Perception For info presentation: Aesthetics only secondary!

8. Institute for Visualization and Perception Research 8 © Copyright 1998 Haim Levkowitz 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. Institute for Visualization and Perception Research 9 © Copyright 1998 Haim Levkowitz Requirements Acuity, resolution Color perception Text: fonts, size Contrast Design

10. Institute for Visualization and Perception Research 10 © Copyright 1998 Haim Levkowitz Acuity and resolution tan Beta/2 = S/2D S = size D = distance D1D1 D2D2 D3D3 S1S1 S2S2 S3S3 Beta Visual angle

11. Institute for Visualization and Perception Research 11 © Copyright 1998 Haim Levkowitz 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: 2 o, 1’, 1” Diameter of fovea: 1 o Diameter of foveal receptor: 30” Position of inner edge of blind spot: 12 o from fovea Size of blind spot: 7.5 o (v), 5 o (h)

12. Institute for Visualization and Perception Research 12 © Copyright 1998 Haim Levkowitz Acuity requirements Detection: 0.5” (seconds of arc) Localization (vernier): 2” Resolution + recognition: 30” Dynamic (60 o /sec motion): 1-2’

13. Institute for Visualization and Perception Research 13 © Copyright 1998 Haim Levkowitz Color perception Measured in isolation, perceived in context Contrast essential Blue weak On small samples Against dark background Color deficiencies Color symbolism

14. Institute for Visualization and Perception Research 14 © Copyright 1998 Haim Levkowitz “Color is colors” —Josef Albers Pure hue Same hueComplemenatry Apparent brightness Apparent size

15. Institute for Visualization and Perception Research 15 © Copyright 1998 Haim Levkowitz Perceived hue depends on context

16. Institute for Visualization and Perception Research 16 © Copyright 1998 Haim Levkowitz Complementary colors

17. Institute for Visualization and Perception Research 17 © Copyright 1998 Haim Levkowitz More on color interaction Apparent depth relationship Pop out Receded

18. Institute for Visualization and Perception Research 18 © Copyright 1998 Haim Levkowitz Color symbolism Black Mourning Elegance Profits (business) Red Alert, danger Loss (business) Green Go ahead Environment White Elegance Mourning (orient)

19. Institute for Visualization and Perception Research 19 © Copyright 1998 Haim Levkowitz “Crimes” Text Layout Background design Color Multimedia

20. Institute for Visualization and Perception Research 20 © Copyright 1998 Haim Levkowitz Text Font, size, weight Stacked (vertical) characters All caps Distorted baselines Long lines Alignment

21. Institute for Visualization and Perception Research 21 © Copyright 1998 Haim Levkowitz 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 Bold | regular 24pt | 20 | 16 | 12 | 10 Serif | sans-serif 15” screen ==> ~16 pt.

22. Institute for Visualization and Perception Research 22 © Copyright 1998 Haim Levkowitz Stacked (vertical) characters ReadmeReadme Read me

23. Institute for Visualization and Perception Research 23 © Copyright 1998 Haim Levkowitz All caps READ ME Read Me

24. Institute for Visualization and Perception Research 24 © Copyright 1998 Haim Levkowitz Distorted baseline It is easier to read this I t i s h a r d e r t o r e a d t h i s

25. Institute for Visualization and Perception Research 25 © Copyright 1998 Haim Levkowitz Long lines Hard to read long lines Most readable No longer than 1.5-2 times the lowercase alphabet in font, size used

26. Institute for Visualization and Perception Research 26 © Copyright 1998 Haim Levkowitz Alignment Most readable Left-justified (“ragged right”) Hard to read Centered, right-justified, justified

27. Institute for Visualization and Perception Research 27 © Copyright 1998 Haim Levkowitz Layout/design Too many boxes, borders, underlines Underlined text Boxed diagram No underline Un-boxed

28. Institute for Visualization and Perception Research 28 © Copyright 1998 Haim Levkowitz Background design Crowded Not crowded

29. Institute for Visualization and Perception Research 29 © Copyright 1998 Haim Levkowitz Color Bad contrast Deficiencies ignored Red near green Blue on black “Las Vegas” effect

30. Institute for Visualization and Perception Research 30 © Copyright 1998 Haim Levkowitz Bad contrast E.g., Yellow on white Blue on black Textured background Best: yellow/black (bees, road signs) Also good: white on blue (slides) Yellow on white Blue on black Textured background

31. Institute for Visualization and Perception Research 31 © Copyright 1998 Haim Levkowitz Deficiencies ignored Red-green, most common Yellow-blue Red-green Yellow-blue

32. Institute for Visualization and Perception Research 32 © Copyright 1998 Haim Levkowitz Red near green Vibrate

33. Institute for Visualization and Perception Research 33 © Copyright 1998 Haim Levkowitz Blue on black Fuzzy blu e

34. Institute for Visualization and Perception Research 34 © Copyright 1998 Haim Levkowitz “Las Vegas” effect Window 2 text window 2 text window 2 text Window 3 text window 3 text window 3 text Error message error message error message Window 1 text window 1 text window 1 text Window 3 text window 3 text window 3 text Window 2 text window 2 text window 2 text Window 3 text window 3 text window 3 text Error message error message error message Window 1 text window 1 text window 1 text Window 3 text window 3 text window 3 text Too many colors, frames, fonts

35. Institute for Visualization and Perception Research 35 © Copyright 1998 Haim Levkowitz Multimedia Motion sickness! Blink Animated GIFs Java animations....

36. Institute for Visualization and Perception Research 36 © Copyright 1998 Haim Levkowitz The Good, The Bad, The Ugly Where is the good? Hard to find Lots of bad and ugly Just a few examples

37. Institute for Visualization and Perception Research 37 © Copyright 1998 Haim Levkowitz Bad color contrast http://www.att.com/ucs

38. Institute for Visualization and Perception Research 38 © Copyright 1998 Haim Levkowitz Bad background contrast http://www.cdromworld.com/special.htm

39. Institute for Visualization and Perception Research 39 © Copyright 1998 Haim Levkowitz Small text, hard colors http://www.e3central.com

40. Institute for Visualization and Perception Research 40 © Copyright 1998 Haim Levkowitz Busy http://www.e3expo.com

41. Institute for Visualization and Perception Research 41 © Copyright 1998 Haim Levkowitz Tough color contrast, busy http://www.Intellifax.com

42. Institute for Visualization and Perception Research 42 © Copyright 1998 Haim Levkowitz Colors, small text, busy http://switchboard.com

43. Institute for Visualization and Perception Research 43 © Copyright 1998 Haim Levkowitz Busy http://switchboard.com, results

44. Institute for Visualization and Perception Research 44 © Copyright 1998 Haim Levkowitz You tell me! http://www.comradery.com/e3/crindex.html

45. Institute for Visualization and Perception Research 45 © Copyright 1998 Haim Levkowitz http://want2dance.com

46. Institute for Visualization and Perception Research 46 © Copyright 1998 Haim Levkowitz http://www.subjectmatters.com

47. Institute for Visualization and Perception Research 47 © Copyright 1998 Haim Levkowitz http://lynda.com

48. Institute for Visualization and Perception Research 48 © Copyright 1998 Haim Levkowitz 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. Institute for Visualization and Perception Research 49 © Copyright 1998 Haim Levkowitz Traffic & road signs School bus “Please do not tailgate” Vertical street signs “Can’t read” color contrast More

50. Institute for Visualization and Perception Research 50 © Copyright 1998 Haim Levkowitz On back of school bus UNLAWFUL TO PASS WHEN RED LIGHTS ARE FLASHING Unlawful to Pass When Red Lights are Flashing

51. Institute for Visualization and Perception Research 51 © Copyright 1998 Haim Levkowitz Do not tailgate

52. Institute for Visualization and Perception Research 52 © Copyright 1998 Haim Levkowitz Do not tailgate, again Please Do Not Tailgate

53. Institute for Visualization and Perception Research 53 © Copyright 1998 Haim Levkowitz Vertical street sign

54. Institute for Visualization and Perception Research 54 © Copyright 1998 Haim Levkowitz “Can’t read” color contrast

55. Institute for Visualization and Perception Research 55 © Copyright 1998 Haim Levkowitz Conclusions “Low-tech” vis Information presentation: Perception, legibility, above all Attributes, applications 500 years of knowledge Last 10 years: ignore! Simple rules: make all the difference