Infographics: The Why And How

Have you ever viewed an infographic and thought WOW this is so cool, I never thought this subject could be so interesting!

Maybe you have, and there’s no judgment here. Because that’s just it – infographics WORK by adding visual detail that keeps a viewer more interested than if they were to simply read about it. It’s a great way to spread information quickly when intended. 

Data visualization that goes hand in hand with infographics also helps to put a perspective on numbers and statistics that are difficult to visualize without them. Which helps make the audience understand the information more effectively.

In short, this is why infographics are a powerful tool. Complex topics become more enjoyable and easier to understand. If you have a subject that you’d like to communicate with an audience, consider building one – there are many templates available, or you can build one from the ground up.

In this article, we’ll talk about what infographics are, each section within them and their significance, misinformation, design elements and principles, and a simple step-by-step process of how to get started. 

What is an infographic?

Example of Ancient Egyptian hieroglyphics

Visual information has been around for ages. In fact, cave paintings from 30,000 BC could identify as some of the first visual stories and infographics. Egyptian hieroglyphics in 3000 BC were also very early ways to communicate information visually. 

More modern forms of infographics started to appear around 1786 where William Playfair wrote a book involving many statistical data visualizations. Since then, visual data has grown immensely and transformed to the use of infographics.

Infographics typically have three parts: visual data, graphics, and text. Each bit, just as important as the other, however, they should not show as equal amounts. It’s essential to remember that infographics are widely effective because our brains respond about 60,000x faster to visuals than to text alone. This is a phenomenon termed the Picture Superiority Effect by psychologists.

Depending on the information topic, and the overall layout, the amounts of each part may vary quite a bit. Typically, as long as all three are present, it’s completely fine to vary the amounts of each, but sometimes you may find a larger variance in data visualization as it’s often not entirely necessary with informational graphics. 

My data visualization of visual data, graphics, and text amounts for different infographics

Visual Data

Some of you may be thinking, well infographics are data visualization, aren’t they??

The short answer to that is, yes. However, data visualization is just one piece of the puzzle. They are only one graph or chart which specifies a single piece of data. Where infographics usually provide several different visualized data which connect the pieces of what the infographic tells you. 

This can be illustrated as maps, pie charts, line charts, bar graphs, and so on. 

Graphics

Graphics are what help tell the visual story. Have steps for people to follow? Use graphic images of what that task is, or a character performing that step. What about an environmental infographic about wildlife in a specific area? Show graphic images of what those animals or species are. 

The graphics are really what make the infographic come full circle by showing the viewers another visual glimpse of why they should care, and often resonates with your audience. 

Source

Text

There should always be text within an infographic. Without it, leaves the viewer room to interpret the data or graphics incorrectly. While data visualization almost always has a key, that still doesn’t mean the audience is going to read it the same way as another. The text helps to keep the viewer on track of what they’re seeing and helps to prevent the spread of misinformation. 

“And the same way that you cannot understand a piece of text If you don’t read it carefully, you cannot understand a chart without reading carefully as well.”

Alberto Cairo

While there should be text, it’s also essential to know the balance of when to narrow down the text. It should be kept simple. If there’s so much, it’s possible that the graphic will look more like another piece of writing only, and won’t keep the viewers interested. 

This infographic is a good example of what NOT to do with your text. It’s overcrowded and visually difficult to look at. There are too many font colors, sizes, and locations to follow smoothly. 

Instead, there should be more white space, separation of groups, and fewer sections of text. This graphic is a good example of these. 

Misinformation in design

A designer can either intentionally or unintentionally spread misinformation. A term also widely known now as “fake news.” It’s essential to take the research seriously and remove any cognitive biases from the work. 

The research must be credible and fully understood so you can translate properly. This is one way to help you to prevent the spread of misinformation. 

For example, companies that specialize in pet kibble will use infographics about the properties of their food and how it supports dog or cat health. 

While it may not be false information, it does promote aspects that your dog is getting the full, proper nutrition from dry food alone. When, if the research is fully done, you’d know that’s not the case. 

These infographics about dry pet food are beneficial for customers who have busy lifestyles and like the ease of use of kibble. Everyone has their own biases, which is why it’s not difficult to persuade those who already believe what they’re seeing, or if it provides some sort of peace of mind.

On the reverse side, biases also show up with raw food diets, like this infographic. This again isn’t false information, but it is meant to persuade the audience to transition to a raw food diet. Knowing when to identify biased infographics will help you to know how to avoid it yourself.

It just goes to show – more information is needed for anyone to make a proper decision. Added text around the infographic helps explain to viewers what they should take away from the data. 

What makes a graphic compelling?

Compelling means that it keeps the attention and interest of its viewers. Simply having the information all put into one place doesn’t mean that the infographic will keep the audience’s focus. Infographics should use design techniques like the gestalt principles, color, and text psychology. 

There are reasons that certain design elements, colors, and text attract the interest of its prospects. 

The Gestalt principles and elements

Some of the most common Gestalt principles are:

  • Similarity. Elements belong together if they look similar. 
  • Proximity/Grouping. Elements that are closer together appear to be part of the same group, and vice versa. 
  • Continuity. Components that are visually associated with each other are easier to distinguish a continuing line if there is none. 
  • Figure-Ground. Objects may be perceived as either the figure or the ground. 
  • Simplicity. Our mind perceives things in their simplest form. Simple is better than going overboard. 

There are also other design elements which can help make graphics more compelling, like balance, emphasis, and unity like they’re shown in this well-done infographic. 

