際際滷

際際滷Share a Scribd company logo

Information Design: 4 steps to save the world

Download as PPT, PDF
K
kaipix

The document outlines four steps to make information design better: 1. Learn from experience - follow principles of contrast, repetition, alignment, and proximity. 2. Consider the medium - what works for print may not work online. People read slower and scan online. 3. Understand your users - know who they are, what they want to do, and design information to support their goals. 4. Test your work - test the structure, labels, and usability to improve the design. Break rules if needed to help users.

1 of 57
Downloaded 140 times
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
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 Dont 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
Alignment A
油
油
Advice 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
CRAP Contrast Repetition Alignment Proximity
Exercise One
2 Step Two: Medium matters
What works on paper doesnt work on screen
1 2 3 4
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?
Exercise Three
4 Step Four: When in doubt, try it out
Test your structure
Test your labels
Look! Listen!
Exercise Four
S Some final 岳鞄看顎乙鞄岳壊
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
油
Inspirations The Non-Designers 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 際際滷 2: Definition from http://en.wikipedia.org/wiki/Information_design . 際際滷 3: Photo from http://www.edwardburtynsky.com/ Statistic from http://www.boutell.com/newfaq/misc/sizeofweb.html 際際滷 4: Photo from http://www.flickr.com/photos/stuckincustoms/440698504/sizes/l/ 際際滷 5: Photo from http://www.flickr.com/photos/bowena/497047443/sizes/o/ 際際滷 6: Info from http://library.humboldt.edu/~ccm/fingertips/ioverloadstats.html Photo from www.flickr.com/photos/branimir/181875640/ 際際滷 7: Photo from istockphoto.com 際際滷 8: Info from (http://www.newscientist.com/article.ns?id=dn7298) Photo from http://www.flickr.com/photos/confusedvision/135015446/ 際際滷 9: Photo from http://www.flickr.com/photos/will-lion/2595497078/sizes/o/
References 際際滷s 12 28 Four principles of design from The Non-Designers Design Book by Robin Williams Bad designs from http://www.webpagesthatsuck.com/ 際際滷 13: www.havenworks.com 際際滷 14: www.google.ca 際際滷 17: http://www.tracyskarate.com/ 際際滷 18: www.crazyegg.com 際際滷 21: http:// www.alternativetransportservices.co.uk / 際際滷 22: www.littlelines.com 際際滷 25: http:// www.teacherxpress.com / 際際滷 26: www.mozilla.com
References 際際滷 32: Photo from http://upload.wikimedia.org/wikipedia/commons/4/41/NewtonsPrincipia.jpg 際際滷 33: Photo from http://www.flickr.com/photos/jhat/80371024/sizes/o/ 際際滷 35: Photo from http://www.mattdempsey.com/ 際際滷 39: Photo from http://www.flickr.com/photos/dontwreckyourhead/2504910164/sizes/l/ 際際滷 40: Photo from http://www.flickr.com/photos/dontwreckyourhead/2504910164/sizes/l/ 際際滷 41: Photo from http://www.flickr.com/photos/leecullivan/367930471/sizes/l/ 際際滷 44: Photo from www.useit.com
References 際際滷 45: Photo from http://www.flickr.com/photos/pintuck/439883792/sizes/o/in/photostream/ 際際滷 46: Photo from istockphoto.com 際際滷 49: Photo from istockphoto.com 際際滷 50: Photo from http://www.flickr.com/photos/11266609@N00/2699243208/sizes/l/in/photostream/ 際際滷 51: Photo from http://www.worstedwitch.com/pix/2006/03/29/hoot.gif

More Related Content

