Information Design

2

London Underground  Abstraction is key to design. This is one of the best examples.  First subway map to notice that public transit map doesn’t need to exactly follow the path that the trains/buses follow.  What is important is the general direction & what are the stops. This makes is MUCH easier to read (you don’t need to know all the little wiggles). 3

How People Read Online  They don’t. They skip between a bunch of windows.  As a result, Web pages have to employ scannable text, using  highlighted keywords (hypertext links serve as one form of highlighting; typeface variations and color are others)  meaningful sub-headings (not "clever" ones)  bulleted lists  one idea per paragraph (users will skip over any additional ideas if they are not caught by the first few words in the paragraph)  the inverted pyramid style, starting with the conclusion  half the word count (or less) than conventional writing 4

 Credibility is important for Web users, since it is unclear who is behind information on the Web and whether a page can be trusted. Credibility can be increased by high-quality graphics, good writing, and use of outbound hypertext links. Links to other sites show that the authors have done their homework and are not afraid to let readers visit other sites.  Users detested "marketese"; the promotional writing style with boastful subjective claims ("hottest ever") that currently is prevalent on the Web. Web users are busy: they want to get the straight facts. Also, credibility suffers when users clearly see that the site exaggerates. 5

 Measuring the Effect of Writing Strategy 6

Interlaced Browsing  tml  Clearly prevalent on desktop. Let’s talk about mobile. 7

8

Low-Scent Navigation 9

Speaking Block Navigation examples/ 10

 Javal also discovered that (at least in Roman languages), a line of words in which only the upper half is visible is read more easily than one in which only the lower half is exposed. I am a jelly donut jfk spoke in berlin 11

Expectation  Plays an Important Role THE CAT TAE CHT 12

 People are faster to find an element in a map when its in the typeface they expect.  So people are fast when the typeface is all the same. And they’re fast when the prompt typeface matches the actual typeface.  But they’re slow when the type varies and the prompt doesn’t match the actual typeface. “there may be as much as a 300 percent difference for search time between correct and incorrect expectations” 13

14

Saccades  Discovered by Professor Emile Javal, U. Of Paris. ~1880.  “Perception of reading material only occurs during pauses since saccadic inter-fixation moves are so rapid that no clear vision is possible. On the average, pauses take 92 to 94 percent of the reading time and movements take 6 to 8 percent.” -- Tinker 15

16

Eyetracking 17

Design for Glanceability  With news homepages, readers' instincts are to first look at the flag/logo and top headlines in the upper left.  While each site is different, you might look at your own website and see what content you have in which zones. 18

 zones of importance we formulated from the Eyetrack data. 19

Color: Edward Tufte  our visual system has a very difficult time treating hue in an ordered way  each area is *different*, but none of the areas have an intuitive relationship between each other.  This is how most computer scientist would design a map  This is supposed to convey height above sea level.  However, perception system can’t use hue for how much 20

 Color sets that vary primarily by luminance are much easier for us to order. two color sets:  browns for above ground, blues for below.  The much more muted colors also much easier to read the information.  Cartographers have been doing this for 2000 years. 21

 The key is to know:  under water or not under water?  Then, how far for each case: deeper, the color gets darker.  Intensity is a great axis for presenting quantitative information. 22

Technology-Centered Colors  Use three sliders to pick colors with RGB, almost forces us to end up with bad colors. If you evenly space things in RGB, all of your colors are oversaturated. 23

Human-Centered Colors  Munsell (left): Perceptually based  Pantone (right): Functionally based 24

 Munsell based on psychology experiments.  Pantone is especially useful for print design. They picked very reasonable colors. 25

Color (Java look & feel)  Six color semantic scheme  Clean, consistent look  Easy on eyes (mostly gray) 26

 Same Java look & feel guidelines book  Everything in Java is from 6 colors  Primary colors are all purple and secondary colors are all gray.  When highlighted they have color when not highlighted they have gray. 27

How to get color right  Design in grayscale first  Keep luminance values from grayscale when moving to color 28

Set of Axis  Chronicle film schema -- can never remember how good.  E-bay’s -- even worse. Depending on how many items you have sold you get a different star. Totally random ordering.  A more effective way is to have the entire scale with it partly filled in (3 stars filled in, 2 stars emptied).  Stars superior to numbers since people can see this pre-attentively very quickly without read & think. 29

30

31

Proportion and Scale Kevin Mullet and Darrell Sano, Designing Visual Interfaces 32

 while size and other cues provide for quantitative comparison, color (even luminance) only provides for ordering.  If the goal is contrast along any of these axes, make it distinct!  Forms of visual coding. What can we notice very quickly: size, intensity, orientation, texture, shape, position in space.  Take advantage of these variables to present information. 33

Web Design Patterns  Web patterns important and persistent (!) Source: van Duyne, Doug and James Landay and Jason Hong. The Design of Sites. Prentice Hall,

The Importance of Patterns  Key options  Design patterns  Designing by example  Users will work well with UI’s that build upon concepts that they are familiar with Source: Alexander, Christopher. A Pattern Language. Oxford University Press,

Small Multiples  Economy of line  Many similarities enable us to notice differences 36

 The person is gray… just enough to tell us there is a person. The important thing is that they are holding lights and what they are doing with the lights (the important information is bright – red & yellow)  Japanese book for children on t-shirt colors that match 37

S M A L L M U L T I P L E S International Women’s Day  Diaz, Estela 1974  Echeverria, Heriberto

 Small multiples convey the important information: multi-racial society & everyone is included (same exact form – the only data is the different colors!) The outline form is the same – but different professions. A woman can be anything she wants! Everyone is included. 39

Reid Miles, Blue Note Cover 40

 Small multiples for a visual pun. Tina Brooks is blue like all of the squares. 41

Tree Maps (SmartMoney) 42

 Information visualization is big app for visual design on computers (less common on paper outside of cartography)  Ben Schneiderman’s Tree Map (U. of Mayrland) 43

Tree Maps (PhotoMesa) 44

Design Galleries 45

 From Mitsubishi Research. If I use a slider, most systems give me no idea of what that control will do.  Design galleries let me preview the possible changes 46

Design Galleries 47