Your Brain On Graphics: IA Summit 2011 (can download)
19 likes3,220 views
Connie Malamed's presentation at the IA Summit 2011 emphasizes the power of visuals in communication and their impact on understanding complex information, such as health care reform. Visuals enhance memory retention, engagement, and emotional response, making them essential in conveying messages effectively. The document discusses various visual design principles, including cognitive compatibility, and the emotional interplay between cognition and visual processing.
Your Brain On Graphics: IA Summit 2011 (can download)
- 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 child neglect.”
- 4. mation hidden infor isuals show V
- 5. blems lve pro Vis uals so Deaths from woundsı Deaths from preventable diseasesı
- 6. nguage cend la Visual 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 million people 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 this New York Times interactive graphic that shows how different segments of the US population spend their time throughout the day.”
- 10. 2 More Than Decoration 5 1 3 Connect Wired for Speed Up Through Graphics Your Emotions Message 4 Make Visuals Efficient
- 11. 1 fo rG raphi cs
- 12. That’s right! 20,000,000,000 neurons! More brain resources devoted to VISION
- 13. 1,200,000 30,000 FIBERS FIBERS IN THE IN THE AUDITORY NERVE OPTIC NERVE
- 14. PICTURE SUPERIORITY EFFECT We have a better memory for pictures than words © Colin Hayes
- 15. Pictures are a replica of the environment
- 16. VISUAL AUDITORY SENSORY MEMORY WORKING MEMORY LONG-TERM MEMORY
- 17. WORKING Limited Capacity ~4 bits of MEMORY information Limits the information we process Short Duration Just a few seconds
- 18. COGNITIVE LOAD All the demands placed on working memory in any one instance Working Memory
- 19. “Research shows long-term memory is capable of storing a massive number of pictures.”
- 20. People give meaning to the visuals they process
- 21. “The mind is not a camera.” Stephen M. Kosslyn
- 22. P HICS GRA AIL AN F C
- 23. “When we understand that slide, we’ll have 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 perceive and comprehend visual information Can be applied to the real world
- 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 the exercise wouldn’t take much effort. When the exact same instructions were displayed in a less legible typeface, subjects thought the exercise would be difficult to perform and would take almost twice as long to get through.”
- 27. Processing Fluency the ease with which a person processes information
- 28. High-contrast Lima is in Peru Orsono is a city in Chile Low-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 the statements that were difficult to read. When people have an absence of knowledge about a topic, they must use other factors to evaluate whether statements are true.”
- 29. If it’s easy to process it must be true!
- 30. 3
- 31. Pop Out Preattentive Processing Grouping
- 32. Features that The primitive features of a visual pop out environment.
- 33. ps out? What po
- 34. Color
- 36. “Color is used in web design to entice users to easily find and click on the call to action.”
- 37. Size
- 38. “Size is used in web design to create a visual hierarchy.”
- 39. “On the Mail Chimp site, all the important elements are very large.”
- 40. Shape © John Grimwade
- 43. Orie ntation
- 45. 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.”
- 47. Depth © JOE LERTOLA
- 48. Review: Color Features that Size pop out Shape Orientation Movement Depth
- 49. Grouping Perceptual conditions that force us to see parts as one unit
- 50. Proximity “When the conditions for grouping are right, the whole unit takes precedence over the individual elements.”
- 51. roximi ty in UI P
- 52. Sim ilarity
- 54. Comm on Fate © GOOD AND HARD AT WORKı
- 55. edness C onnect ©Colin Hayes
- 56. Bou ndaries Stephen Leckart, Wired ©Stephen Leckart, Wired
- 57. “We use boundaries intuitively, to group and separate information.”
- 58. Review: Proximity Conditions for Similarity perceiving parts as a Common Fate group Connectedness Boundaries
- 59. 4
- 60. Cognitive When attributes of a graphic are Compatibility consistent with their meaning, the information is easier to process.
- 61. RED BLUE GREEN “The visual attributes of these words (color) are compatible with their meaning (these were shown one at a time).”
- 62. RED BLUE GREEN “The visual attributes of these words are NOT compatible with their meaning, causing cognitive discord, which slows down the processing of the information (these were shown one at a time).”
- 63. “The visual attributes are compatible with their meaning. In particular, notice the direction of the arrows.” ©Ninian Carter
- 64. “If the arrow is flipped around, it causes discord, slowing down processing.” ©Ninian Carter
- 65. Provides fewer distractions Reducing Takes less time to perceive Realism makes graphics Minimizes load cognitively efficient on working memory Easier to encode into long-term memory
- 66. “What makes a graphic more (top) or less (bottom) realistic?”
- 67. Minimalist graphics: Fewer colors Less detail Smooth surfaces Minimal shadows
- 68. “Example of a header graphic relying on minimized visuals.”
- 69. Silho uettes “The brain is good at recognizing shapes and filling in the details.”
- 70. ©GOOD & Bradley R. Hughesı
- 72. L ine Art “Brilliant example of line art showing kissing protocols around the world.” © Nigel Holmes
- 73. “How to tie a scarf, explained with no words and in line art.” © Nigel Holmes
- 74. ic Gra phics Icon “Iconic graphics depict objects using just enough detail so we can recognize the object. Here, each cup is a graph showing the relative amount of ingredients in espresso drinks. Iconic graphics are easily recognizable and no extraneous visual cues interfere with processing.” ©Lokesh Dakar
- 76. “Example of iconic graphics in web site design. Also, notice the grouping.”
- 78. Sy mbols “Visual symbols are iconic graphics with an associative value that is learned through culture or education. They are cognitively efficient for a visually literate audience.”
- 79. “Symbols are highly dependent on context. In one context, concentric curved lines represent wireless and in another context they represent an RSS feed.”
- 80. Silhouettes Review: Ways to go Line Art minimalist Iconic Graphics Symbols
- 81. 5
- 82. “Emotions inform at a visceral level. As you see each photograph, notice the reaction in your body (these were shown one at a time).”
- 83. COGNITION N EMOTIO “There is a long philosophical and scientific tradition stating that emotion and cognition are opposing phenomena. But brain imaging research and cognitive science now agree that emotion and cognition are dynamically intertwined and interdependent.”
- 84. Capture attention Emotions affect mental processes Increase brain activity Can improve retention
- 86. “Because we are attuned to reading the emotion in faces, the serious mood here contributes to the rugged and high-powered undergarments that are being sold.”
- 87. “We follow the gaze of where a person is looking, which in this example, brings us right to the navigation options.”
- 91. ©Sean Douglass “Emotional imagery gives data more impact.” ©SEAN DOUGLASS
- 92. There’s another side to emotion SURPRISE!
- 93. Surprise results from novelty or humor From the unusual juxtaposition of elements From the unexpected
- 94. AD BY GREY PARIS
- 95. FROM A VIDEO BY ‘THE REAL FOOD MOVEMENT’
- 96. • Emotions and cognition are interdependent Review: • We are attuned Connecting through to faces emotional imagery • We follow the direction of someone’s gaze • Evoke emotion through surprise, novelty and humor
- 97. Thank You For more information on this subject – Book: Visual Language for Designers Visual Communication Stream: • http://understandinggraphics.com • @cmalamed eLearning Stream: • theelearningcoach.com • @elearningcoach