Designing for Visual Efficiency (FITC09)
Upcoming SlideShare
Loading in...5
×
 

Designing for Visual Efficiency (FITC09)

on

  • 7,921 views

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 & ...

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.

Statistics

Views

Total Views
7,921
Views on SlideShare
7,401
Embed Views
520

Actions

Likes
20
Downloads
395
Comments
1

11 Embeds 520

http://ryancoleman.ca 295
http://www.rte.ca 149
http://tumblr.ryancoleman.ca 31
http://work.ryancoleman.ca 17
http://www.slideshare.net 13
http://www.visionjar.com 6
http://www.imagemgr.com 4
http://www.linkedin.com 2
http://imagemgr.com 1
http://translate.googleusercontent.com 1
http://webcache.googleusercontent.com 1
More...

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Thanks for sharing.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Designing for Visual Efficiency (FITC09) Designing for Visual Efficiency (FITC09) Presentation Transcript

  • 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 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
  • 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
  • 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
  • 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 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.
  • 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 correctly for every important cognitive task the display is intended to support. Colin Ware Visual Thinking for Design
  • 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 ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ
  • 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 well as links to suggested follow-up reading available at: http://ryancoleman.ca/fitc09 Twitter | @ryancoleman