Information Design: 4 steps to save the world

2,857 views

Published on

Published in: Technology, Design
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,857
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
139
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide
  • Information design is the essential function of communications and public relations practioners, but it is important to all of us
  • Information Design: 4 steps to save the world

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

    ×