4 Information Design: How to make the world a better place in four easy steps Nancy Bray

I Information Design The practice and skill of preparing information so humans can use it efficiently and effectively

29 700 000 000 web pages

16,000 advertisements logos labels a day

1,000 new books a day

178 messages a day

178 messages

a day

10 point drop in IQ

10

point drop in IQ

5 point drop in IQ

Better information makes for a better world

1 Step One: Learn from (the) experience(d)

Contrast C

Advice Use white space generously Don’t introduce too much variety (i.e., too many fonts, colours) Use contrast to organize your information Limit use of bold, italics, underlines

Use white space generously

Don’t introduce too much variety (i.e., too many fonts, colours)

Use contrast to organize your information

Limit use of bold, italics, underlines

Repetition R

Advice Same type of elements should always look the same Use “styles” in word processors No more than two types of font

Same type of elements should always look the same

Use “styles” in word processors

No more than two types of font

Alignment A

Advice Use your grids and rulers Turn off automatic resizing in PowerPoint Shorter line length helps readability

Use your grids and rulers

Turn off automatic resizing in PowerPoint

Shorter line length helps readability

Proximity P

Advice Avoid lists of more than 5 – 7 items Chunk information into smaller groups Count number of visual elements – no more than five

Avoid lists of more than 5 – 7 items

Chunk information into smaller groups

Count number of visual elements – no more than five

CRAP Contrast Repetition Alignment Proximity

CRAP

Exercise One

2 Step Two: Medium matters

What works on paper doesn’t work on screen

1 2 3 4

Read 25 % slower Scan F - pattern

Read 25 % slower

Scan

F - pattern

1 2 3 4

x

Exercise Two

3 Step Three: People matter

Who are your users?

What do they want to do?

Information What information is needed to support user objectives? What is the most important information for the user? What information is not as important? Is a Web site the most appropriate medium to communicate the necessary information? How can you get them there?

What information is needed to support user objectives?

What is the most important information for the user?

What information is not as important?

Is a Web site the most appropriate medium to communicate the necessary information?

Exercise Three

4 Step Four: When in doubt, try it out

Test your structure

Test your labels

Look! Listen!

Exercise Four

S Some final thoughts…

You are the problem

Break the rules to help your users

1234 Learn from (the) experience(d) Medium matters People matter When in doubt, test it out

Learn from (the) experience(d)

Medium matters

People matter

When in doubt, test it out

Inspirations The Non-Designer’s Design Book by Robin Williams www.useit.com by Jakob Nielsen The Design of Everyday Things by Donald Norman Presentation Zen by Garr Reynolds

The Non-Designer’s Design Book by Robin Williams

www.useit.com by Jakob Nielsen

The Design of Everyday Things by Donald Norman

Presentation Zen by Garr Reynolds

References Slide 2: Definition from http://en.wikipedia.org/wiki/Information_design . Slide 3: Photo from http://www.edwardburtynsky.com/ Statistic from http://www.boutell.com/newfaq/misc/sizeofweb.html Slide 4: Photo from http://www.flickr.com/photos/stuckincustoms/440698504/sizes/l/ Slide 5: Photo from http://www.flickr.com/photos/bowena/497047443/sizes/o/ Slide 6: Info from http://library.humboldt.edu/~ccm/fingertips/ioverloadstats.html Photo from www.flickr.com/photos/branimir/181875640/ Slide 7: Photo from istockphoto.com Slide 8: Info from (http://www.newscientist.com/article.ns?id=dn7298) Photo from http://www.flickr.com/photos/confusedvision/135015446/ Slide 9: Photo from http://www.flickr.com/photos/will-lion/2595497078/sizes/o/

Slide 2:

Definition from http://en.wikipedia.org/wiki/Information_design .

Slide 3:

Photo from http://www.edwardburtynsky.com/

Statistic from http://www.boutell.com/newfaq/misc/sizeofweb.html

