information presentation on the web unlearning 500 years of knowledge n.
Download
Skip this Video
Download Presentation
Information Presentation on the Web: Unlearning 500 Years of Knowledge

Loading in 2 Seconds...

play fullscreen
1 / 55

Information Presentation on the Web: Unlearning 500 Years of Knowledge - PowerPoint PPT Presentation


  • 165 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Information Presentation on the Web: Unlearning 500 Years of Knowledge' - aislin


Download Now 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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
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
Outline
  • Focus
  • Goals
  • Background, foundations
  • Examples
  • Recommendations
focus
Focus
  • “Low-level” visualization
  • 3-4 attributes
  • 5-6 applications
low level visualization
“Low-level” visualization
  • No “rocket science”
    • Simple, well-known attributes
  • But ignored
  • Touch many walks of life
    • Wide range of applications
attributes
Attributes
  • Text
  • Color
  • Graphics
  • Overall gestalt
applications
Applications
  • Presentations
  • Computer screens
  • User interfaces & interaction
  • Web pages
  • Signs (traffic, street, commercial)
  • Printed material?
goals
Goals
  • Most effective usability
    • ==> Perception
  • For info presentation: Aesthetics only secondary!
history background foundations
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
Requirements
  • Acuity, resolution
  • Color perception
  • Text: fonts, size
  • Contrast
  • Design
acuity and resolution
Acuity and resolution

tan Beta/2 = S/2D

S = size

D = distance

  • Visual angle

S3

S2

Beta

S1

D1

D2

D3

visual angle some objects
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
Acuity requirements
  • Detection: 0.5” (seconds of arc)
  • Localization (vernier): 2”
  • Resolution + recognition: 30”
  • Dynamic (60o/sec motion): 1-2’
color perception
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

“Color is colors”—Josef Albers
more on color interaction
More on color interaction
  • Apparent depth relationship

Receded

Pop out

color symbolism
Black

Mourning

Elegance

Profits (business)

Red

Alert, danger

Loss (business)

Green

Go ahead

Environment

White

Elegance

Mourning (orient)

Color symbolism
crimes
“Crimes”
  • Text
  • Layout
  • Background design
  • Color
  • Multimedia
slide20
Text
  • Font, size, weight
  • Stacked (vertical) characters
  • All caps
  • Distorted baselines
  • Long lines
  • Alignment
font size weight
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.

all caps
All caps

READ ME

Read Me

distorted baseline
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

long lines
Long lines
  • Hard to read long lines
  • Most readable
    • No longer than 1.5-2 times the lowercase alphabet in font, size used
alignment
Alignment
  • Most readable
    • Left-justified (“ragged right”)
  • Hard to read
    • Centered, right-justified, justified
layout design
Layout/design
  • Too many boxes, borders, underlines

Underlined text

No underline

Boxed diagram

Un-boxed

background design
Background design

Not crowded

Crowded

color
Color
  • Bad contrast
  • Deficiencies ignored
  • Red near green
  • Blue on black
  • “Las Vegas” effect
bad contrast
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
deficiencies ignored
Deficiencies ignored
  • Red-green, most common
  • Yellow-blue
  • Red-green
  • Yellow-blue
las vegas effect
“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

multimedia
Multimedia
  • Motion sickness!
    • Blink
    • Animated GIFs
    • Java animations
    • ....
the good the bad the ugly
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
Bad color contrast
  • http://www.att.com/ucs
bad background contrast
Bad background contrast
  • http://www.cdromworld.com/special.htm
small text hard colors
Small text, hard colors
  • http://www.e3central.com
slide40
Busy
  • http://www.e3expo.com
tough color contrast busy
Tough color contrast, busy
  • http://www.Intellifax.com
colors small text busy
Colors, small text, busy
  • http://switchboard.com
slide43
Busy
  • http://switchboard.com, results
you tell me
You tell me!
  • http://www.comradery.com/e3/crindex.html
many more
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
Traffic & road signs
  • School bus
  • “Please do not tailgate”
  • Vertical street signs
  • “Can’t read” color contrast
  • More
on back of school bus
On back of school bus

UNLAWFUL TO PASS WHEN RED LIGHTS ARE FLASHING

Unlawful to Pass When Red Lights are Flashing

do not tailgate again
Do not tailgate, again

Please Do Not Tailgate

Please Do Not Tailgate

conclusions
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