Shown in order from left to right, top to bottom: Similarity and grouping, Continuity, Figure/Ground, Simplicity

Color Psychology

  • Bright, warm colors. These colors energize the viewers and make them alert, possibly with a higher chance of calling to action. 
  • Dark, cool colors. These feel more relaxing and tranquil 
  • Complementary colors. These complement each other and bring out their best contrasts

Beyond the basics, each color is also associated with meanings and different feelings. There’s a reason specific colors are used for different products, actions, or information. Choose your colors carefully to match the content. 

Type Psychology

There are endless amounts of fonts, but each lies in a specific group. The main groups are: 

  • Serif
  • Sans Serif
  • Slab Serif
  • Script
  • Modern
  • Display

And within each group evokes different emotions from the viewer. Depending on the content of your infographic, the font should resonate with the overarching idea. The fonts chosen can promote a particular feeling or reaction from the viewer. 

Combining compelling with effectiveness into an infographic? Follow these steps.

Step 1 – Know your audience. Whenever you make something for general consumption, you MUST know who might take part in it. Not everything you present will be for everyone so your audience will be the driving force in what you make.

If your audience isn’t identified beforehand, the direction of your infographic could result in fewer views and therefore, less spread. 

Step 2 – Find your data. What do you want to share with your audience? What is important to them and how do you want them to be informed? These are all great questions to get you started. 

Step 3 –  Define the scope of your infographic layout. There are many different ways to show your data – and some charts are better than others depending on what it is. 

Statistical infographic layouts are ideal for a lot of data visualization. Elements can include surveys or numerical data that resonates in percentages.

Informational layouts usually have less data visualization and more graphics, and text. The data may not be as scientific with the opportunity to provide numerical charts, but the information is still very researched and refined. 

Timeline infographic layouts are best used for visualizing the history or chronological order of something.

 

Shown in order from left to right: Statistical Layout, Informational Layout, Timeline Layout

If comparing, a slope chart is effective for this. If comparing multiple groups with hierarchy, a sunburst might be the best option. These are a few less popular graphs that might be more interesting for grabbing your viewers attention.

First, choose the base of where the information will go. Then, the layout for how you will visually demonstrate it. Then, the content – remember – text, data, graphics.

Step 4 – Defining the scope of the style.

colors, and type have psychological aspects behind them which promote different feelings from the viewers. So choose them carefully – make sure the color scheme is with like colors to prevent confusion or too much to look at. 

The type you use also has an affect on how the viewer perceives the information. Especially since there’s likely to be less text than there is visual, the fonts chosen do have a big impact. So again, choose carefully depending on what you’re going for.

Summing it up & Breaking it down

So, there it is – the reasoning behind your WOW’s of taking in information!

Infographics are powerful tools to get data out effectively, and if they’re also compelling, they have a better probability of resonating with the audience. 

Breaking it down – successful infographics will have data visualization, graphics, and text, as well as design elements and principles, no misinformation for cognitive bias, color and text psychology, and developed for a particular audience. Also, an accurate layout for the type of infographic. That’s a lot! But, keep following this article as a guideline, do your diligent research, and practice your design skills. You’ll be surprised how each step comes together!


Citations

Bonner, C. (2014, September 15). Using Gestalt Principles for Natural Interactions. https://thoughtbot.com/blog/gestalt-principles.  (Module 2)

Bernazzani, S. (2017, January 2). Fonts & Feelings: Does Typography Connote Emotions? https://blog.hubspot.com/marketing/typography-emotions. 

Bushe, L. (2020). Simplicity, symmetry and more: Gestalt theory and the design principles it gave birth to. https://www.canva.com/learn/gestalt-theory/. (Module 2)

Cairo, A. (2020). How charts lie: getting smarter about visual information. W.W. Norton & Company, Inc.

Cao, J. (2015, April 7). Web design color theory: how to create the right emotions with color in web design. https://thenextweb.com/news/how-to-create-the-right-emotions-with-color-in-web-design.  (Module 2)

Elliot, A. J., & Maier, M. A. (2014, January). Color Psychology: Effects of Perceiving Color on Psychological Functioning in Humans. https://www.annualreviews.org/doi/abs/10.1146/annurev-psych-010213-115035. 

Featherstone, R. (2014, December 1). Visual Research Data: an Infographics Primer. https://era.library.ualberta.ca/items/32b66e06-e883-4e88-b490-c2df56521738. 

Fussell, G. (2020, May 16). The Psychology of Fonts (Fonts That Evoke Emotion). https://design.tutsplus.com/articles/the-psychology-of-fonts–cms-34943.  (Module 2)

History of Infographics. (2021). https://visual.ly/m/history-of-infographics/. 

McCandless, D. (2021). The Beauty of Data Visualization. TED Talk. (Module 3)

McCandless, D. (2021). What Makes a Good Data Visualization . https://informationisbeautiful.net/visualizations/what-makes-a-good-data-visualization/. (Module 3)

Michael Gazzaniga (1992) and Allen Newell (1990), as cited by SAGE Handbook of Political Communication, 2012, via Amazon.

Lien, J. (2019, November 21). The Four Principles of Visual Storytelling. https://amplifinp.com/blog/4-principles-visual-storytelling/. (Module 1)

The Laws of Simplicity. (2021). https://fs.blog/2013/08/the-laws-of-simplicity/. 

Yuvaraj, M. (2017), “Infographics: tools for designing, visualizing data and storytelling in libraries”, Library Hi Tech News, Vol. 34 No. 5, pp. 6-9. https://doi.org/10.1108/LHTN-01-2017-0004

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s