Slide 4:

Photo from http://www.flickr.com/photos/stuckincustoms/440698504/sizes/l/

Slide 5:

Photo from http://www.flickr.com/photos/bowena/497047443/sizes/o/

Slide 6:

Info from http://library.humboldt.edu/~ccm/fingertips/ioverloadstats.html

Photo from www.flickr.com/photos/branimir/181875640/

Slide 7:

Photo from istockphoto.com

Slide 8:

Info from (http://www.newscientist.com/article.ns?id=dn7298)

Photo from http://www.flickr.com/photos/confusedvision/135015446/

Slide 9:

Photo from http://www.flickr.com/photos/will-lion/2595497078/sizes/o/

References Slides 12 – 28 Four principles of design from “The Non-Designers Design Book” by Robin Williams Bad designs from http://www.webpagesthatsuck.com/ Slide 13: www.havenworks.com Slide 14: www.google.ca Slide 17: http://www.tracyskarate.com/ Slide 18: www.crazyegg.com Slide 21: http:// www.alternativetransportservices.co.uk / Slide 22: www.littlelines.com Slide 25: http:// www.teacherxpress.com / Slide 26: www.mozilla.com

Slides 12 – 28

Four principles of design from “The Non-Designers Design Book” by Robin Williams

Bad designs from http://www.webpagesthatsuck.com/

Slide 13:

www.havenworks.com

Slide 14:

www.google.ca

Slide 17:

http://www.tracyskarate.com/

Slide 18:

www.crazyegg.com

Slide 21:

http:// www.alternativetransportservices.co.uk /

Slide 22:

www.littlelines.com

Slide 25:

http:// www.teacherxpress.com /

Slide 26:

www.mozilla.com

References Slide 32: Photo from http://upload.wikimedia.org/wikipedia/commons/4/41/NewtonsPrincipia.jpg Slide 33: Photo from http://www.flickr.com/photos/jhat/80371024/sizes/o/ Slide 35: Photo from http://www.mattdempsey.com/ Slide 39: Photo from http://www.flickr.com/photos/dontwreckyourhead/2504910164/sizes/l/ Slide 40: Photo from http://www.flickr.com/photos/dontwreckyourhead/2504910164/sizes/l/ Slide 41: Photo from http://www.flickr.com/photos/leecullivan/367930471/sizes/l/ Slide 44: Photo from www.useit.com

Slide 32:

Photo from http://upload.wikimedia.org/wikipedia/commons/4/41/NewtonsPrincipia.jpg

Slide 33:

Photo from http://www.flickr.com/photos/jhat/80371024/sizes/o/

Slide 35:

Photo from http://www.mattdempsey.com/

Slide 39:

Photo from http://www.flickr.com/photos/dontwreckyourhead/2504910164/sizes/l/

Slide 40:

Photo from http://www.flickr.com/photos/dontwreckyourhead/2504910164/sizes/l/

Slide 41:

Photo from http://www.flickr.com/photos/leecullivan/367930471/sizes/l/

Slide 44:

Photo from www.useit.com

References Slide 45: Photo from http://www.flickr.com/photos/pintuck/439883792/sizes/o/in/photostream/ Slide 46: Photo from istockphoto.com Slide 49: Photo from istockphoto.com Slide 50: Photo from http://www.flickr.com/photos/11266609@N00/2699243208/sizes/l/in/photostream/ Slide 51: Photo from http://www.worstedwitch.com/pix/2006/03/29/hoot.gif

Slide 45:

Photo from http://www.flickr.com/photos/pintuck/439883792/sizes/o/in/photostream/

Slide 46:

Photo from istockphoto.com

Slide 49:

Photo from istockphoto.com

Slide 50:

Photo from http://www.flickr.com/photos/11266609@N00/2699243208/sizes/l/in/photostream/

Slide 51: Photo from http://www.worstedwitch.com/pix/2006/03/29/hoot.gif