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

Connie Malamed @cmalamed

IA Summit 2011

NEGLECTED CHILDREN ARE MADE TO FEEL INVISIBLE

“Visuals are so powerful, they can turn this statement…”

Visuals persuade

“into a persuasive appeal to eradicate child neglect.”

Visuals show hidden information

Deaths from preventable

diseasesı

Deaths from woundsı

Visuals solve problems

Visuals transcend language

“Visuals are so powerful, very few people can understand the health care reform act, because it is a 400 page document with no graphics.”

Visuals explain

“And when Dan Roam created a visual explanation on Slide Share, a quarter of a million people viewed it.”

Visuals promote new ways of thinking

“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.”

Wired for Graphics

1

More Than Decoration

2

Speed Up Your

Message

3 5 Connect Through

Emotions

4 Make Visuals

Efficient

1for Graphics

More brain resources devoted to

That’s right! 20,000,000,000

neurons!

VISION

1,200,000 FIBERS IN THE OPTIC NERVE

30,000 FIBERS IN THE AUDITORY NERVE

We have a better memory for pictures than words

PICTURE SUPERIORITY EFFECT

© Colin Hayes

Pictures are a replica of the environment

WORKING MEMORY

LONG-TERM MEMORY

SENSORY MEMORY

AUDITORY VISUAL

Limits the information we process

Limited Capacity ~4 bits of information

WORKING MEMORY

Short Duration

Just a few seconds

Working Memory

All the demands placed on working memory in any one instance

COGNITIVE LOAD

“Research shows long-term memory is capable of storing a massive number of pictures.”

People give meaning to the visuals they process

“The mind is not a camera.” Stephen M. Kosslyn

GRAPHICS

CAN FAIL

GRAPHICS

CAN FAILı

“When we understand that slide, we’ll have won the war.” -- General Stanley McChrystal

Based on findings and evidence

Research-inspired Design

Considers how people perceive and comprehend visual information

Can be applied to the real world

2Than Decoration

EXERCISE 1

Tuck your chin into your chest, and then lift your chin upward as far as possible. 6–10 repetitions

Lower your left ear toward your left shoulder and then your right ear toward your right shoulder. 6–10 repetitions

EXERCISE 2

Tuck your chin into your chest, and then lift your chin upward as far as possible. 6–10 repetitions

Lower your left ear toward your left shoulder and then your right ear toward your 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.”

Processing Fluency the ease with which a person processes information

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

If it’s easy to process it must be true!

Pop Out

Preattentive Processing

Grouping

Features that pop out

The primitive features of a visual environment.

What pops out?

“Color is used in web design to entice users to easily find and click on the call to action.”

“Size is used in web design to create a visual hierarchy.”

“On the Mail Chimp site, all the important elements are very large.”

Shape

© John Grimwade

Orientation

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

© JOE LERTOLA

Depth

Review: Features that pop out

Color Size Shape Orientation Movement Depth

Grouping Perceptual conditions that force us to see parts as one unit

Proximity

“When the conditions for grouping are right, the whole unit takes precedence over the individual elements.”

Proximity in UI

Similarity

© GOOD AND HARD AT WORKı

Common Fate

©Colin Hayes

Connectedness

Stephen Leckart, Wired ©Stephen Leckart, Wired

Boundaries

“We use boundaries intuitively, to group and separate information.”

Proximity Similarity Common Fate Connectedness Boundaries

Review: Conditions for perceiving parts as a group

When attributes of a graphic are consistent with their meaning, the information is easier to process.

Cognitive Compatibility

RED BLUE

GREEN “The visual attributes of these words (color) are compatible with their meaning (these were shown one at a time).”

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).”

©Ninian Carter

“The visual attributes are compatible with their meaning. In particular, notice the direction of the arrows.”

©Ninian Carter

“If the arrow is flipped around, it causes discord, slowing down processing.”

Provides fewer distractions

Minimizes load on working memory

Easier to encode into long-term memory

makes graphics cognitively efficient

Takes less time to perceive

Reducing Realism

“What makes a graphic more (top) or less (bottom) realistic?”

Minimalist graphics:   Fewer colors   Less detail   Smooth surfaces   Minimal shadows

“Example of a header graphic relying on minimized visuals.”

Silhouettes

“The brain is good at recognizing shapes and filling in the details.”

©Lokesh Dakar

Iconic Graphics

“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.”

“Example of iconic graphics in web site design. Also, notice the grouping.”

Symbols

“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.”

“Symbols are highly dependent on context. In one context, concentric curved lines represent wireless and in another context they represent an RSS feed.”

Review: Ways to go minimalist

Silhouettes Line Art Iconic Graphics Symbols

“Emotions inform at a visceral level. As you see each photograph, notice the reaction in your body (these were shown one at a time).”

COGNITION

EMOTION

“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.”

affect mental processes

Increase brain activity

Capture attention

Can improve retention

Emotions

We are particularly attuned to faces.

“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.”

“We follow the gaze of where a person is looking, which in this example, brings us right to the navigation options.”

Even cartoonish faces!

Emotional images are effective for

Changing Attitudes

There’s another side to emotion

SURPRISE!

Surprise results from novelty or humor

From the unusual juxtaposition of elements

From the unexpected

AD BY GREY PARIS

FROM A VIDEO BY ‘THE REAL FOOD MOVEMENT’

Review: Connecting through emotional imagery

•  Emotions and cognition are interdependent

• We are attuned to faces

• We follow the direction of someone’s gaze

•  Evoke emotion through surprise, novelty and humor

For more information on this subject – Book: Visual Language for Designers Visual Communication Stream:

•  http://understandinggraphics.com •  @cmalamed

eLearning Stream: •  theelearningcoach.com •  @elearningcoach

Thank You

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

Design

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