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

Institute for Visualization and Perception Research 2 © Copyright 1998 Haim Levkowitz Outline Focus Goals Background, foundations Examples Recommendations

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

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

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

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?

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

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”

Institute for Visualization and Perception Research 9 © Copyright 1998 Haim Levkowitz Requirements Acuity, resolution Color perception Text: fonts, size Contrast Design

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

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)

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’

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

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

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

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

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

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)

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Institute for Visualization and Perception Research 37 © Copyright 1998 Haim Levkowitz Bad color contrast

Institute for Visualization and Perception Research 38 © Copyright 1998 Haim Levkowitz Bad background contrast

Institute for Visualization and Perception Research 39 © Copyright 1998 Haim Levkowitz Small text, hard colors

Institute for Visualization and Perception Research 40 © Copyright 1998 Haim Levkowitz Busy

Institute for Visualization and Perception Research 41 © Copyright 1998 Haim Levkowitz Tough color contrast, busy

Institute for Visualization and Perception Research 42 © Copyright 1998 Haim Levkowitz Colors, small text, busy

Institute for Visualization and Perception Research 43 © Copyright 1998 Haim Levkowitz Busy results

Institute for Visualization and Perception Research 44 © Copyright 1998 Haim Levkowitz You tell me!

Institute for Visualization and Perception Research 45 © Copyright 1998 Haim Levkowitz

Institute for Visualization and Perception Research 46 © Copyright 1998 Haim Levkowitz

Institute for Visualization and Perception Research 47 © Copyright 1998 Haim Levkowitz

Institute for Visualization and Perception Research 48 © Copyright 1998 Haim Levkowitz Many more One of the worst Search results, blue on black Disturbing background Plenty more

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

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

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

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

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

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

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