Designing for Visual Efficiency (FITC09)

5,553 views

Published on

My presentation that I gave at FITC Toronto 2009. It focuses on how we see and introduces the idea of how to design to make your visuals as visually efficient as possible for our brains to see & process.

Published in: Lifestyle, Business, Design
1 Comment
21 Likes
Statistics
Notes
  • Thanks for sharing.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
5,553
On SlideShare
0
From Embeds
0
Number of Embeds
534
Actions
Shares
0
Downloads
405
Comments
1
Likes
21
Embeds 0
No embeds

No notes for slide
  • Designing for Visual Efficiency (FITC09)

    1. 1. Ryan Coleman FITC Toronto April 27, 2009 Exciting Data: Designing for Visual Efficiency
    2. 2. INTRODUCTION
    3. 3. AGENDA WHAT’S YOUR STORY HOW WE SEE DESIGNING FOR VISUAL EFFICIENCY SUMMARY
    4. 4. Community Evangelist for VizThink
    5. 5. Freelance Facilitator
    6. 6. WHAT’S YOUR STORY?
    7. 7. - Nancy Duarte Slide:ology Data slides are not really about the data. They are about the meaning of the data.
    8. 8. What are you trying to say ?
    9. 9. What is your viewer looking for ?
    10. 10. Why are you saying it ?
    11. 11. What do you want them to do ?
    12. 12. Use Cases: Not just for Software ? ! What? Why? Do?
    13. 13. You don’t have to use the data just because it’s there *
    14. 14. U.S. Pet Ownership — 2007 Source: American Veterinary Medical Association Dogs Cats Birds Horses Percent of households owning 37.20% 32.40% 3.90% 1.80% Number of households owning 43,021,000 37,460,000 4,453,000 2,087,000 Average number owned per household 1.7 2.2 2.5 3.5 Total number in United States 72,114,000 81,721,000 11,199,000 7,295,000 Veterinary visits per household per year (mean) 2.6 1.7 0.3 2.2 Veterinary expenditure per household per year (mean) $356 $190 $25 $360 Veterinary expenditure per animal (mean) $200 $81 $9 $92
    15. 15. U.S. Pet Ownership — 2007 Source: American Veterinary Medical Association Dogs Cats Birds Horses Percent of households owning 37.20% 32.40% 3.90% 1.80% Number of households owning 43,021,000 37,460,000 4,453,000 2,087,000 Average number owned per household 1.7 2.2 2.5 3.5 Total number in United States 72,114,000 81,721,000 11,199,000 7,295,000 Veterinary visits per household per year (mean) 2.6 1.7 0.3 2.2 Veterinary expenditure per household per year (mean) $356 $190 $25 $360 Veterinary expenditure per animal (mean) $200 $81 $9 $92
    16. 16. U.S. Pet Ownership (2007) % of Houses Owning Dogs Cats Birds Horses Percent of households owning 37.20% 32.40% 3.90% 1.80% Number of households owning 43,021,000 37,460,000 4,453,000 2,087,000 Average number owned per household 1.7 2.2 2.5 3.5 Total number in United States 72,114,000 81,721,000 11,199,000 7,295,000 Veterinary visits per household per year (mean) 2.6 1.7 0.3 2.2 Veterinary expenditure per household per year (mean) $356 $190 $25 $360 Veterinary expenditure per animal (mean) $200 $81 $9 $92
    17. 17. U.S. Pet Ownership — 2007 % of Houses Owning
    18. 18. U.S. Pet Ownership — 2007 % of Houses Owning
    19. 19. % of U.S. Houses With Dogs — 2007
    20. 20. 37% of American Homes have a Dog Photo: Digital_image_fan (Flickr)
    21. 21. You don’t have to use the data just because it’s there * * But you do have to be ethical.
    22. 22. 99% of users reported no serious side effects Photo: Shoothead (Flickr)
    23. 23. % Experienced Serious Side Effects 1 Moderate Side Effects 90 Mild Side Effects 8 No Side Effects 1
    24. 24. Know your story before starting to design
    25. 25. How We See
    26. 26. Approximate size of what’s in focus at any given time. Let’s Try Something
    27. 27. Represents Approx. 5% of our visual field… … but uses HALF of our visual processing power.
    28. 28. incurable_hippie (flickr)
    29. 29. We can’t see everything Photo: VictoriaPeckham (Flickr)
    30. 30. Instead, we see through a series of visual queries
    31. 33. Attention Discovery WHAT WHERE
    32. 34. Problem Solving Eye Movements Pattern Testing Based on illustration by Colin Ware, Visual Thinking for Design
    33. 35. Answering the WHAT (Understanding What We See)
    34. 36. - Features Discovery - Patterns - Objects
    35. 37. Neurons are tuned for specific features
    36. 38. We don’t focus on everything Photo: VictoriaPeckham (Flickr)
    37. 39. Photo: Woodlywonderworks (Flickr)
    38. 40. Photo: Bucklava (Flickr)
    39. 44. = “Face”
    40. 45. Scott McCloud Understanding Comics
    41. 46. Photo: Gaetan Lee, Clip_Works, BaylorBear78, Chidorian, (Flickr)
    42. 47. Source: http://www.opticalillusion.net/
    43. 49. Patterns are learned over time
    44. 50. Aoccdrnig to rscheearch at Cmabrigde uinervtisy, it deosn't mttaer waht oredr the ltteers in a wrod are, the olny iprmoetnt tihng is taht the frist and lsat ltteres are at the rghit pclae. The rset can be a tatol mses and you can sitll raed it wouthit a porbelm. Tihs is bcuseae we do not raed ervey lteter by it slef but the wrod as a wlohe.
    45. 51. Other Learned Patterns
    46. 52. Complex patterns will vary based on the viewer’s experience
    47. 53. Over time, higher level patterns are combined
    48. 54. Proxies are created
    49. 55. Photo: thetruthabout, wootang01, dno1967, sylvar (Flickr)
    50. 56. Watch carefully…
    51. 60. ?
    52. 61. What station was it?
    53. 62. What colour was the canopy?
    54. 63. What kind of trees?
    55. 65. We’re capable of rapidly accessing complex patterns…
    56. 66. … but to comprehend them we need to process them deeper.
    57. 67. Features Pattern Processing Objects
    58. 68. Photo: Bucklava (Flickr)
    59. 69. Visual Working Memory
    60. 70. Designing for Visual Efficiency
    61. 71. ... the goal of information design must be to design displays so that visual queries are processed both rapidly and correctly for every important cognitive task the display is intended to support. Colin Ware Visual Thinking for Design
    62. 72. Answering the WHERE (Understanding how we search visually)
    63. 73. Based on illustration by Colin Ware, Visual Thinking for Design Pattern Testing Eye Movement Move and Scan
    64. 74. Visual Efficiency = Reducing Visual Searches
    65. 75. Cognitive Effort vs. “ At-a-glance”
    66. 76. Where’s Waldo Example (Cognitively Difficult)
    67. 78. Make Your Graphics Pop
    68. 79. 4 Pop-out Channels Colour Proximity Motion Shape
    69. 80. Colour HUE LIGHTNESS
    70. 81. Photo: Woodlywonderworks (Flickr)
    71. 82. Photo: Pink Sherbet Photography (Flickr)
    72. 85. Luminance Contrast ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ
    73. 86. Ensure highest contrast goes to the emphasized elements .
    74. 87. Ensure highest contrast goes to the emphasized elements .
    75. 88. Use the strongest hues for the most frequently used elements
    76. 89. Image: Wikipedia Commons
    77. 90. Image: Wikipedia Commons
    78. 91. Shape SIZE ORIENTATION DISTORTION
    79. 92. Proximity SPATIAL GROUPING
    80. 93. SPATIAL GROUPING Proximity
    81. 94. SPATIAL GROUPING Proximity
    82. 95. Motion
    83. 96. Subtlety is not effective.
    84. 97. Avoid visual conjunctions
    85. 99. That said… Channels can be layered
    86. 101. Be aware of visual interference
    87. 102. Word Word Word Word Word Word Word Word Word Image: Pink Sherbet Photography (Flickr)
    88. 103. Avoid Multi-Chunk Queries
    89. 106. Visual Search can be primed / tuned
    90. 108. Don’t trust YOUR eyes.
    91. 109. In Summary
    92. 110. Plan Your Narrative
    93. 111. Consider Your User’s Visual Queries
    94. 112. Design to satisfy those queries as efficiently as possible
    95. 113. Thanks! Web | http://ryancoleman.ca Email | [email_address] VizThink | http://vizthink.com I’ll make the deck, as well as links to suggested follow-up reading available at: http://ryancoleman.ca/fitc09 Twitter | @ryancoleman

    ×