4Information Design:How to make the world a better placein four easy steps

Nancy Bray

IInformation 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

logoslabelsa day

1,000new books

a day

178 messages

a day

10 point dropin IQ

5 point drop

in IQ

Better informationmakes for a better world

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

CContrast

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

RRepetition

Advice• Same type of elements should

always look the same• Use “styles” in word processors• No more than two types of font

AAlignment

Advice• Use your grids and rulers• Turn off automatic resizing in

PowerPoint • Shorter line length helps

readability

PProximity

Advice• Avoid lists of more than 5 – 7

items• Chunk information into smaller

groups• Count number of visual elements –

no more than five

CRAPContrast

RepetitionAlignmentProximity

Exercise One

2Step Two:Medium matters

What works onpaper

doesn’t workon screen

1

2

3

4

• Read 25 % slower• Scan• F - pattern

1

2

3

4

x

Exercise Two

3Step Three:

People matter

Who are your users?

What do theywant 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?

Exercise Three

4Step Four:When in doubt, try it out

Test yourstructure

Test your labels

Look!Listen!

Exercise Four

SSome final thoughts…

You are the problem

Break the rules to help your users

12341. Learn from (the)

experience(d)

2. Medium matters

3. People matter

4. When in doubt, test it out

InspirationsThe 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

ReferencesSlide 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.htmlPhoto 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/

ReferencesSlides 12 – 28Four principles of design from “The Non-Designers Design Book” by Robin WilliamsBad 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

ReferencesSlide 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