Download presentation
Presentation is loading. Please wait.
Published byRoland Clarke Modified over 9 years ago
1
Institute for Visualization and Perception Research 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 haim@cs.uml.edu http://www.cs.uml.edu/~haim
2
Institute for Visualization and Perception Research 2 © Copyright 1998 Haim Levkowitz Outline Focus Goals Background, foundations Examples Recommendations
3
Institute for Visualization and Perception Research 3 © Copyright 1998 Haim Levkowitz Focus “Low-level” visualization 3-4 attributes 5-6 applications
4
Institute for Visualization and Perception Research 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
5
Institute for Visualization and Perception Research 5 © Copyright 1998 Haim Levkowitz Attributes Text Color Graphics Overall gestalt
6
Institute for Visualization and Perception Research 6 © Copyright 1998 Haim Levkowitz Applications Presentations Computer screens User interfaces & interaction Web pages Signs (traffic, street, commercial) Printed material?
7
Institute for Visualization and Perception Research 7 © Copyright 1998 Haim Levkowitz Goals Most effective usability ==> Perception For info presentation: Aesthetics only secondary!
8
Institute for Visualization and Perception Research 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”
9
Institute for Visualization and Perception Research 9 © Copyright 1998 Haim Levkowitz Requirements Acuity, resolution Color perception Text: fonts, size Contrast Design
10
Institute for Visualization and Perception Research 10 © Copyright 1998 Haim Levkowitz Acuity and resolution tan Beta/2 = S/2D S = size D = distance D1D1 D2D2 D3D3 S1S1 S2S2 S3S3 Beta Visual angle
11
Institute for Visualization and Perception Research 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: 2 o, 1’, 1” Diameter of fovea: 1 o Diameter of foveal receptor: 30” Position of inner edge of blind spot: 12 o from fovea Size of blind spot: 7.5 o (v), 5 o (h)
12
Institute for Visualization and Perception Research 12 © Copyright 1998 Haim Levkowitz Acuity requirements Detection: 0.5” (seconds of arc) Localization (vernier): 2” Resolution + recognition: 30” Dynamic (60 o /sec motion): 1-2’
13
Institute for Visualization and Perception Research 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
14
Institute for Visualization and Perception Research 14 © Copyright 1998 Haim Levkowitz “Color is colors” —Josef Albers Pure hue Same hueComplemenatry Apparent brightness Apparent size
15
Institute for Visualization and Perception Research 15 © Copyright 1998 Haim Levkowitz Perceived hue depends on context
16
Institute for Visualization and Perception Research 16 © Copyright 1998 Haim Levkowitz Complementary colors
17
Institute for Visualization and Perception Research 17 © Copyright 1998 Haim Levkowitz More on color interaction Apparent depth relationship Pop out Receded
18
Institute for Visualization and Perception Research 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)
19
Institute for Visualization and Perception Research 19 © Copyright 1998 Haim Levkowitz “Crimes” Text Layout Background design Color Multimedia
20
Institute for Visualization and Perception Research 20 © Copyright 1998 Haim Levkowitz Text Font, size, weight Stacked (vertical) characters All caps Distorted baselines Long lines Alignment
21
Institute for Visualization and Perception Research 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.
22
Institute for Visualization and Perception Research 22 © Copyright 1998 Haim Levkowitz Stacked (vertical) characters ReadmeReadme Read me
23
Institute for Visualization and Perception Research 23 © Copyright 1998 Haim Levkowitz All caps READ ME Read Me
24
Institute for Visualization and Perception Research 24 © Copyright 1998 Haim Levkowitz Distorted baseline It is easier to read this I t i s h a r d e r t o r e a d t h i s
25
Institute for Visualization and Perception Research 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
26
Institute for Visualization and Perception Research 26 © Copyright 1998 Haim Levkowitz Alignment Most readable Left-justified (“ragged right”) Hard to read Centered, right-justified, justified
27
Institute for Visualization and Perception Research 27 © Copyright 1998 Haim Levkowitz Layout/design Too many boxes, borders, underlines Underlined text Boxed diagram No underline Un-boxed
28
Institute for Visualization and Perception Research 28 © Copyright 1998 Haim Levkowitz Background design Crowded Not crowded
29
Institute for Visualization and Perception Research 29 © Copyright 1998 Haim Levkowitz Color Bad contrast Deficiencies ignored Red near green Blue on black “Las Vegas” effect
30
Institute for Visualization and Perception Research 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
31
Institute for Visualization and Perception Research 31 © Copyright 1998 Haim Levkowitz Deficiencies ignored Red-green, most common Yellow-blue Red-green Yellow-blue
32
Institute for Visualization and Perception Research 32 © Copyright 1998 Haim Levkowitz Red near green Vibrate
33
Institute for Visualization and Perception Research 33 © Copyright 1998 Haim Levkowitz Blue on black Fuzzy blu e
34
Institute for Visualization and Perception Research 34 © Copyright 1998 Haim Levkowitz “Las Vegas” effect Window 2 text window 2 text window 2 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 3 text window 3 text window 3 text Window 2 text window 2 text window 2 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 3 text window 3 text window 3 text Too many colors, frames, fonts
35
Institute for Visualization and Perception Research 35 © Copyright 1998 Haim Levkowitz Multimedia Motion sickness! Blink Animated GIFs Java animations....
36
Institute for Visualization and Perception Research 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
37
Institute for Visualization and Perception Research 37 © Copyright 1998 Haim Levkowitz Bad color contrast http://www.att.com/ucs
38
Institute for Visualization and Perception Research 38 © Copyright 1998 Haim Levkowitz Bad background contrast http://www.cdromworld.com/special.htm
39
Institute for Visualization and Perception Research 39 © Copyright 1998 Haim Levkowitz Small text, hard colors http://www.e3central.com
40
Institute for Visualization and Perception Research 40 © Copyright 1998 Haim Levkowitz Busy http://www.e3expo.com
41
Institute for Visualization and Perception Research 41 © Copyright 1998 Haim Levkowitz Tough color contrast, busy http://www.Intellifax.com
42
Institute for Visualization and Perception Research 42 © Copyright 1998 Haim Levkowitz Colors, small text, busy http://switchboard.com
43
Institute for Visualization and Perception Research 43 © Copyright 1998 Haim Levkowitz Busy http://switchboard.com, results
44
Institute for Visualization and Perception Research 44 © Copyright 1998 Haim Levkowitz You tell me! http://www.comradery.com/e3/crindex.html
45
Institute for Visualization and Perception Research 45 © Copyright 1998 Haim Levkowitz http://want2dance.com
46
Institute for Visualization and Perception Research 46 © Copyright 1998 Haim Levkowitz http://www.subjectmatters.com
47
Institute for Visualization and Perception Research 47 © Copyright 1998 Haim Levkowitz http://lynda.com
48
Institute for Visualization and Perception Research 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
49
Institute for Visualization and Perception Research 49 © Copyright 1998 Haim Levkowitz Traffic & road signs School bus “Please do not tailgate” Vertical street signs “Can’t read” color contrast More
50
Institute for Visualization and Perception Research 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
51
Institute for Visualization and Perception Research 51 © Copyright 1998 Haim Levkowitz Do not tailgate
52
Institute for Visualization and Perception Research 52 © Copyright 1998 Haim Levkowitz Do not tailgate, again Please Do Not Tailgate
53
Institute for Visualization and Perception Research 53 © Copyright 1998 Haim Levkowitz Vertical street sign
54
Institute for Visualization and Perception Research 54 © Copyright 1998 Haim Levkowitz “Can’t read” color contrast
55
Institute for Visualization and Perception Research 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
Similar presentations
© 2024 SlidePlayer.com Inc.
All rights reserved.