Tag: infographics

Psychology in Design: What Makes Images Effective

Psychology in Design: What Makes Images Effective

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

 

We previously looked at the role more symbolic elements of design—like colors, shapes, or graphs—play in helping us process information. This article, by contrast, examines the role that images and symbols rooted in the real world play in our perception of material.

 

[Left: A side view of a golden retriever, a familiar dog from a familiar view. Right: A Pekingese from the front, an unfamiliar dog from an unfamiliar view.]

In the two side-by-side images from above, you probably identified the image on the left as a dog very, very quickly—probably within milliseconds of seeing it. The dog on the right—which is somewhat less classically dog-shaped than the first—probably took longer.

This is because humans are quite good at getting the “gist” of familiar images, but going beyond that can be more challenging. Show someone a picture of a street scene, a stop sign, or a tree, and their brains will very quickly connect that image to their stored memory of such visuals. Experiments have even shown that we are still quite good at perceiving the gist of images even if they are blurred or otherwise obscured[1].

Our brains are also quite good at assigning meaning to those images. When shown a picture of a dog, people are usually quick to make the connection of its being loyal, friendly, or playful. Show someone a picture of a mother and a child, and they can quickly assign emotion to the image.

There is one important caveat to this: Images must be easily identified. Our conceptions of things are based on prior experiences. People cannot be relied on to identify a dog breed they aren’t familiar with, or identify a street scene from an unusual perspective.

So what does this mean for design? Including simple imagery in content or advertisements can be a very effective way to help consumers derive meaning from materials with just a single glance—no need for sustained attention.

 

 

 

 

 

 

 

For example, in the above Facebook ads, Survey Monkey uses pictures effectively and Safari does not. Assuming the Survey Monkey ad is targeting people who play Playstation, someone scrolling past would be able to quickly identify the ad as depicting a Playstation controller—no reading required. They may stop scrolling to see if the ad is relevant to them.

While the Safari ad certainly has strengths, someone scrolling past who is interested in reading might not link Safari to books. Their picture displays their logo against what looks like a subway map; it fails to quickly inform consumers about the product at hand.

In data visualization, effective use of imagery can help readers quickly create connections between data and what the data is depicting. For example, the below chart on NFL injuries helps us easily make sense of where players sustain the most injuries; the below chart on pet statistics uses pictures and symbols to help us more easily register what each of the rows refers to.

 

 

 

 

 

 

 

 

 

In short, when images are presented to us in familiar ways—when we see scenes that we can easily grasp the gist of—the brain can quickly process and assign meaning to them.

 

References:

https://klientboost.com/ppc/facebook-ad-examples/

https://blog.capterra.com/free-and-open-source-data-visualization-tools/

Visual Thinking for Design by Colin Ware

Good Charts by Scott Berinato

Oliva, Aude, and Antonio Torralba. “Building the gist of a scene: The role of global image features in recognition.” Progress in brain research 155 (2006): 23-36.Pieters, Rik, and Michel Wedel. Gripping the Gist: What Ads Communicate in a Single Glance. Working paper, Tilburg University, 2009.

[1] Olivia and Torralba

Psychology in Design: Why Infographics Work

Psychology in Design: Why Infographics Work

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

 

So far, we’ve learned why our brains more easily pick up on certain types of visual information. This article will examine why we would choose to use visual information over text in the first place—such as in infographics.

An infographic is 30 times more likely[1] to be read than a text article and three times more likely to be shared[2] on social media than any other type of content. They are considered much more engaging than traditional articles because consumers like engaging with visual content more than text—we’ve all felt relief after coming across a picture in an article that’s text-dense.

One reason why infographics are so effective is because while reading text is something we learn to do in school, interacting with visuals is something we’ve been primed to do from birth. About half of cerebral structures in our brains have a direct relation to visual function; while we have to decipher text word-by-word, visual processing can happen all at once, and much more efficiently. That’s part of why colored visuals increase people’s willingness to read a piece of content by 80% and why images can substantially improve people’s retention of such content.

Infographics also allow us to pair concrete images with abstract concepts. Research has shown that people are much better at remembering concrete terms (“dog,” “walking,” “Africa,” “green”) as opposed to abstract ones (“idea,” “engagement,” “communism”). Infographics assign visual representations to abstract terms, helping us process them better. For example, it’s hard to imagine what a 12% increase in web traffic or a 30-fold increase in views looks like without a visual reference.

As an added bonus, the format of infographics increases their shareability. A link to an article may only be displayed as text on social media or instant messaging, whereas infographics—which are often JPEGs or PNGs—are displayed as a whole on most platforms, making them more convenient and attractive for viewing.

OK, so if visuals are so great, why don’t I write this whole blog post in emojis? To answer that question, think about how you would draw a picture of the following sentence:

“I like to work in the library, but if it is too crowded, or if Rosa is there, I prefer the coffee shop.”

It’s quite hard, isn’t it? There’s a limit to how far visuals can go. Words like “if,” “otherwise,” “but,” or “while” are very difficult to draw, as they involve a form of abstract reasoning which is tough to put in the form of a picture. It is best to acknowledge that there is a limit to what can and should be represented pictorially.

Put simply, infographics allow us to balance thinking and seeing. They appeal to the more primitive parts of our brain which process visual information, while incorporating enough text to better help us process the information we’re looking at. This makes them a very valuable marketing resource.

So far, we’ve mostly looked at visualizations from a more abstract perspective. Next, in our final piece, we’ll look at how images can also be effective in appealing to the primitive parts of our brain, and what that means for marketing and advertising.

 

References:

Visual Thinking for Design by Colin Ware

Milovanovic, Dragana, and Leo Ivanisevic. “Infographic as a marketing communication tool.” 2014 New Business Models and Sustainable Competition Symposium Proceedings. 2014.

http://www.saurageresearch.com/visualizing-video-infographics/

https://www.searchenginejournal.com/visual-content-marketing-delivers-results-infographic/116496/

[1] https://www.searchenginejournal.com/visual-content-marketing-delivers-results-infographic/116496/

[2] http://www.saurageresearch.com/visualizing-video-infographics/

 

Psychology in Design: Why Things “Pop” (and Why They Don’t)

Psychology in Design: Why Things “Pop” (and Why They Don’t)

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

Processing...
Thank you! Your subscription has been confirmed. You'll hear from us soon.
Get Our Latest Insights.
ErrorHere

Curated By Logo