DATA VIZ 105

INTRODUCTION TO INFOGRAPHICS

This deck was designed as a guide for staff looking for resources about designing infographics.

Jessica Dubow Amanda Makulec

JSI Center for Health Information,

Monitoring & Evaluation

December 2014

2 |

TABLE OF CONTENTS

.

01

› What is an infographic?

› Why Visualize

Information?

› Design Team

› Getting Started

› Types of

Infographics

› Choosing a Tool

› Tools

› Best Practices

› Sharing Your

Infographic

› Evaluating

Effectiveness

Introduction Building Your Infographic

Disseminating Your Infographic

02 03

3 |

What is an Infographic?

Information graphics, or infographics, are visual representations

of information, data, or knowledge intended to present

complex information quickly and clearly. They are designed

manually and revisions to them can take time. They often contain

data visualizations—graphs or charts generated by software using

numerical data that can be easily tweaked and altered.

Infographics are useful for sharing information because they can

improve cognition (understanding and perception) by utilizing

eye-catching design elements and concise language to enhance

the human visual system’s ability to see patterns and trends.

Infographics tell a data story and stimulate conversation around

that story. Because their design packages content into visually-

appealing, consumable chunks, infographics allow you to access

a greater audience by sharing them on a website, including them

in a newsletter, or posting them on social media.

4 |

Why Visualize Information?

The use of visualized information has increased 400% in

literature since 1990, 142% in newspapers between 1985 and

1994, and 9900% on the internet since 2007. This is because the

human brain is visually wired—almost 50% of your brain is

involved in visual processing, 70% of all your sensory receptors are

in your eyes, and it only takes you 150 milliseconds to process a

symbol and another 100 milliseconds to attach meaning to it.

So where do infographics fit in? Since we now receive 5 times as

much information as we did in 1986 and consume 100,500 words

outside of work on an average day, infographics help counter

information overload. They’re more engaging—researchers found

that colorful visuals increase a person’s willingness to read

something by 80%. They’re more accessible—people following

directions with text and illustrations understand 323% better than

people following directions without illustrations. They’re more

persuasive—in a study, 67% of the audience were persuaded by a

verbal presentation accompanied by visuals whereas only 50% of

the audience were persuaded by a verbal presentation without

visuals. And they’re memorable—people remember 10% of what

they hear, 20% of what they read, but 80% of what they see and

do.

Source: http://neomam.com/interactive/13reasons/

Building Your Infographic

Design Team

Getting Started

Types of Infographics

Choosing a Tool

Tools

Best Practices

6 |

Design Team When you assemble your infographic design team, you should

look for a diverse blend of skills:

Technical/Program Expert: Someone who understands

what the data means. This person should be able to help

unpack the meaningful data story (amid a large amount of

data) and be part of the audience mapping (which we’ll

tackle on subsequent slides) to make sure the design will

have the appropriate level of technical depth for the target

audience.

Data Analyst: Someone who can play with the data and

present it in ways that make sense. This is often a

monitoring and evaluation advisor / analyst or someone

else adept at finding trends and stories in the data.

Communications Specialist: Someone with reasonable

design sensibility who can enhance readability, as well as

share and disseminate the infographic to ensure it’s widely

circulated after being published.

These three points of view together have the potential to create

something very well thought out and valuable.

7 |

Getting Started To decide if an infographic is the best way to showcase your data, ask yourself what information you have to share and what information you want to share. Though you may be tempted to pack as much information as possible into your infographic, choose only the most important data so that you don’t overwhelm your audience and render your infographic ineffective. Then, ensure consistency. Look at time frames, presentation, and categories (percentages, numbers, etc.), to make sure that they are consistent and can be placed on one unified infographic.

Next, its time to think about your audience. For a comprehensive source on identifying your audience and tailoring your data story to them, review this slide deck. Overall, ask yourself:

The information that you highlight will vary for different audiences and for different purposes. Consider your audience’s level of literacy, numeric literacy, technical skill, and their job function. Are they funders? Internal staff? Health workers? Different people will want different kinds of information, even about the same topic. For example, funders will want information about cost effectiveness, policy makers will want broad statistics, and health workers may want figures that motivate them by showing how necessary their work is.

