Information presentation on the web unlearning 500 years of knowledge
Download
1 / 55

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


  • 164 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 [email protected] 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


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 Knowledge

  • Focus

  • Goals

  • Background, foundations

  • Examples

  • Recommendations


Focus
Focus Knowledge

  • “Low-level” visualization

  • 3-4 attributes

  • 5-6 applications


Low level visualization
“Low-level” visualization Knowledge

  • No “rocket science”

    • Simple, well-known attributes

  • But ignored

  • Touch many walks of life

    • Wide range of applications


Attributes
Attributes Knowledge

  • Text

  • Color

  • Graphics

  • Overall gestalt


Applications
Applications Knowledge

  • Presentations

  • Computer screens

  • User interfaces & interaction

  • Web pages

  • Signs (traffic, street, commercial)

  • Printed material?


Goals
Goals Knowledge

  • Most effective usability

    • ==> Perception

  • For info presentation: Aesthetics only secondary!


History background foundations
History, Background, Foundations Knowledge

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

  • Acuity, resolution

  • Color perception

  • Text: fonts, size

  • Contrast

  • Design


Acuity and resolution
Acuity and resolution Knowledge

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 Knowledge

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

  • Detection: 0.5” (seconds of arc)

  • Localization (vernier): 2”

  • Resolution + recognition: 30”

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


Color perception
Color perception Knowledge

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

Same hue

Complemenatry

Apparent brightness

Apparent size

“Color is colors”—Josef Albers




More on color interaction
More on color interaction Knowledge

  • Apparent depth relationship

Receded

Pop out


Color symbolism

Black Knowledge

Mourning

Elegance

Profits (business)

Red

Alert, danger

Loss (business)

Green

Go ahead

Environment

White

Elegance

Mourning (orient)

Color symbolism


Crimes
“Crimes” Knowledge

  • Text

  • Layout

  • Background design

  • Color

  • Multimedia


Text Knowledge

  • Font, size, weight

  • Stacked (vertical) characters

  • All caps

  • Distorted baselines

  • Long lines

  • Alignment


Font size weight
Font, size, weight Knowledge

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

Read me

Read me


All caps
All caps Knowledge

READ ME

Read Me


Distorted baseline
Distorted baseline Knowledge

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 Knowledge

  • Hard to read long lines

  • Most readable

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


Alignment
Alignment Knowledge

  • Most readable

    • Left-justified (“ragged right”)

  • Hard to read

    • Centered, right-justified, justified


Layout design
Layout/design Knowledge

  • Too many boxes, borders, underlines

Underlined text

No underline

Boxed diagram

Un-boxed


Background design
Background design Knowledge

Not crowded

Crowded


Color
Color Knowledge

  • Bad contrast

  • Deficiencies ignored

  • Red near green

  • Blue on black

  • “Las Vegas” effect


Bad contrast
Bad contrast Knowledge

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

  • Red-green, most common

  • Yellow-blue

  • Red-green

  • Yellow-blue


Red near green
Red near green Knowledge

  • Vibrate


Blue on black

blue Knowledge

Blue on black

  • Fuzzy


Las vegas effect
“Las Vegas” effect Knowledge

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

  • Motion sickness!

    • Blink

    • Animated GIFs

    • Java animations

    • ....


The good the bad the ugly
The Good, The Bad, The Ugly Knowledge

  • Where is the good?

    • Hard to find

  • Lots of bad and ugly

  • Just a few examples


Bad color contrast
Bad color contrast Knowledge

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


Bad background contrast
Bad background contrast Knowledge

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


Small text hard colors
Small text, hard colors Knowledge

  • http://www.e3central.com


Busy Knowledge

  • http://www.e3expo.com


Tough color contrast busy
Tough color contrast, busy Knowledge

  • http://www.Intellifax.com


Colors small text busy
Colors, small text, busy Knowledge

  • http://switchboard.com


Busy Knowledge

  • http://switchboard.com, results


You tell me
You tell me! Knowledge

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




Http lynda com
http://lynda.com Knowledge


Many more
Many more Knowledge

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

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

UNLAWFUL TO PASS WHEN RED LIGHTS ARE FLASHING

Unlawful to Pass When Red Lights are Flashing


Do not tailgate
Do not tailgate Knowledge


Do not tailgate again
Do not tailgate, again Knowledge

Please Do Not Tailgate

Please Do Not Tailgate




Conclusions
Conclusions Knowledge

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


ad