Information design for the
human brain

NICAR 2016, Denver,

Friday, March 11

Alexandra Kanik

@act_rational

Hey!

I’m Alexandra Kanik.

A bit of background about me:

I was the interactive developer for PublicSource, a non-profit news outlet in Pennsylvania for 5 years before turning to freelance data and development work for news orgs around the country.

I also edit and write for MediaShift. We just started up a new section dedicated to media metrics, analytics and measuring impact so if that’s of interest to you you should check it out.

publicsource.org

metricshift.org

Hey!

I’m Alexandra Kanik.

A bit of background about me:

I was the interactive developer for PublicSource, a non-profit news outlet in Pennsylvania for 5 years before turning to freelance data and development work for news orgs around the country.

I also edit and write for MediaShift. We just started up a new section dedicated to media metrics, analytics and measuring impact so if that’s of interest to you you should check it out.

Peter just talked about the importance of choosing the correct color templates (sequential, divergent or qualitative) for the data you’re displaying. But what about the color itself?

Choosing colors that correspond thematically to your data can help your readers understand your graphics quickly.

This is a map, created by NOAA (National Oceanic and Atmospheric Administration) to illustrate storm surge during the 2005 Hurricane Katrina.

Peter talked about color hue and how it doesn’t really correspond to larger and smaller numbers.

The map uses a rainbow gradient to indicate severity of surge. While the severity comes through, we understand that the red areas are worse than the blue, the subject matter of the map is indistinguishable. What are we talking about here? Fire? Vegetation?

Even when you contextualize the map with the label in the lower right “Envelope of High Water”, there is still a significant mental barrier in place when trying to understand red as water. Not to mention the difficulty in distinguishing land from water.

This map, by Peter, uses the same dataset, but gives it a color encoding that doesn’t make our mind struggle. Blue is water. Got it. And using saturation (darker and lighter) to indicate severity is a concept natural to our understanding of water. Deeper water looks darker. Shallower water looks lighter.

It’s also much clearer what is ocean and what is land.

Don’t make people’s brains work harder than they have to.

Here’s another example of color’s importance.

Even without this key here, we can probably tell the theme of this map, right?

Republican vs. Democratic states.

Note: There is no real data behind this map. I’m not sure what the data behind a map like this would even be...

But our brains immediately understand the type of story this map is trying to tell.

----------

Through extensive, past exposure, the general-US-adult brain understands that Red = Republican, Blue = Democrat. So it is easy to understand which states are considered “Republican” and which are considered “Democrat” with this map.

Note: There is no real data behind this map. I’m not sure what the data behind a map like this would even be...

This map has the same, fake data set behind it.

With this map, however, the brain is trying to carry on two processes at once:

And it’s encountering interference.

Now this is a very extreme example. It’s likely that no one would try and make a political map with these colors. But it’s meant to illustrate the importance of considering the subject matter of your dataset when you’re choosing color.

The Stroop Effect

So we get some of these ideas through common sense, but also people have studied these things.

RED

Researchers found that subjects were able to identify the color of a word if the word reflected that color….

(hint: it’s red)...

RED

much more quickly than if the word did not reflect that color. (hint: it’s purple)

Red

Black

Brown

Orange

Pink

Green

Red

Black

Brown

Orange

Pink

Green

Say the words

So reading the words from the list on the left ...

… should be pretty much just as easy as reading the words from the list on the right.

Red

Black

Brown

Orange

Pink

Green

Say the colors

But stating the color of the squares on the left…

… is considerably easier than stating the color of the words on the right.

Of course there are different theories as to why this is, but the leading theory states that reading words is such an automatic process for us that we can’t turn it off when we, say, just want to state the color of a word and not read it as a word.

The brain reads the word, understands it, and then tries to understand the color of the word and is met with interference.

So why is this important to news.

On its own, the Stroop Effect might seem kind of useless. “Ok,” you might be saying, “if I ever need someone to identify a color, I’ll use a colored square or circle or the word that expresses the color.”

But the real value of the Stroop Effect is understanding that issue of interference.

When your brain is already engaged in a processing a task, limiting interference will increase user response time and ultimately understanding.

SPATIAL VS.

Now we’re going to talk about spatial vs. sequential understanding.

An interesting way to reduce interference is to keep learning systems congruent.

This New York Times project about the closeness of Olympic race winners gives the user two ways to interact with the data:

2) via audio graphic: http://www.nytimes.com/interactive/2010/02/26/sports/olympics/20100226-olysymphony.html?_r=0

Motion and sound are both understood by the brain using sequentially. The brain pieces together sequences of discrete actions to understand a more complex action or idea. A song is a sequence of notes. A dance is a sequence of body positions.

Comparing objects or locating objects in space are concepts understood using spatially. The brain orients objects against one another and is thereby able to understand properties of the objects: Montana is to the west of Wisconsin. A beach ball is larger than a golf ball.

Trying to understand something like motion, which we understand sequentially, using a visual proximity chart, which we understand spatially creates interference.

Speaking of sequences...

Loops! When you need a reader to understand something that happened in a specific, sequential order, gifs are a great way to do it.

Not only do loops play off of the sequential understanding when used to explain things that happen in a specific order…

12 Sandy GIFs: An animated guide to Wisconsin’s frac sand rush

WisconsinWatch

… loops also help explain complicated issues by harnessing the power of repetition priming and repetition suppression.

Repetition priming says that more repetition leads to increased understanding and response time.

Repetition suppression says that as understanding and response time increase, brain activity decreases.

That might sound like a bad thing, but basically it means that repetition causes us to retain things while using less brain power.

(http://wisconsinwatch.org/2015/04/12-sandy-gifs-an-animated-guide-to-wisconsins-frac-sand-rush)

Texas Tribune

http://www.texastribune.org/2014/06/06/how-texas-shifted-blue-red-informs-democrats-today

Change over time

Watch the Twin Cities grow from 1870 to present

Pioneer Press

http://www.twincities.com/2015/08/08/watch-the-twin-cities-grow-from-1870-to-present

Maps are a popular subject matter for loops.

This animation is showing the change in property count in the twin cities between 1870 and the present.

http://tabletopwhale.com/2014/12/16/how-to-build-a-human.html

This loop is specifically interesting because it allows you to follow the the process of human development in a variety of ways. I can either follow one egg through to birth, or I can jump around in the graphic and follow different stages.

Donald Trump vs. Sea Level Rise

BuzzFeed

http://www.buzzfeed.com/peteraldhous/trump-buildings-underwater

Here’s another one by Peter showing what would happen to Trump owned or named properties if global warming were to continue to raise sea level.

This was created shortly after Trump publicaly and forcefully denied climate change.

Lena Groeger’s exhaustive piece on animated gifs touches on many more scientific benefits of the animated gif.

If you’re a coder, here’s a fun command-line guide on how to turn your screencast into an animated gif.

If you’re a coder, here’s a fun command-line guide on how to turn your screencast into an animated gif.

Brains-n-data - Google Slides