Information Design: 4 steps to save the world

  • 1. 4 Information Design: How to make the world a better place in four easy steps Nancy Bray
  • 2. I Information Design The practice and skill of preparing information so humans can use it efficiently and effectively
  • 3. 29 700 000 000 web pages
  • 4. 16,000 advertisements logos labels a day
  • 6. 178 messages a day
  • 7. 10 point drop in IQ
  • 8. 5 point drop in IQ
  • 9. 油
  • 10. Better information makes for a better world
  • 11. 1 Step One: Learn from (the) experience(d)
  • 13. 油
  • 14. 油
  • 15. Advice Use white space generously Dont introduce too much variety (i.e., too many fonts, colours) Use contrast to organize your information Limit use of bold, italics, underlines
  • 17. 油
  • 18. 油
  • 19. Advice Same type of elements should always look the same Use styles in word processors No more than two types of font
  • 21. 油
  • 22. 油
  • 23. Advice Use your grids and rulers Turn off automatic resizing in PowerPoint Shorter line length helps readability
  • 25. 油
  • 26. 油
  • 27. Advice Avoid lists of more than 5 7 items Chunk information into smaller groups Count number of visual elements no more than five
  • 28. CRAP Contrast Repetition Alignment Proximity
  • 30. 2 Step Two: Medium matters
  • 31. What works on paper doesnt work on screen
  • 32. 1 2 3 4
  • 33. Read 25 % slower Scan F - pattern
  • 34. 1 2 3 4
  • 35. 油
  • 36. x
  • 38. 3 Step Three: People matter
  • 39. Who are your users?
  • 40. What do they want to do?
  • 41. 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?
  • 43. 4 Step Four: When in doubt, try it out
  • 48. S Some final 岳鞄看顎乙鞄岳壊
  • 49. You are the problem
  • 50. Break the rules to help your users
  • 51. 1234 Learn from (the) experience(d) Medium matters People matter When in doubt, test it out
  • 52. 油
  • 53. Inspirations The Non-Designers Design Book by Robin Williams www.useit.com by Jakob Nielsen The Design of Everyday Things by Donald Norman Presentation Zen by Garr Reynolds
  • 54. References 際際滷 2: Definition from http://en.wikipedia.org/wiki/Information_design . 際際滷 3: Photo from http://www.edwardburtynsky.com/ Statistic from http://www.boutell.com/newfaq/misc/sizeofweb.html 際際滷 4: Photo from http://www.flickr.com/photos/stuckincustoms/440698504/sizes/l/ 際際滷 5: Photo from http://www.flickr.com/photos/bowena/497047443/sizes/o/ 際際滷 6: Info from http://library.humboldt.edu/~ccm/fingertips/ioverloadstats.html Photo from www.flickr.com/photos/branimir/181875640/ 際際滷 7: Photo from istockphoto.com 際際滷 8: Info from (http://www.newscientist.com/article.ns?id=dn7298) Photo from http://www.flickr.com/photos/confusedvision/135015446/ 際際滷 9: Photo from http://www.flickr.com/photos/will-lion/2595497078/sizes/o/
  • 55. References 際際滷s 12 28 Four principles of design from The Non-Designers Design Book by Robin Williams Bad designs from http://www.webpagesthatsuck.com/ 際際滷 13: www.havenworks.com 際際滷 14: www.google.ca 際際滷 17: http://www.tracyskarate.com/ 際際滷 18: www.crazyegg.com 際際滷 21: http:// www.alternativetransportservices.co.uk / 際際滷 22: www.littlelines.com 際際滷 25: http:// www.teacherxpress.com / 際際滷 26: www.mozilla.com
  • 56. References 際際滷 32: Photo from http://upload.wikimedia.org/wikipedia/commons/4/41/NewtonsPrincipia.jpg 際際滷 33: Photo from http://www.flickr.com/photos/jhat/80371024/sizes/o/ 際際滷 35: Photo from http://www.mattdempsey.com/ 際際滷 39: Photo from http://www.flickr.com/photos/dontwreckyourhead/2504910164/sizes/l/ 際際滷 40: Photo from http://www.flickr.com/photos/dontwreckyourhead/2504910164/sizes/l/ 際際滷 41: Photo from http://www.flickr.com/photos/leecullivan/367930471/sizes/l/ 際際滷 44: Photo from www.useit.com
  • 57. References 際際滷 45: Photo from http://www.flickr.com/photos/pintuck/439883792/sizes/o/in/photostream/ 際際滷 46: Photo from istockphoto.com 際際滷 49: Photo from istockphoto.com 際際滷 50: Photo from http://www.flickr.com/photos/11266609@N00/2699243208/sizes/l/in/photostream/ 際際滷 51: Photo from http://www.worstedwitch.com/pix/2006/03/29/hoot.gif

Editor's Notes

  • #2: Information design is the essential function of communications and public relations practioners, but it is important to all of us