Unlearning and Relearning jQuery - Client-side Performance Optimization
Information Presentation on the Web: Unlearning 500 Years of Knowledge
description
Transcript of Information Presentation on the Web: Unlearning 500 Years of Knowledge
![Page 1: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/1.jpg)
Institute for Visualization and Perception ResearchI VPR 1
© Copyright 1998 Haim Levkowitz
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
http://www.cs.uml.edu/~haim
![Page 2: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/2.jpg)
Institute for Visualization and Perception ResearchI VPR 2
© Copyright 1998 Haim Levkowitz
Outline
• Focus
• Goals
• Background, foundations
• Examples
• Recommendations
![Page 3: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/3.jpg)
Institute for Visualization and Perception ResearchI VPR 3
© Copyright 1998 Haim Levkowitz
Focus
• “Low-level” visualization
• 3-4 attributes
• 5-6 applications
![Page 4: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/4.jpg)
Institute for Visualization and Perception ResearchI VPR 4
© Copyright 1998 Haim Levkowitz
“Low-level” visualization
• No “rocket science”
• Simple, well-known attributes
• But ignored
• Touch many walks of life
• Wide range of applications
![Page 5: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/5.jpg)
Institute for Visualization and Perception ResearchI VPR 5
© Copyright 1998 Haim Levkowitz
Attributes
• Text
• Color
• Graphics
• Overall gestalt
![Page 6: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/6.jpg)
Institute for Visualization and Perception ResearchI VPR 6
© Copyright 1998 Haim Levkowitz
Applications
• Presentations
• Computer screens
• User interfaces & interaction
• Web pages
• Signs (traffic, street, commercial)
• Printed material?
![Page 7: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/7.jpg)
Institute for Visualization and Perception ResearchI VPR 7
© Copyright 1998 Haim Levkowitz
Goals
• Most effective usability
• ==> Perception
• For info presentation: Aesthetics only secondary!
![Page 8: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/8.jpg)
Institute for Visualization and Perception ResearchI VPR 8
© Copyright 1998 Haim Levkowitz
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”
![Page 9: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/9.jpg)
Institute for Visualization and Perception ResearchI VPR 9
© Copyright 1998 Haim Levkowitz
Requirements
• Acuity, resolution
• Color perception
• Text: fonts, size
• Contrast
• Design
![Page 10: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/10.jpg)
Institute for Visualization and Perception ResearchI VPR 10
© Copyright 1998 Haim Levkowitz
Acuity and resolution
tan Beta/2 = S/2D S = size D = distance
D1
D2
D3
S1S2
S3
Beta
• Visual angle
![Page 11: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/11.jpg)
Institute for Visualization and Perception ResearchI VPR 11
© Copyright 1998 Haim Levkowitz
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)
![Page 12: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/12.jpg)
Institute for Visualization and Perception ResearchI VPR 12
© Copyright 1998 Haim Levkowitz
Acuity requirements
• Detection: 0.5” (seconds of arc)
• Localization (vernier): 2”
• Resolution + recognition: 30”
• Dynamic (60o/sec motion): 1-2’
![Page 13: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/13.jpg)
Institute for Visualization and Perception ResearchI VPR 13
© Copyright 1998 Haim Levkowitz
Color perception• Measured in isolation, perceived in context• Contrast essential• Blue weak
• On small samples• Against dark background
• Color deficiencies• Color symbolism
![Page 14: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/14.jpg)
Institute for Visualization and Perception ResearchI VPR 14
© Copyright 1998 Haim Levkowitz
“Color is colors” —Josef Albers
Pure hue
Same hue Complemenatry
Apparent brightness
Apparent size
![Page 15: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/15.jpg)
Institute for Visualization and Perception ResearchI VPR 15
© Copyright 1998 Haim Levkowitz
Perceived hue depends on context
![Page 16: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/16.jpg)
Institute for Visualization and Perception ResearchI VPR 16
© Copyright 1998 Haim Levkowitz
Complementary colors
![Page 17: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/17.jpg)
Institute for Visualization and Perception ResearchI VPR 17
© Copyright 1998 Haim Levkowitz
More on color interaction
• Apparent depth relationship
Pop out Receded
![Page 18: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/18.jpg)
Institute for Visualization and Perception ResearchI VPR 18
© Copyright 1998 Haim Levkowitz
Color symbolism
• Black• Mourning• Elegance• Profits (business)
• Red• Alert, danger• Loss (business)
• Green• Go ahead• Environment
• White• Elegance• Mourning (orient)
![Page 19: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/19.jpg)
Institute for Visualization and Perception ResearchI VPR 19
© Copyright 1998 Haim Levkowitz
“Crimes”
• Text• Layout• Background design• Color• Multimedia
![Page 20: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/20.jpg)
Institute for Visualization and Perception ResearchI VPR 20
© Copyright 1998 Haim Levkowitz
Text
• Font, size, weight
• Stacked (vertical) characters
• All caps
• Distorted baselines
• Long lines
• Alignment
![Page 21: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/21.jpg)
Institute for Visualization and Perception ResearchI VPR 21
© Copyright 1998 Haim Levkowitz
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.
![Page 22: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/22.jpg)
Institute for Visualization and Perception ResearchI VPR 22
© Copyright 1998 Haim Levkowitz
Stacked (vertical) characters
Read me
Read me
![Page 23: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/23.jpg)
Institute for Visualization and Perception ResearchI VPR 23
© Copyright 1998 Haim Levkowitz
All caps
READ ME Read Me
![Page 24: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/24.jpg)
Institute for Visualization and Perception ResearchI VPR 24
© Copyright 1998 Haim Levkowitz
Distorted baseline
It is easier to read this
I t is h a r d e rt o
r ead t h is
![Page 25: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/25.jpg)
Institute for Visualization and Perception ResearchI VPR 25
© Copyright 1998 Haim Levkowitz
Long lines
• Hard to read long lines
• Most readable
• No longer than 1.5-2 times the lowercase alphabet in font, size used
![Page 26: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/26.jpg)
Institute for Visualization and Perception ResearchI VPR 26
© Copyright 1998 Haim Levkowitz
Alignment
• Most readable
• Left-justified (“ragged right”)
• Hard to read
• Centered, right-justified, justified
![Page 27: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/27.jpg)
Institute for Visualization and Perception ResearchI VPR 27
© Copyright 1998 Haim Levkowitz
Layout/design
• Too many boxes, borders, underlines
Underlined text
Boxed diagram
No underline
Un-boxed
![Page 28: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/28.jpg)
Institute for Visualization and Perception ResearchI VPR 28
© Copyright 1998 Haim Levkowitz
Background design
CrowdedNot crowded
![Page 29: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/29.jpg)
Institute for Visualization and Perception ResearchI VPR 29
© Copyright 1998 Haim Levkowitz
Color
• Bad contrast
• Deficiencies ignored
• Red near green
• Blue on black
• “Las Vegas” effect
![Page 30: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/30.jpg)
Institute for Visualization and Perception ResearchI VPR 30
© Copyright 1998 Haim Levkowitz
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
![Page 31: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/31.jpg)
Institute for Visualization and Perception ResearchI VPR 31
© Copyright 1998 Haim Levkowitz
Deficiencies ignored
• Red-green, most common
• Yellow-blue
• Red-green
• Yellow-blue
![Page 32: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/32.jpg)
Institute for Visualization and Perception ResearchI VPR 32
© Copyright 1998 Haim Levkowitz
Red near green
• Vibrate
![Page 33: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/33.jpg)
Institute for Visualization and Perception ResearchI VPR 33
© Copyright 1998 Haim Levkowitz
Blue on black
• Fuzzy
blue
![Page 34: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/34.jpg)
Institute for Visualization and Perception ResearchI VPR 34
© Copyright 1998 Haim Levkowitz
“Las Vegas” effect
Window 2 text window 2 text window 2 text Window 2 text window 2 text window 2 text
Window 3 text window 3 text window 3 text Window 3 text window 3 text window 3 text
Error message error message error message
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 2 text window 2 text window 2 text Window 2 text window 2 text window 2 text
Window 3 text window 3 text window 3 text Window 3 text window 3 text window 3 text
Error message error message error message
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
• Too many colors, frames, fonts
![Page 35: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/35.jpg)
Institute for Visualization and Perception ResearchI VPR 35
© Copyright 1998 Haim Levkowitz
Multimedia
• Motion sickness!
• Blink
• Animated GIFs
• Java animations
• ....
![Page 36: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/36.jpg)
Institute for Visualization and Perception ResearchI VPR 36
© Copyright 1998 Haim Levkowitz
The Good, The Bad, The Ugly
• Where is the good?
• Hard to find
• Lots of bad and ugly
• Just a few examples
![Page 37: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/37.jpg)
Institute for Visualization and Perception ResearchI VPR 37
© Copyright 1998 Haim Levkowitz
Bad color contrast
• http://www.att.com/ucs
![Page 38: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/38.jpg)
Institute for Visualization and Perception ResearchI VPR 38
© Copyright 1998 Haim Levkowitz
Bad background contrast
• http://www.cdromworld.com/special.htm
![Page 39: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/39.jpg)
Institute for Visualization and Perception ResearchI VPR 39
© Copyright 1998 Haim Levkowitz
Small text, hard colors
• http://www.e3central.com
![Page 40: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/40.jpg)
Institute for Visualization and Perception ResearchI VPR 40
© Copyright 1998 Haim Levkowitz
Busy
• http://www.e3expo.com
![Page 41: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/41.jpg)
Institute for Visualization and Perception ResearchI VPR 41
© Copyright 1998 Haim Levkowitz
Tough color contrast, busy
• http://www.Intellifax.com
![Page 42: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/42.jpg)
Institute for Visualization and Perception ResearchI VPR 42
© Copyright 1998 Haim Levkowitz
Colors, small text, busy
• http://switchboard.com
![Page 43: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/43.jpg)
Institute for Visualization and Perception ResearchI VPR 43
© Copyright 1998 Haim Levkowitz
Busy
• http://switchboard.com, results
![Page 44: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/44.jpg)
Institute for Visualization and Perception ResearchI VPR 44
© Copyright 1998 Haim Levkowitz
You tell me!
• http://www.comradery.com/e3/crindex.html
![Page 45: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/45.jpg)
Institute for Visualization and Perception ResearchI VPR 45
© Copyright 1998 Haim Levkowitz
http://want2dance.com
![Page 46: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/46.jpg)
Institute for Visualization and Perception ResearchI VPR 46
© Copyright 1998 Haim Levkowitz
http://www.subjectmatters.com
![Page 47: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/47.jpg)
Institute for Visualization and Perception ResearchI VPR 47
© Copyright 1998 Haim Levkowitz
http://lynda.com
![Page 48: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/48.jpg)
Institute for Visualization and Perception ResearchI VPR 48
© Copyright 1998 Haim Levkowitz
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
![Page 49: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/49.jpg)
Institute for Visualization and Perception ResearchI VPR 49
© Copyright 1998 Haim Levkowitz
Traffic & road signs
• School bus
• “Please do not tailgate”
• Vertical street signs
• “Can’t read” color contrast
• More
![Page 50: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/50.jpg)
Institute for Visualization and Perception ResearchI VPR 50
© Copyright 1998 Haim Levkowitz
On back of school bus
UNLAWFUL TO PASS WHEN RED LIGHTS ARE FLASHING
Unlawful to Pass When Red Lights are Flashing
![Page 51: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/51.jpg)
Institute for Visualization and Perception ResearchI VPR 51
© Copyright 1998 Haim Levkowitz
Do not tailgate
PLEASE DO NOT TAILGATE
PLEASE DO NOT TAILGATE
Please Do Not Tailgate
Please Do Not Tailgate
Please Do Not Tailgate
![Page 52: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/52.jpg)
Institute for Visualization and Perception ResearchI VPR 52
© Copyright 1998 Haim Levkowitz
Do not tailgate, again
Please Do Not Tailgate
Please Do Not Tailgate
![Page 53: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/53.jpg)
Institute for Visualization and Perception ResearchI VPR 53
© Copyright 1998 Haim Levkowitz
Vertical street sign
![Page 54: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/54.jpg)
Institute for Visualization and Perception ResearchI VPR 54
© Copyright 1998 Haim Levkowitz
“Can’t read” color contrast
![Page 55: Information Presentation on the Web: Unlearning 500 Years of Knowledge](https://reader036.fdocuments.in/reader036/viewer/2022062500/5681507a550346895dbe7817/html5/thumbnails/55.jpg)
Institute for Visualization and Perception ResearchI VPR 55
© Copyright 1998 Haim Levkowitz
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