This summer, our intern Ronin Rodkey did research on how psychology can inform the design of good content. The following article is the first in a three-part series explaining his core findings.

Odds are that when you first opened this post, you noticed what was speshial about the fourth word in this sentence, but not the fourteenth. Why is that? Why is it easier for us to notice aesthetic differences in text, but relatively harder for us to recognize spelling mistakes?

The short answer is that our brains are not hard-wired to know the correct spelling of “special.” Nobody is born knowing how to spell words or even understanding what writing and the alphabet mean—but the mechanisms in our brains which can pick up on differences in color and size are hard-wired and subconscious, working automatically whenever we see something.

Basically, when we see things, our brains first work to pick up on differences in low-level features—color, size, orientation, motion, and depth—before moving on to detecting patterns within those features based on learned experiences. We sometimes say that these features are picked up on “preattentively”—meaning we notice them quickly, before other aspects of the visual.

Image caption: The MTA subway map uses white circles (or elongated circles) to display transfer points. Had they instead used black squares, the map would be much harder to read.

For example, you will notice a car is red before you notice it is a Toyota. In a parking lot full of 100 white Toyotas, one red Toyota, and one white Honda, it will be much easier to pick out the red Toyota than the Honda.

In fact, in that parking lot, our eyes will probably travel to the red Toyota before anything else. We are automatically attracted to differences in low-level features. Take the following graph, for example:

You probably noticed the blue and red lines—and the fact that they intersect—before you read the title of the chart or the axes. This is because they represent the biggest difference in terms of color and shape when compared to the background.

Designers should be mindful of these psychological phenomena when creating visuals. For example, the two charts below display the same data, but the first does it much more effectively.

Walmart jumps out at us in chart number one because the states where it’s the biggest employer are grouped together and are the same color—our eyes preattentively pick up on Walmart’s dominance via contrasts in size and color. In the second chart, New Mexico, Nebraska, Wisconsin, and North Carolina stand out first as the only red states on the map, even though these states aren’t the most important takeaway.

Preattentive processing is also worth noting when creating infographics. For example in the infographic to the right, from the Atlantic, our eyes are not first drawn to the central thesis—that it costs more to keep a prisoner in jail than pay for college tuition—but instead to (1) the dark images, which become distracting during reading, and (2) the data represented with many colors, such as the visual comparing African Americans in dorms and in prison. The designers should have taken into consideration the most important information to ensure that it stood out preattentively.

In part two of this series, we look at infographics again and examine why they work, and what makes them more compelling than pure text articles.

References:

Good Charts by Scott Beridano

Visual Thinking for Design by Colin Ware