Information presentation on the web unlearning 500 years of knowledge
This presentation is the property of its rightful owner.
Sponsored Links
1 / 55

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


  • 115 Views
  • Uploaded on
  • Presentation posted in: General

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

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.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

[email protected]

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


Perceived hue depends on context

Perceived hue depends on context


Complementary colors

Complementary colors


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


Information presentation on the web unlearning 500 years of knowledge

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.


Stacked vertical characters

Stacked (vertical) characters

Read me

Read me


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


Red near green

Red near green

  • Vibrate


Blue on black

blue

Blue on black

  • Fuzzy


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


Information presentation on the web unlearning 500 years of knowledge

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


Information presentation on the web unlearning 500 years of knowledge

Busy

  • http://switchboard.com, results


You tell me

You tell me!

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


Http want2dance com

http://want2dance.com


Http www subjectmatters com

http://www.subjectmatters.com


Http lynda com

http://lynda.com


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

Do not tailgate


Do not tailgate again

Do not tailgate, again

Please Do Not Tailgate

Please Do Not Tailgate


Vertical street sign

Vertical street sign


Can t read color contrast

“Can’t read” color contrast


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


  • Login