information presentation on the web: unlearning 500 years of knowledge

Institute for Visualization and Perception ResearchI VPR 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

[email protected]

http://www.cs.uml.edu/~haim



Outline

• Focus

• Goals

• Background, foundations

• Examples

• Recommendations



Focus

• “Low-level” visualization

• 3-4 attributes

• 5-6 applications



“Low-level” visualization

• No “rocket science”

• Simple, well-known attributes

• But ignored

• Touch many walks of life

• Wide range of applications



Attributes

• Text

• Color

• Graphics

• Overall gestalt



Applications

• Presentations

• Computer screens

• User interfaces & interaction

• Web pages

• Signs (traffic, street, commercial)

• Printed material?



Goals

• Most effective usability

• ==> Perception

• For info presentation: Aesthetics only secondary!



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”



Requirements

• Acuity, resolution

• Color perception

• Text: fonts, size

• Contrast

• Design



Acuity and resolution

tan Beta/2 = S/2D S = size D = distance

D1

D2

D3

S1S2

S3

Beta

• Visual angle



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)



Acuity requirements

• Detection: 0.5” (seconds of arc)

• Localization (vernier): 2”

• Resolution + recognition: 30”

• Dynamic (60o/sec motion): 1-2’



Color perception• Measured in isolation, perceived in context• Contrast essential• Blue weak

• On small samples• Against dark background

• Color deficiencies• Color symbolism



“Color is colors” —Josef Albers

Pure hue

Same hue Complemenatry

Apparent brightness

Apparent size



Perceived hue depends on context



Complementary colors



More on color interaction

• Apparent depth relationship

Pop out Receded



Color symbolism

• Black• Mourning• Elegance• Profits (business)

• Red• Alert, danger• Loss (business)

• Green• Go ahead• Environment

• White• Elegance• Mourning (orient)



“Crimes”

• Text• Layout• Background design• Color• Multimedia



Text

• Font, size, weight

• Stacked (vertical) characters

• All caps

• Distorted baselines

• Long lines

• Alignment



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.



Stacked (vertical) characters

Read me

Read me



All caps

READ ME Read Me



Distorted baseline

It is easier to read this

I t is h a r d e rt o

r ead t h is



Long lines

• Hard to read long lines

• Most readable

• No longer than 1.5-2 times the lowercase alphabet in font, size used



Alignment

• Most readable

• Left-justified (“ragged right”)

• Hard to read

• Centered, right-justified, justified



Layout/design

• Too many boxes, borders, underlines

Underlined text

Boxed diagram

No underline

Un-boxed



Background design

CrowdedNot crowded



Color

• Bad contrast

• Deficiencies ignored

• Red near green

• Blue on black

• “Las Vegas” effect



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



Deficiencies ignored

• Red-green, most common

• Yellow-blue

• Red-green

• Yellow-blue



Red near green

• Vibrate



Blue on black

• Fuzzy

blue



“Las Vegas” effect

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



• Too many colors, frames, fonts



Multimedia

• Motion sickness!

• Blink

• Animated GIFs

• Java animations

• ....



The Good, The Bad, The Ugly

• Where is the good?

• Hard to find

• Lots of bad and ugly

• Just a few examples



Bad color contrast

• http://www.att.com/ucs



Bad background contrast

• http://www.cdromworld.com/special.htm



Small text, hard colors

• http://www.e3central.com



Busy

• http://www.e3expo.com



Tough color contrast, busy

• http://www.Intellifax.com



Colors, small text, busy

• http://switchboard.com



Busy

• http://switchboard.com, results



You tell me!

• http://www.comradery.com/e3/crindex.html



http://want2dance.com



http://www.subjectmatters.com



http://lynda.com



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



Traffic & road signs

• School bus

• “Please do not tailgate”

• Vertical street signs

• “Can’t read” color contrast

• More



On back of school bus

UNLAWFUL TO PASS WHEN RED LIGHTS ARE FLASHING

Unlawful to Pass When Red Lights are Flashing



Do not tailgate

PLEASE DO NOT TAILGATE

PLEASE DO NOT TAILGATE

Please Do Not Tailgate





Do not tailgate, again





Vertical street sign



“Can’t read” color contrast



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

information presentation on the web: unlearning 500 years of knowledge

Documents