Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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


Published on

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

The downloadable PDF version.

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

  1. 1. Connie Malamed @cmalamed IA Summit 2011
  2. 2. NEGLECTED CHILDREN ARE MADE TO FEEL INVISIBLE“Visuals are so powerful, they can turn this statement…”
  3. 3. ls per suade Visua“into a persuasive appeal to eradicate childneglect.”
  4. 4. mation hidden infor isuals showV
  5. 5. blems lve proVis uals so Deaths from woundsıDeaths frompreventable diseasesı
  6. 6. nguage cend laVisual s trans
  7. 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. 8. xplain V isuals e“And when Dan Roam created a visual explanation on Slide Share, a quarter of a millionpeople viewed it.”
  9. 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. 10. 2 More Than Decoration 5 1 3Connect Wired for Speed UpThrough Graphics YourEmotions Message 4 Make Visuals Efficient
  11. 11. 1fo rG raphi cs
  12. 12. That’s right! 20,000,000,000 neurons!More brainresourcesdevoted toVISION
  14. 14. PICTURESUPERIORITYEFFECTWe have a bettermemory forpictures thanwords © Colin Hayes
  15. 15. Pictures are areplica of theenvironment
  17. 17. WORKING Limited Capacity ~4 bits ofMEMORY informationLimits theinformation weprocess Short Duration Just a few seconds
  18. 18. COGNITIVELOADAll the demands placedon working memory inany one instance Working Memory
  19. 19. “Research shows long-term memory is capable of storing a massive number of pictures.”
  20. 20. People give meaning tothe visuals they process
  21. 21. “The mind is not a camera.” Stephen M. Kosslyn
  22. 22. P HICSGRA AIL AN F C
  23. 23. “When we understand that slide, we’llhave won the war.”-- General Stanley McChrystal IC S RA PH Lı G FA I CAN
  24. 24. Research-inspired Design Based on findings and evidence Considers how people perceiveand comprehend visual information Can be applied to the real world
  25. 25. 2
an DecorationTh
  26. 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. 27. Processing Fluencythe ease with which aperson processesinformation
  28. 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. 29. If it’s easyto processit must be true!
  30. 30. 3

  31. 31. Pop OutPreattentiveProcessing Grouping
  32. 32. Features that The primitive features of a visualpop out environment.
  33. 33. ps out?What po
  34. 34. Color
  35. 35. “Color is used in web design to entice users to easily find and click on the call to action.”
  36. 36. Size
  37. 37. “Size is used in web design to create a visual hierarchy.”
  38. 38. “On the Mail Chimp site, all the important elements are very large.”
  39. 39. Shape © John Grimwade
  40. 40. Orie ntation
  41. 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. 42. Depth © JOE LERTOLA
  43. 43. Review: ColorFeatures that Sizepop out Shape Orientation Movement Depth
  44. 44. Grouping Perceptual conditions that force us to see parts as one unit
  45. 45. Proximity“When the conditions for grouping are right, the whole unit takes precedence over theindividual elements.”
  46. 46. roximi ty in UIP
  47. 47. Sim ilarity
  48. 48. Comm on Fate © GOOD AND HARD AT WORKı
  49. 49. ednessC onnect ©Colin Hayes
  50. 50. Bou ndaries Stephen Leckart, Wired ©Stephen Leckart, Wired
  51. 51. “We use boundaries intuitively, to group and separate information.”
  52. 52. Review: ProximityConditions for Similarityperceiving parts as a Common Fategroup Connectedness Boundaries
  53. 53. 4
  54. 54. Cognitive When attributes of a graphic areCompatibility consistent with their meaning, the information is easier to process.
  55. 55. RED BLUE GREEN“The visual attributes of these words (color) are compatible with their meaning (these wereshown one at a time).”
  56. 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. 57. “The visual attributes arecompatible with their meaning. Inparticular, notice the direction ofthe arrows.” ©Ninian Carter
  58. 58. “If the arrow is flipped around, itcauses discord, slowing downprocessing.” ©Ninian Carter
  59. 59. Provides fewer distractionsReducing Takes less time to perceiveRealismmakes graphics Minimizes loadcognitively efficient on working memory Easier to encode into long-term memory
  60. 60. “What makes a graphic more (top) or less (bottom) realistic?”
  61. 61. Minimalist graphics:  Fewer colors  Less detail  Smooth surfaces  Minimal shadows
  62. 62. “Example of a header graphic relying on minimized visuals.”
  63. 63. Silho uettes“The brain is good atrecognizing shapes andfilling in the details.”
  64. 64. ©GOOD & Bradley R. Hughesı
  65. 65. © Heather Corcoran
  66. 66. L ine Art“Brilliant example of line art showing kissingprotocols around the world.” © Nigel Holmes
  67. 67. “How to tie a scarf,explained with nowords and in line art.” © Nigel Holmes
  68. 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. 69. “Example of iconic graphics in web site design. Also, notice the grouping.”
  70. 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. 71. “Symbols are highly dependent on context. In one context, concentric curved linesrepresent wireless and in another context they represent an RSS feed.”
  72. 72. SilhouettesReview:Ways to go Line Artminimalist Iconic Graphics Symbols
  73. 73. 5
  74. 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. 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. 76. Capture attentionEmotionsaffect mentalprocesses Increase brain activity Can improve retention
  77. 77. We areparticularlyattuned tofaces.
  78. 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. 79. “We follow the gaze of where a person is looking, which in this example, brings us right to thenavigation options.”
  80. 80. Evencartoonishfaces!
  81. 81. Emotionalimages areeffective forChangingAttitudes
  82. 82. ©Sean Douglass“Emotional imagery gives data more impact.” ©SEAN DOUGLASS
  83. 83. There’s another side to emotionSURPRISE!
  84. 84. Surprise results fromnovelty or humorFrom the unusualjuxtaposition ofelementsFrom the unexpected
  85. 85. AD BY GREY PARIS
  87. 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. 88. Thank YouFor more information on this subject –Book: Visual Language for DesignersVisual Communication Stream: • •  @cmalamedeLearning Stream: • •  @elearningcoach