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

http://www.useit.com/alertbox/9710a.html

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

http://www.useit.com/alertbox/20000514.html

Clearly prevalent on desktop. Let’s talk about mobile.

7

8

Low-Scent Navigation

9

Speaking Block Navigationhttp://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-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

http://en.wikipedia.org/wiki/Eye_tracking16

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.

http://www.poynterextra.org/eyetrack2004/main.htm 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, 2006.

34

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, 1977 35

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 SInternational Women’s Day

Diaz, Estela 1974 Echeverria, Heriberto 1971

38

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

http://www.smartmoney.com/map-of-the-market/

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) http://www.cs.umd.edu/hcil/photomesa/

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