Information Presentation on the Web: Unlearning 500 Years of Knowledge

Institute for Visualization and Perception ResearchI VPR 1

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

• Background, foundations

• Examples

• Recommendations

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

• 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

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

• 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

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

• 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

“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

• 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

• http://www.e3expo.com

Tough color contrast, busy

• http://www.Intellifax.com

Colors, small text, busy

• http://switchboard.com

• 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

Do not tailgate, again

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

Information Presentation on the Web: Unlearning 500 Years of Knowledge

Documents

Transcript of Information Presentation on the Web: Unlearning 500 Years of Knowledge

Unlearning Ethics

Economics, Education and Unlearning · Economics, Education and Unlearning: Economics Education at the ... anthropology, evolutionary biology, sociology and neuroscience, to name

Towards a new definition of unlearning: rethinking … 2 Towards a new definition of unlearning: rethinking individual level unlearning and its implications for practice change. Njoke

Coffee Session @DMA, IHC Presents Innovative Institute of Unlearning.

Unlearning and Relearning ITSM

Post Crash Economics Economics Education and Unlearning

Learning and unlearning from disasters: an analysis of the ...

UNLEARNING COLONIAL IDENTITIES WHILE ENGAGING IN ...

Unlearning Project Management

Unlearning in the Workplace: A Mixed Methods Studyeprints.qut.edu.au/16574/1/Karen_Louise_Becker_Thesis.pdf · Unlearning in the Workplace: A Mixed Methods Study ... Table 6.16 Test-Retest

Flow Efficiency, People and Unlearning (LAST2014)

Unlearning Ethics: Ethical Memes and Moral Development

The Irrational Marketer - Unlearning marketing

Stories and Practices for Unlearning Whiteness ... · PDF fileStories and Practices for Unlearning Whiteness Decolonization Uncovering ... for Unlearning Whiteness, Decolonization,

Unlearning Java

Buddhist philosophy and practices as applied to unlearning ...

Unlearning insanity

Unlearning ITIL

UNLEARNING!COLONIAL!AND NATION TATE … · 22 kathryn2lehman2! 26,20162 ISSN22168

Unlearning unlimited