› WHO are the stakeholders? › WHAT information do they need? › HOW will they use that information? › WHY do they care?

8 |

The Storyboard Approach

Once you have identified your audience and found a compelling

story to tell in your data, start organizing your information.

Specifically, create a content hierarchy. Find the piece of research

or dataset that will lead your story and then arrange supporting

elements around it.

A picture of the final product will begin to emerge with the

interesting facts you have selected and arranged. This should be a

visual representation of how your infographic will look so it should

be clear to understand and stand on its own. Before beginning to

design, it may be useful to review this structure with your team or

hand it to a colleague to make sure it is simple and easy to

understand.

Next you have to pick a format. Different types of infographics are

explained on the next two slides. Think about the purpose of your

infographic and the relationship between your data when you

decide what type of infographic you want to make.

9 |

Types of Infographics

Flowchart Is a path with possible options branching from a start point. It can answer a specific question by giving choices to your audience so they reach the right answer for their needs, so it can hook anyone who feels the question is important. Humor helps to popularize this kind of infographic.

Comparisons Contrasts one item or topic “vs” another. Comparisons place the differences and similarities head-to-head for your audience to see visually.

Timeline Is image-based with events and is often a left to right or top to bottom format or roadmap. Timelines take the audience on a journey in chronological order.

Visualized Article Takes an otherwise lengthy piece of writing and divides content into blocks of varied and interesting text accompanied by many images. It relies on a strong title—like a journalistic article, the reader needs to be immediately engaged to continue reading.

10 |

Types of Infographics

Big Numbers

These types of infographics

contain extensive data and

statistics; they are usually

image-heavy to aid the

comprehension of those

figures. The figures need to be

impressive and the design must

be engaging.

Graphs and Charts

Charts and graphs, as the

centerpiece of an infographic or

integrated into a larger visual,

turn information into

something visually creative and

appealing compared to a list or

table.

Instructional Steps

Also called “useful bait,”

Instructional Steps explain

something or answer a

question by visually showing

how to do it. These are popular

on content sharing platforms

like Pinterest and StumbleUpon

because of their emphasis on

usability, so be straightforward

and stick to the topic at hand.

11 |

Choosing a Tool to Fit Your Needs All these options are open-source web-based tools. The tools are explained in greater depth on following slides.

Easel.ly Piktochart Tableau Infogr.am

• Flowcharts • Timelines • Visualized Article • Comparisons • Instructional Steps • Big Numbers

• Flowcharts • Visualized Article • Comparisons • Instructional Steps • Big Numbers

• Timelines • Data Visualization

• Visualized Article • Big Numbers • Data Visualization

12 |

Tools: Easel.ly Useful For: Easel.ly is most useful for pictorial infographics like

flow charts, instructional steps, comparison posters, highly

illustrated timelines, and visualized articles. It features an intuitive

interface that is simple to learn because it primarily relies on drag

and drop functions.

Limitations: Easel.ly does not allow you to upload data

spreadsheets or enter data manually, so it is best used for

infographics that are less data-based.

Data Sharing Considerations: Though there is a public/private

setting that allows you to protect your content from the general

internet, other Easel.ly users will still be able to view and use any

visuals that you publish. If you are using your own sensitive and

private data, opt for taking a screenshot of your infographic rather

than publishing it on Easel.ly.

Shareability: You can download your completed infographic as a

jpeg and link to it via web.

13 |

Using Easel.ly Easel.ly allows you to either create an original theme from a blank

canvas or customize premade themes by replacing all text and

data. The site refers to these themes as “vhemes,” or visual themes.

When working with vhemes, you can change background colors,

textures and sizes. Easel.ly contains an extensive graphic library

that allows you to select scalable images from a number of

categories. If you can’t find what you need, you can upload your

own images. Double-click text to edit, and consider changing fonts

and colors on pre-made templates to improve legibility.

Tutorial: Easel.ly has an intuitive and simple interface that helps

people unfamiliar with the tool successfully create infographics.

By clicking the “start fresh” template you’ll see a quick intro to the

interface. You can watch a video at the top of the home page for a

brief explanation, or find a tutorial on YouTube like this one.

14 |

Tools: Piktochart Useful For: Like Easel.ly, Piktochart is most useful for pictorial

