Your Brain On Graphics: IA Summit 2011 (can download)
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Your Brain On Graphics: IA Summit 2011 (can download)

Uploaded on

Research-inspired visual design based principles based on cognitive science. Please see the .pdf version for downloading. ...

Research-inspired visual design based principles based on cognitive science. Please see the .pdf version for downloading.

The downloadable PDF version.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 1,846 1,118 229 190 117 65 36 27 21 6 5 3 3 2 2 2 2 2 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Connie Malamed @cmalamed IA Summit 2011
  • 2. NEGLECTED CHILDREN ARE MADE TO FEEL INVISIBLE“Visuals are so powerful, they can turn this statement…”
  • 3. ls per suade Visua“into a persuasive appeal to eradicate childneglect.”
  • 4. mation hidden infor isuals showV
  • 5. blems lve proVis uals so Deaths from woundsıDeaths frompreventable diseasesı
  • 6. nguage cend laVisual s trans
  • 7. “Visuals are so powerful, very few people can understand the health care reform act,because it is a 400 page document with no graphics.”
  • 8. xplain V isuals e“And when Dan Roam created a visual explanation on Slide Share, a quarter of a millionpeople viewed it.”
  • 9. s of thinking Visuals promote new way“Visuals are so powerful, that we can now see an inconceivable amount of data, as in thisNew York Times interactive graphic that shows how different segments of the US populationspend their time throughout the day.”
  • 10. 2 More Than Decoration 5 1 3Connect Wired for Speed UpThrough Graphics YourEmotions Message 4 Make Visuals Efficient
  • 11. 1fo rG raphi cs
  • 12. That’s right! 20,000,000,000 neurons!More brainresourcesdevoted toVISION
  • 14. PICTURESUPERIORITYEFFECTWe have a bettermemory forpictures thanwords © Colin Hayes
  • 15. Pictures are areplica of theenvironment
  • 17. WORKING Limited Capacity ~4 bits ofMEMORY informationLimits theinformation weprocess Short Duration Just a few seconds
  • 18. COGNITIVELOADAll the demands placedon working memory inany one instance Working Memory
  • 19. “Research shows long-term memory is capable of storing a massive number of pictures.”
  • 20. People give meaning tothe visuals they process
  • 21. “The mind is not a camera.” Stephen M. Kosslyn
  • 23. “When we understand that slide, we’llhave won the war.”-- General Stanley McChrystal IC S RA PH Lı G FA I CAN
  • 24. Research-inspired Design Based on findings and evidence Considers how people perceiveand comprehend visual information Can be applied to the real world
  • 25. 2
