1 / 55

Information Presentation on the Web: Unlearning 500 Years of Knowledge

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. Outline. Focus Goals

aislin
Download Presentation

Information Presentation on the Web: Unlearning 500 Years of Knowledge

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related