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


  • 119 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

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

  • Visual angle

S3

S2

Beta

S1

D1

D2

D3


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


Pure hue

Same hue

Complemenatry

Apparent brightness

Apparent size

“Color is colors”—Josef Albers


Perceived hue depends on context


Complementary colors


More on color interaction

  • Apparent depth relationship

Receded

Pop out


Black

Mourning

Elegance

Profits (business)

Red

Alert, danger

Loss (business)

Green

Go ahead

Environment

White

Elegance

Mourning (orient)

Color symbolism


“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

Serif | sans-serif

Bold | regular

24pt | 20 | 16 | 12 | 10

15” screen ==> ~16 pt.


Stacked (vertical) characters

Read me

Read me


All caps

READ ME

Read Me


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

  • 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

No underline

Boxed diagram

Un-boxed


Background design

Not crowded

Crowded


Color

  • Bad contrast

  • Deficiencies ignored

  • Red near green

  • Blue on black

  • “Las Vegas” effect


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

  • Red-green, most common

  • Yellow-blue

  • Red-green

  • Yellow-blue


Red near green

  • Vibrate


blue

Blue on black

  • Fuzzy


“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

  • 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


Do not tailgate, again

Please Do Not Tailgate

Please Do Not Tailgate


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


  • Login