infographics like flow charts, instructional steps, comparison

posters, and visualized articles. Piktochart’s customizable editor

lets you modify color schemes and fonts, insert pre-loaded

graphics, and upload basic shapes and images.

Limitations: Though you can start using Piktochart for free, your

themes are limited, a watermark remains on all your infographics,

images have a low resolution, and your number of image uploads

is limited to 20. A pro account costs $29 per month/$290 per year.

Data Sharing Considerations: Anything you publish on a free

account is public, but if you pay for a pro account you can choose

to keep your infographic—and your data—private.

Shareability: You can download your infographic from Piktochart

as a PNG or JPEG for web or print. If you publish your infographic

to the site, you can access an embed link for websites. By

publishing, you can also search for your infographic in search

engines. If you want to make your data private again, you can

“unpublish.”

15 |

Using Piktochart Start with a free or paid theme after creating an account. If you are

using a free account, you can only choose themes without the

“Pro” banner across the top right corner.

Your layout is divided into “blocks” in which you can place your

infographic elements. Select a block and then insert “tools” or

“graphics” which are found on the left hand menu. You’ll find

shapes, icons, and photos under the “graphics” menu, and videos,

maps, and charts under the “tools” menu. You can search a large

icon library by clicking “graphics” > “icons” and then either typing

in a search or skimming through drop-down categories. If you

can’t find what you’re looking for, you can make a request for it or

upload your own images (SVG files are scalable, but others like

JPEG and GIF will lose quality when enlarged).

When an object on your layout is highlighted, you can use the

menu at the top of the page to delete it, change its color and

opacity, add a link, arrange objects, flip and rotate, and align

objects. If you want to insert a chart, you can manually input your

data or upload a CSV file (by saving your Excel doc as .CSV). You

can select one of several different chart options which can be

customized by clicking on the “Settings” tab in the top right

corner.

Tutorial: Piktochart’s home page contains a link to video tutorials,, samples, and FAQ.

16 |

Tools: Tableau Useful For: Tableau allows you to create graphs and interactive

dashboards in which you can examine multiple visualizations at

once, highlight specific variables, drill down into subgroups,

change timelines, and embed maps. It is highly customizable,

interactive, and inclusive of all types of data.

Limitations: Tableau is best used for data-based infographics and

not pictorial infographics because it doesn’t have the simple drag-

and-drop interface of Easel.ly and Piktochart.

Data Sharing Considerations: When your file is saved, your data

becomes public. It can then be downloaded as an image or PDF.

Shareability: Infographics in Tableau are created with JavaScript

and HTML so they can be embedded on the web as interactive

graphics.

17 |

Using Tableau Tutorials: Helpful training videos from Tableau available here.

1.) Tableau imports your data from Excel and Access. Go to the top navigation and click Data > Connect to Data. You have to set it up so that the first row is your field names (each column represents a different variable like years or age) and the second row is where the data starts. There are two types of data: Measures are numeric whereas Dimensions are the title data.

2.) To create a graph, select two field names/variables to compare, one from the dimensions category and one from the measures category. To add data to the same graph, drag other dimensions to “color” under “marks.”

3.) Choose the kind of chart you want using the “show me” feature and this chart choosing tool.

4.) To create more graphs that are derived from the same set of data, click the “create new worksheet” tab at the bottom of the page. To compare graphs on the same page, click the tab at bottom titled “dashboard.”

New worksheet

Dashboard

18 |

Tools: Infogr.am Useful For: Infogr.am offers you access to a wide variety of

graphs, charts, and maps and also allows you to upload pictures

and videos. Unlike Easel.ly and Piktochart, for which you can not

upload or enter data, Infogr.am allows you to edit an Excel style

spreadsheet to create more than thirty different kinds of charts

(more than Excel) and update your data in real time.

Limitations: There are free accounts, but some features are

limited. You can upgrade to a Pro account for $18 per month/$180

per year or a White Label account for $50 per month/$500 per

year. Formatting and text options on Infogr.am are more limited

than other programs and charts don’t allow you to compare as

many variables as Tableau.

Data Sharing Considerations: By publishing your infographic on

infogr.am, you publicize your data. You need to upgrade to a Pro

