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.