Ryan Coleman FITC Toronto April 27, 2009 Exciting Data: Designing for Visual Efficiency
INTRODUCTION
AGENDA WHAT’S YOUR STORY HOW WE SEE DESIGNING FOR VISUAL EFFICIENCY SUMMARY
Community Evangelist for VizThink
Freelance Facilitator
WHAT’S YOUR STORY?
- Nancy Duarte Slide:ology Data slides are not really about the data. They are about the  meaning   of the data.
What are you trying to say ?
What is your viewer looking for ?
Why are you saying it ?
What do you want them to do ?
Use Cases: Not just for Software ? ! What? Why? Do?
You don’t have to use the data just because it’s there *
U.S. Pet Ownership — 2007 Source: American Veterinary Medical Association Dogs  Cats  Birds  Horses Percent of households ...
U.S. Pet Ownership — 2007 Source: American Veterinary Medical Association Dogs  Cats  Birds  Horses Percent of households ...
U.S. Pet Ownership (2007) % of Houses Owning Dogs  Cats  Birds  Horses Percent of households owning  37.20% 32.40% 3.90% 1...
U.S. Pet Ownership — 2007 % of Houses Owning
U.S. Pet Ownership — 2007 % of Houses Owning
% of U.S. Houses With Dogs — 2007
37% of American Homes have a Dog Photo: Digital_image_fan (Flickr)
You don’t have to use the data just because it’s there * * But you do have to be ethical.
99%  of users reported no serious side effects  Photo: Shoothead (Flickr)
% Experienced Serious Side Effects 1 Moderate Side Effects 90 Mild Side Effects 8 No Side Effects 1
Know your story before starting to design
How We See
Approximate size of what’s in focus at any given time. Let’s Try Something
Represents Approx. 5% of our visual field… …  but uses HALF of our visual processing power.
incurable_hippie (flickr)
We can’t see everything Photo: VictoriaPeckham (Flickr)
Instead, we see through a series of  visual queries
 
 
Attention Discovery WHAT WHERE
Problem Solving Eye Movements Pattern Testing Based on illustration by Colin Ware,  Visual Thinking for Design
Answering the  WHAT   (Understanding What We See)
- Features Discovery - Patterns - Objects
Neurons are tuned for specific features
We don’t focus on everything Photo: VictoriaPeckham (Flickr)
Photo: Woodlywonderworks (Flickr)
Photo: Bucklava (Flickr)
 
 
 
= “Face”
Scott McCloud Understanding Comics
Photo: Gaetan Lee, Clip_Works, BaylorBear78, Chidorian,  (Flickr)
Source: http://www.opticalillusion.net/
 
Patterns are learned over time
Aoccdrnig to rscheearch at Cmabrigde uinervtisy, it deosn't mttaer waht oredr the ltteers in a wrod are, the olny iprmoetn...
Other Learned Patterns
Complex patterns will vary based on the viewer’s experience
Over time, higher level patterns are combined
Proxies are created
Photo: thetruthabout, wootang01, dno1967, sylvar  (Flickr)
Watch carefully…
 
 
 
?
What station was it?
What colour was the canopy?
What kind of trees?
 
We’re capable of rapidly accessing complex patterns…
…  but to comprehend them we need to process them deeper.
Features Pattern Processing Objects
Photo: Bucklava (Flickr)
Visual Working Memory
Designing for Visual Efficiency
... the goal of information design must be to design displays so that visual queries are processed both rapidly and correc...
Answering the  WHERE   (Understanding how we search visually)
Based on illustration by Colin Ware,  Visual Thinking for Design Pattern Testing Eye Movement Move and Scan
Visual Efficiency  =   Reducing Visual Searches
Cognitive Effort vs.  “ At-a-glance”
Where’s Waldo Example (Cognitively Difficult)
 
Make Your Graphics  Pop
4 Pop-out Channels Colour Proximity Motion Shape
Colour HUE LIGHTNESS
Photo: Woodlywonderworks (Flickr)
Photo: Pink Sherbet Photography (Flickr)
 
 
Luminance Contrast ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUV...
Ensure highest contrast goes to the  emphasized elements .
Ensure highest contrast goes to the  emphasized elements .
Use the strongest hues for the most frequently used elements
Image: Wikipedia Commons
Image: Wikipedia Commons
Shape SIZE ORIENTATION DISTORTION
Proximity SPATIAL GROUPING
SPATIAL GROUPING Proximity
SPATIAL GROUPING Proximity
Motion
Subtlety is not effective.
Avoid visual conjunctions
 
That said… Channels can be layered
 
Be aware of  visual interference
Word Word Word Word Word Word Word Word Word Image: Pink Sherbet Photography (Flickr)
Avoid  Multi-Chunk Queries
 
 
Visual Search can be primed / tuned
 
Don’t trust  YOUR eyes.
In Summary
Plan Your Narrative
Consider Your User’s Visual Queries
Design to satisfy those queries as efficiently as possible
Thanks! Web  |  http://ryancoleman.ca Email  |  [email_address] VizThink  |  http://vizthink.com I’ll make the deck, as we...
Upcoming SlideShare
Loading in...5
×

Designing for Visual Efficiency (FITC09)

4,562

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

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×