or White Label account for private sharing capabilities.

Shareability: When your infographic is completed, you can

publish it to infogr.am where it becomes public. Once published,

you can use an embed link to share it on social media or post it on

your own website. You can also download it in PNG or PDF format

to include in a presentation or email to a colleague.

19 |

Using Infogr.am Start by choosing a template—free templates do not say “pro” in

the corner.” You can either create an infographic (which may or

may not contain charts) or a stand alone chart.

Using the menu on the right-hand side, you can add charts, maps,

texts, pictures and video. To create charts, enter data directly into

the sheet or upload your data from Excel as an .xls or .csv file. You

can specify which features to show (gridlines, data points, smooth

curves, etc.)

Tutorial: There are many tutorials on YouTube like this one.

20 |

Infographic Best Practices

These tools have many built-in themes that follow basic design

principles, giving them an advantage over programs like Excel.

As a general rule of thumb, keep your infographics simple and

concise. Ask yourself, “why?” for every design decision you make

to make sure that every choice, from font size to color to shapes

and patterns is deliberate and serves to tell your data story. Avoid

unnecessary visual clutter that might confuse your message.

Color: The fewer the better, with 3 colors being an ideal amount.

Colors in charts should compliment one another, but be easily

differentiated. There are many websites that can help you create a

color palette, like Adobe Kuler. Keep in mind the tone of your

infographics—blue is often associated with medical subjects,

yellow with food, etc.

Shape: Stick to simple points, lines, or bars. Be careful with area

bars and proportions as data can seem larger than it actually is.

Font: The fewer the better. Choose something simple and legible.

Sites like Font Picker can help.

For more DataViz best practices, check out this slide deck. For

more on design principles, review this slide deck.

Disseminating Your Infographic

Sharing Your Infographic

Evaluating Effectiveness

22 |

Sharing Your Infographic

Once you’ve created your infographic, it’s time to make sure people see it. Most of the tools in this slide deck allow you to publish your infographic to their websites (if your data is public). Once published, you can access an embed code, but you can also just download your infographic as an image or PDF.

Use social media. Post your infographic on your blog and/or website. Share it internally via email/newsletter, and encourage others to share it. Post it on Facebook, Twitter, Pinterest, StumbleUpon, SlideShare, Instagram and any other social media you use. Include hashtags so your infographic comes up in searches and you amplify your reach. Wherever you post it, give viewers one-click buttons to share it on their own social media.

Don’t hesitate to post your infographic on social media sites multiple times using different formats, titles, and hashtags as this will help you get more traffic, access people in various time zones, and engage people with different interests. Post your infographic as a website, then as an image. It works. There are even websites like Hootsuite that will help you to manage your social networks by scheduling posts in advance.

Here’s a step-by-step guide on using Facebook sponsored stories to promote your infographic.

23 |

Sharing Your Infographic

Share your infographic on infographic directories like Visual.ly,

Daily Infographic, Cool Infographics and DataVisualization.ch and

more. These are places that collect and post interesting

infographics, so you may reach an audience you’ve never accessed

before. Make sure to include your website so interested viewers

can learn more about your company and your topic.

Use creative PR moves like identifying popular blogs and

bloggers who have engaged in topics related to your infographic.

Reach out to them and ask if they’d be willing to include your

infographic in their posts. The same goes for Twitter—look for

people with many followers who tweet about subjects covered by

your infographic and ask them if they’d be willing to share your

work or retweet you.

Don’t forget old school communications and plan a press release

or other launch announcement for your infographic.

24 |

“Not everything that can be counted counts, and not everything that counts can be counted.”

--Albert Einstein

25 |

Evaluating Effectiveness

Don’t just measure traffic (unique page views where you

infographic is posted), but also consider level of engagement

when evaluating your infographic.

Are people sharing content? Commenting? And where are they

coming from? Most web-based platforms let you track where your

readers are connecting from, helping you understand if you have

the global reach you might want.

Don’t forget, not all numbers are equal. Your goal may be broad

dissemination, but you also may want a refined plan that targets

specific demographic groups, organizations, or donors.

Connect DataVizHub.co

Questions, updates, ideas, or suggestions? Amanda Makulec | amakulec@jsi.com