an DecorationTh
  • 26. EXERCISE 1 EXERCISE 2 Tuck your chin into your Tuck your chin into your chest, and chest, and then lift your then lift your chin upward as far as chin upward as far as possible. possible. 6–10 repetitions 6–10 repetitions Lower your left ear toward your left Lower your left ear toward shoulder and then your right ear your left shoulder and then toward your right shoulder. your right ear toward your 6–10 repetitions right shoulder. 6–10 repetitions“When study participants were given easy-to-read instructions in Exercise 1, they thought theexercise wouldn’t take much effort. When the exact same instructions were displayed in aless legible typeface, subjects thought the exercise would be difficult to perform and wouldtake almost twice as long to get through.”
  • 27. Processing Fluencythe ease with which aperson processesinformation
  • 28. High-contrast Lima is in Peru Orsono is a city in ChileLow-contrast Lima is in Peru Orsono is a city in Chile“In another study people were shown statements in high-contrast and low-contrast text.Subjects were more likely to consider the very legible statements to be true than thestatements that were difficult to read. When people have an absence of knowledge about atopic, they must use other factors to evaluate whether statements are true.”
  • 29. If it’s easyto processit must be true!
  • 30. 3

  • 31. Pop OutPreattentiveProcessing Grouping
  • 32. Features that The primitive features of a visualpop out environment.
  • 33. ps out?What po
  • 34. Color
  • 35. “Color is used in web design to entice users to easily find and click on the call to action.”
  • 36. Size
  • 37. “Size is used in web design to create a visual hierarchy.”
  • 38. “On the Mail Chimp site, all the important elements are very large.”
  • 39. Shape © John Grimwade
  • 40. Orie ntation
  • 41. Movement“When we see static graphics of motion, our brain apparently perceives it as real movement,because those same areas of the brain become active.”
  • 42. Depth © JOE LERTOLA
  • 43. Review: ColorFeatures that Sizepop out Shape Orientation Movement Depth
  • 44. Grouping Perceptual conditions that force us to see parts as one unit
  • 45. Proximity“When the conditions for grouping are right, the whole unit takes precedence over theindividual elements.”
  • 46. roximi ty in UIP
  • 47. Sim ilarity
  • 48. Comm on Fate © GOOD AND HARD AT WORKı
  • 49. ednessC onnect ©Colin Hayes
  • 50. Bou ndaries Stephen Leckart, Wired ©Stephen Leckart, Wired
  • 51. “We use boundaries intuitively, to group and separate information.”
  • 52. Review: ProximityConditions for Similarityperceiving parts as a Common Fategroup Connectedness Boundaries
  • 53. 4
  • 54. Cognitive When attributes of a graphic areCompatibility consistent with their meaning, the information is easier to process.
  • 55. RED BLUE GREEN“The visual attributes of these words (color) are compatible with their meaning (these wereshown one at a time).”
  • 56. RED BLUE GREEN“The visual attributes of these words are NOT compatible with their meaning, causingcognitive discord, which slows down the processing of the information (these were shownone at a time).”
  • 57. “The visual attributes arecompatible with their meaning. Inparticular, notice the direction ofthe arrows.” ©Ninian Carter
  • 58. “If the arrow is flipped around, itcauses discord, slowing downprocessing.” ©Ninian Carter
  • 59. Provides fewer distractionsReducing Takes less time to perceiveRealismmakes graphics Minimizes loadcognitively efficient on working memory Easier to encode into long-term memory
  • 60. “What makes a graphic more (top) or less (bottom) realistic?”
  • 61. Minimalist graphics:  Fewer colors  Less detail  Smooth surfaces  Minimal shadows
  • 62. “Example of a header graphic relying on minimized visuals.”
  • 63. Silho uettes“The brain is good atrecognizing shapes andfilling in the details.”
  • 64. ©GOOD & Bradley R. Hughesı
  • 65. © Heather Corcoran
  • 66. L ine Art“Brilliant example of line art showing kissingprotocols around the world.” © Nigel Holmes
  • 67. “How to tie a scarf,explained with nowords and in line art.” © Nigel Holmes
  • 68. ic Gra phics Icon“Iconic graphics depictobjects using just enoughdetail so we can recognizethe object. Here, each cup isa graph showing the relativeamount of ingredients inespresso drinks. Iconicgraphics are easilyrecognizable and noextraneous visual cuesinterfere with processing.” ©Lokesh Dakar
  • 69. “Example of iconic graphics in web site design. Also, notice the grouping.”
  • 70. Sy mbols“Visual symbols are iconic graphics with an associative value that is learnedthrough culture or education. They are cognitively efficient for a visually literateaudience.”
  • 71. “Symbols are highly dependent on context. In one context, concentric curved linesrepresent wireless and in another context they represent an RSS feed.”
  • 72. SilhouettesReview:Ways to go Line Artminimalist Iconic Graphics Symbols
  • 73. 5
  • 74. “Emotions inform at a visceral level. As you see each photograph, notice the reaction in yourbody (these were shown one at a time).”
  • 75. COGNITION N EMOTIO“There is a long philosophical and scientific tradition stating that emotion and cognition areopposing phenomena. But brain imaging research and cognitive science now agree thatemotion and cognition are dynamically intertwined and interdependent.”
  • 76. Capture attentionEmotionsaffect mentalprocesses Increase brain activity Can improve retention
  • 77. We areparticularlyattuned tofaces.
  • 78. “Because we are attuned to reading the emotion in faces, the serious mood here contributesto the rugged and high-powered undergarments that are being sold.”
  • 79. “We follow the gaze of where a person is looking, which in this example, brings us right to thenavigation options.”
  • 80. Evencartoonishfaces!
  • 81. Emotionalimages areeffective forChangingAttitudes
  • 82. ©Sean Douglass“Emotional imagery gives data more impact.” ©SEAN DOUGLASS
  • 83. There’s another side to emotionSURPRISE!
  • 84. Surprise results fromnovelty or humorFrom the unusualjuxtaposition ofelementsFrom the unexpected
  • 87. •  Emotions and cognition are interdependentReview: •  We are attunedConnecting through to facesemotional imagery •  We follow the direction of someone’s gaze •  Evoke emotion through surprise, novelty and humor
  • 88. Thank YouFor more information on this subject –Book: Visual Language for DesignersVisual Communication Stream: • •  @cmalamedeLearning Stream: • •  @elearningcoach