Infographics the new communication tools in digital age

Full text

Infographics: The New Communication Tools in
Digital Age
Waralak V. Siricharoen
School of Science and Technology
University of the Thai Chamber of Commerce
Bangkok, Thailand
Waralak_von@utcc.ac.th
Abstract - Infographics were used to support the work of
journalism back in 1980s. It may be used to accommodate
newsletters, newspapers, magazines, and reports. Now the
infographics have been applied for telling the story.
Additionally, the changing lifestyle in digital age, data and
information need to be quicker and easier processed. People
scan for the headlines and graphics (usually in pictures,
graphs, charts) that attract their interest. They spend less time
to consider whether it is worth further reading. Multimedia
infographic can be created in 3D to make it more appreciative
than regular illustrative pictures and text, especially for the
difficult and complicated contents. For the people who need to
communicate quickly; the spoken or printed account is
sometimes too difficult for understanding. This paper includes
the history, importance, and benefit of infographics in general
and introduces the tools for making infographics efficiently.
The suggestive guidelines of infographics creation are also
addressed.
Keywords- Infographics, HCI, Data Visualization,
Information Visualization, InfoVis
I. INTRODUCTION
“A picture is worth a thousand words”, is the familiar
phrase. “The human brain is more able to identify and
comprehend relationships and patterns if data is encoded
into visual forms [1]”. The definition of infographic are:
“The use of computer-supported, interactive visual
representations of data to amplify cognition [2]”;
infographic is graphic visual representation of
information, data or knowledge intended to clarify and
integrate difficult information quickly and clearly [7, 8].
For education (definition) for infographic: a collection of
graphic organizers integrates different media in simple
diagrams: text, images, symbols and schemas [18]. In
Human and Computer Interaction (HCI), infographics can
improve user cognition by utilizing graphics to enhance the
human visual system’s ability to see patterns and trends [9,
10].
Infographic is a new way to visualize data. Another
word for infographic is information visualization (InfoVis)
or data visualization [6]. Visualization is defined as [3]
“mechanisms by which humans perceive, interpret, use and
communicate visual information [4] in [3]”. The main aim
of visualization [5] is to communicate information more
clearly and effectively by using graphical means.
For Journalism, there is the importance of information
visualization which is adding in reporting the believable and
trusted means context. As mentioned in the book title [12]
“Infographics: Maximum Information in Minimum Space”,
this phase explains the main purpose of infographics design
which is produced as helpful as they can in order to give
as much detailed information as possible and it can save
spaces. Infographics created by Peter
Sullivan for The Sunday Times during the 1970s - 1990s
were some of the important reasons in encouraging
newspapers to use more infographics. Peter Sullivan (1932–
1996) was a British graphic designer recognized for his
work on information graphics. Sullivan is also one of the
few authors who have written about information graphics in
newspapers. Similarly, the staff artists at USA Today
newspaper, the US newspaper that launched in 1982, their
objective is to use graphics to make information easier to
understand. USA Today usually gets credit for publishing
up-to-date infographics. Colorful charts and graphs remain
hallmarks of USA Today’s design for readers. However,
people were using graphics to deliver information well
before the 1982 origins of USA Today [12]. There are also
many excellent infographic was published in New York
Journal infographics in 1898 (Fig.1 and Fig.2). It has long
history in Journalism and Printed Poster. One of USA Today
infographic show by using cartoonesque images to represent
data about the quantity of pasta consumed (Fig. 3). The
earliest humans on the planet shared information in pictures
carved and painted on rocks and caves. NASA’s Voyager
interstellar space probes, launched in 1977, carry
information-rich diagrams to show the earth existing [13;
14; 15] in Fig.4, Fig. 5.
In the 21st Century, data visualizations have been
applied to commonly used computer systems,
including desktop publishing, website /blog
publishing and Geographic Information Systems (GIS).
Recognition and understanding of infographics is a
relatively new research field. With today’s overflow of
information, infographics help readers understand and
process the information quickly. A good infographic will
not only tell readers story, but will also create interest and
induce people to read the article similar to how good
headlines and photos attract readers. Nevertheless, graphics
could fast persuade readers to disregard the article.
169

Fig. 1. The original infographic created on 1898: Destruction of war ship
Maine was the work of an enemy [16].
Fig. 2. The original infographic about created on 1898: The Journal’s war
fleet, correspondents and artists [16].
Fig. 3. The USA Today snapshot infographic: the quantity of pasta
consumed [13].
Fig. 4. The NASA infographic: mankind story[15].
Fig. 5. The plaque attached to NASA Pioneer 10[15].
The WordStream Company believes that with
infographics, bloggers and journalists make the context in
news easy to access and share. Larry Kim, founder and CTO
of WordStream said "The fact that it was illustrated got the
press pickups [17]". WordStream's experience points to the
new world of public relations, where every picture tells a
story. Infographics, videos, slideshow, and various
multimedia tools are augmenting or replacing traditional
press releases and article placements. In the old day, Public
Relation is about telling the story but now it is about
showing and telling the story at the same time says Richard
Edelman, president and CEO of Edelman. "We've been
about the work. Now you have to do the show [17]. "
Serenelli et al. used infographic techniques to combine
analytical and synthetic schemas to enhance the aesthetic
perception; they have reported that infographic help with
users’ learning process [18].
II. TYPES OF INFOGRAPHICS
In general, there is the accepted standard in the medium
towards exploring with new formats based on web mash-ups
and data visualization, but not often do they aim to make up
a space for public debate that provide readers more than just
only one platform. There are many graphic types for
visualizing data, from bar graphics to pie charts, from tables
to diagrams. As a matter of fact, most of the graphics used
in visualization applications are a part of our lives since
many years [5]. Graphs allow us to explore data and observe
patterns that no other approach can achieve [6].
As reported in [19], there were 125 newspapers in 1997.
They were asked if they publish categories of informational
graphics with regularity. The response was: maps 95.9 %;
bar charts 62.9 %; line graphs charts 52.4%; pie charts
36.8 %; pictorial 33.3 %; and three-dimensional 14.5 %.
Fig. 6. show the simple types of infographics. In the
research [20] was about the comparison of question
answering performance with and without information from
infographics. The result of this can be seen that the original
textual information is not sufficient to handle all the factoid
questions related to the infographics.
Arabic numerals are preferable in infographics, the
heading of table should put underlined and centered above
them. Human mind can recognize visual information with
more successful and lasting way when compared to with
170

written or verbal information transfer [5]. Therefore, the
design of infographic should be experienced to carry
transmission of data visualization. In the newspaper (Fig.1,
Fig 2.), design details that reflect the data correctly and an
attractive and understandable general design will fulfill the
main function of infographics [5].
Fig. 6. Types of Infographics [11]
In the health care informatics research [21], it is found
that a rich interactive infographic capable of showing far
more digestible information at a glance than conventional,
tabular representations [5]. The essential text content has
been explained with well designed infographics. Just by
reviewing the graphics, we can understand the whole idea of
the reports. Moreover, with today’s technology,
infographics can also be transformed to animated images for
the website version [21]. A graphical symbol or icon is
defined as the smallest graphical unit that carries meaningful
information [22].
Some major types of infographics base on its usability
[24] are as follows:
• Statistical Based
This type of infographic includes diagrams, charts,
graphs, tables, and lists. Among the most common devices
are horizontal bar charts, vertical column charts, and round
or oval pie charts, that can review statistical information.
Theses forms show how a system works, lines of
authorization of the company, shows sequential association.
It can be made in interactive manner as well.
• TimeLine Based
Timeline show the sequence of events according to the
time each event had happened. A timeline enables an
audience to realize chronological relationships very quickly.
Sometimes it shows in tabular, year-by-year paragraphs, etc.
• Process Based
These process based usually can be found in cooking
magazines or explain about recipe using infographic. Also
this type of infographic can be used to clarify in workspaces
of factory or offices. It can make readers to understand
about its practices in limited space.
• Location or Geography Based
With widely use of GIS, maps can also consider as the
best way to show geography based infographics. They
include symbols, icons, diagrams, graphs, tables, arrows and
bullets. There are many well known GIS notation that used
in maps to identify highways, streets, subways, and
facilities. Many familiar icons and symbols designed for
places like tourist spots, hospitals, airports etc. Scale is the
imperative consideration additionally because all places and
landmarks are marked according to the exact scale or ratio.
III. COLLECTION OF FREE TOOLS AND SOFTWARE
FOR INFOGRAPHICS
Infographics can be created by hand using simple
everyday tools such as paper, pen, pencils, markers,
and rulers. However, today they are more often created
using computer software, which is both faster and easier and
even more beautiful and colorful. They can be created with
general illustration software, such as Adobe Illustrator or
freewares. There are also a number of
specialized websites and tools that can be used to construct
infographics. Tools/ software/websites that can be used to
produce the infographics are as follows:
Icon Archive search throughout many free icons.
(www.iconarchive.com)
Pixlr is a free online photo editor. (www.pixlr.com)
Stat Planet create interactive visualizations, It also help
design some map-based visualizations.
(http://www.statsilk.com/software/statplanet)
Hohli is an online chart creator. (http://charts.hohli.com)
Creately allow users to make diagrams and flow charts.
(www.creately.com)
New York Times Visualization Lab use statistics from
recent NYTimes articles to create visualizations
in various formats. The Visualization Lab is
based on technology from I.B.M. Research called
Many Eyes.
Many Eyes is designed specifically for The New York
Times. It allows the users to upload their own
data or use data already stored on the site for
online visualizations. (http://www-
958.ibm.com/software/data/cognos/manyeyes/vis
ualizations)
Google Public Data capture public data and transform it
into an infographic of the choice.
Wordle create word visualizations “word clouds” using text
which users enter.
Tableau is free software(only for Windows) for creating
visualizations.
(www.google.com/publicdata/directory)
171

Gapminder have current data on major world issues and can
create visualizations for the purposes. Data is
released with new versions of the application and
updated yearly.( www.gapminder.org)
Inkscape is free graphic software available for many
platforms. Based on the Google Chart API a tool
to create charts, lines, bar and pie charts, Venn
diagrams, radar charts, and scatter plots. (www.
inkscape.org)
AmCharts is a set of JavaScript (HTML5) and flash charts
for the websites and Web-based products. It is
tool to generate charts for interactive
infographics. (www.amcharts.com)
Infogram produce infographics and interactive online
charts. (http://infogr.am)
Visually help creating data visualizations and infographics.
(http://visual.ly)
These websites: Visua.ly.com; Infographiclabs.com; and
dailyinfographic.com distribute a new infographic each day
on various themes.
III. FOR MARKETING AND BUSINESS
“Businesses that publish infographics raise their website
traffic an average of 12% more than those that don’t [29].”
Normally for most of the people, it is not easy to understand
data and statistics. With images, arrows, and flow charts can
help people recognize more [32]. Infographics are growing
in popularity, giving businesses a rich way to communicate
their important messages to clients, customers, suppliers,
and investors. An infographic is a visual interpretation of
data, for instance, a graph or a chart that is designed to
deliver complex information in a simple way. The content of
infographic functions is demonstrated in a form of diagrams
or illustration themes. These are essential to marketers
because the well-designed infographics can be created for
specific market in online marketing. It can be used to
represent statistics in a linear format, and is associated with
underlying principle or a well-built wrapping up. This tool is
great for sharing information in a fun and creative way,
especially through visual social media websites such as
MySpace, Facebook, Twitter, and others.
A multimedia infographic is an interactive way to
present the company information, and can introduce the
activity and ideas into the business giving the services and
products an exceptional demand. Using an infographic to
present the company’s systems and procedures, it would be
beneficial for new employees. The customer can easily
understand of information in a visually colorful format that
differs from a regular poster or chart because the story has
been concluded and made in sequence.
In the product design process of e-commerce, the use of
infographic or the graphical representation on computer
screens has become standard practices [24]. Now there are
many websites and various social media offering good
infographics tools and freewares, and can be posted
anywhere. Infographics function well for both the website
and for traditional printed document [24].
IV. CREATING INFOGRAPHICS
The first way to create an infographic is to hire a
designer or agency to create it. This is to make sure that the
infographic is visually independent of others and
representative of the brand. However, it can be expensive.
Another way is to find the suitable websites that offer
portfolios or templates of infographic, or information on
hiring designers. Nonetheless if we need to build the new
infographic for specific purpose, here is the first start. As
Krauss suggested a very useful five-step process to create
the infographic [25] as follows:
1. Get the idea: for example, the task is to create the
infographic of tourism information for Bangkok in
Rattanakosin Island area.
(a) (b)
(c)
Fig. 7 example of the tourist spots in Rattanakosin Island (a) Wat Pra
Kwoa (b) Kao San Road (c) Royal Palace
2. Sketch it out: draw the simple prototype in hand or in
computer to see the main components should be created
in infographic.
(a) (b)
Fig. 8. The example of sketch of Bangkok Area with tourists spots
(a) Walk Map Sketch (b) Rattanakosin Area Sketch
3. Collect the data/information: find the tourist spots in
Bangkok including their area.
(a)
(b)
Fig. 9. Some of information sources both pictures and statistic data
(a) information from website (b) information about tourists
172

4. Develop proof of concepts: place the tourist spot on the
correct area.
(a) (b)
Fig. 10. Example plot of the possible position and statistic data
(a) Rattanakosin Map (b) Comparative graph of tourist’s data
5. Lay it out with styles: start to add everything together.
(a) (b)
Fig. 11. the example of map-type infographic of Rattanakosin Island with
the position of tourist spot (a) Rattanakosin Map(1) (b) Rattanakosin
Map(2)
Hopkinsons [13] also suggested the nine-step process in
his website about the real experience with designing team
for creating infographics as follows:
Step 1: Determine Timing
Step 2: Provide direction (the same with setting a goals
or ideas)
Step 3: Decide on payment ( or setting the budget)
Step 4: Organize the data (Collect the data/information)
Step 5: First pass (sketch it out)
Step6: Getting to the great sudden ideas about
something
Step 7: The first “final” candidate is sent
Step 8: Make it better
Step 9: The Final product
Step 10: Spread the word; by post on my personal
Facebook account, Tweet to my personal Twitter
account, Submit to coolinfographics.com, Submit
to reddit, Embed in blog posts.
At this point, here are some guidelines for designing
better infographics, there are many points that good quality
infographic should be built as following suggestions [12].
• Before begin to create one, it does seem right to
understand the data or information that is attempting to
illustrate clearly for making others understand.
• Always cite the data sources and links the detail to a
spreadsheet for readers to view if they need.
• Create infographic with one exact size; it should be able
to place alone.
• Do not try to add to many details but try to focus only
one main point/idea.
• Build the data and explanation right into the infographic.
• Mix visualization styles jointly in one infographic, make
it more interesting.
• Illustrations and photos included in the infographic are
very attractive and it can make a big difference. the
additions of symbols or trademarks make it faster and
easier for the reader to understand.
• Try to guess what the real advantage of infographic is,
who the viewer will be and what point can be shared.
Make sure that infographic contains these pieces.
• Copyright issue, need to be clearly clarify about any
rights and terms of use source data, original
image/article address.
• Use whatever tools available to create the infographic.
There is the well designed infographic created for
example in Fig. 12.
Fig. 12. The Sahel nutrition crisis responded by UNICEF
[31]
V. C
ONCLUSION AND RECOMMENDATION
Infographics present information in a limited space and
an artistic format. They are able to quickly pass on facts and
keep the readers reading it. They give important
data/information and are enjoyable to read and understand.
Infographics become popular in web 2.0, because they are
data in graphic illustrative form which makes it easier for
readers to look at and digest [26] in [27]. Infographics show
how the advertising of data and information can be
ordered/arranged and offered to integrate the summarize
ideas [28]. For the website, with the advanced technology,
infographic can be integrated with multimedia concept by
adding together the sound and motion. However, as
mentioned in [16] and [12] that infographics are not a
substitute when we do not have real information/facts. It
means that ethical issue is very important, always use the
actual data; they should be done without estimating at or
making up data to add the missing information. Animated
interactive infographics will happen to common by using
HTML5 in websites; it makes infographics much more
interesting.
Some designers suggest [12; 31]:
• Using a grid to organize and structure the infographic.
• Choosing a friendly design scheme with the overall
design: colors, fonts and other design details.
• Applying the style guide, if there is no style guide,
creating a style guide in order to maintain similarity and
unity of infographic.
The foundation of infographics is composed of three
major parts. They are Visual, Content and Knowledge. The
tools help integrate these three main components to form
nice and well-designed infographics.
ACKNOWLEDGMENT
The author would like to thank Dr. Mayuree Srikulwong,
my generous UTCC colleague, for carefully reading and
commenting on review of this paper.
173

REFERENCES
[1] W. S. Cleveland, “The Elements of Graphing Data”, Revised Edition.
New Jersey: Hobart Press, 1994.
[2] S. Card, J. Mackinlay, and B. Shneiderman, “Readings in Information
Visualization: Using Vision to Think, Morgan Kaufmann Publishers”,
1999.
[3] M. Scaife, Y. Rogers, “External Cognition: How do Graphical
Representations Work?”, International Journal Human Computer
Stufies 45, 185-213, 1996.
[4] B. H. McCormick, T. A. DeFanti, and M. D. Brown, “Visualization in
scientific computing - a synopsis”, IEEE Comput. Appl. Graph., 7, 4,
61-70, 1987.
[5] B. İnan, U. Dur, “Analysis of data visualizations in daily newspapers
in terms of graphic design”, Procedia - Social and Behavioral
Sciences 51 ( 2012 ) 278 – 283, 2012.
[6] J. Stasko, “Visual Analytics for Investigative Analysis and
Exploration of Documents and Data”, 2010, Available online:
http://www.cc.gatech.edu/gvu/ii/talks/isvc10.pdf
[7] D. Newsom and J. Haynes, “Public Relations Writing: Form and
Style” p.236, 2004.
[8] M. Smiciklas, “The Power of Infographics: Using Pictures to
Communicate and Connect with Your Audience”, 2012.
[9] J. Heer, M. Bostock, and V. Ogievetskey, 2010, “A tour through the
visualization zoo”, Communications of the ACM, 53(6), 59-67, 2010.
[10] S. Card, “Information visualization”, In A. Sears & J. A. Jacko
(Eds.), Human-Computer Interaction: Design Issues, Solutions, and
Applications (510-543). Boca Raton, FL: CRC Press, 2009.
[11] Beyond Words. By: Feil, Stuart, Adweek, 15499553, 8/6/2012, Vol.
53, Issue 28
[12] K. Golombisky, R. Hagen, “Chapter 11 – The Scoop on Infographics:
Maximum Information in Minimum Space, White Space is Not The
Enemy A Beginner's Guide to Communicating Visually through
Graphic”, Web and Multimedia Design, 153–166, 2010.
[13] J. Hopkinson, “Episode 166: How to create a viral infographic to
market the brand”, 2011, Available online:
http://thehopkinsonreport.com/wp-content/uploads/2012/03/usa-
today-infographic.jpg
[14] W. Fox, 2013, Available online
http://www.futuretimeline.net/images/pioneer-10-11-aldebaran-probe-
plaque.jpg
[15] Available online: http://grin.hq.nasa.gov/ABSTRACTS/GPN-2000-
001623.html
[16] J. A. Giner, “An International Statement on Infographics and Visual
Journalism, what’s next innovations in newspaper”,
[17] Feil, Stuart, and Adweek, “Beyond Words” 15499553, 8/6/2012, Vol.
53, Issue 28,
http://www.innovationsinnewspapers.com/index.php/2011/05/09/an-
international-statement-on-infographics-and-visual-journalism/
[18] F. Serenelli, , E. Ruggeri, A. Mangiatordi, and P. Ferri, “Applying the
Multimedia Learning Theory in the Primary, School: An
Experimental Study About Learning Settings, Using Digital Science
Contents”, Proceedings of the European Conference on e-Learning is
the property of Academic Conferences,
[19] S. H. Utt and S. Pasternak, “Update on infographics in American
newspapers”, Newspaper Research Journal, 21(2), 55-66, 2000.
[20] W. Huang, C. L. Tan, “A System for Understanding Imaged
Infographics and Its Applications”, DocEng '07: Proceedings of the
2007 ACM symposium on Document engineering, 9-18, 2007.
[21] K. C. Spry, “An infographical approach to designing the problem
list”, IHI '12: Proceedings of the 2nd ACM SIGHIT International
Health Informatics Symposium, 2012.
[22] J. Welinske, “Applying User Research, Usability Testing and Visual
Design Techniques to a Printed Publication Targeted at Teenagers”,
167-169. Proceedings of SIGDOC’12, ACM Special Interest Group
on Design of Communication conference, 2012.
[23]
A. Ross, “InfoGraphic Designs: Overview, Examples and Best
Practices”, 2009, Available online:
http://www.instantshift.com/2009/06/07/infographic-designs-
overview-examples-and-best-practices/
[24] M.A. Artacho-Ram, rez, J.A. Diego-Mas, J. Alcaide-Marzal,
“Influence of the mode of graphical representation on the perception
of product aesthetic and emotional features: An exploratory study”,
International Journal of Industrial Ergonomics 38 (2008) 942– 952.
[25] J. Krasuss, “More Than Words Can Say Infographics, Learning and
Leading with Technology”, 2012.
[26] R. Byrne, “Picture this, School Library Journal”, 57(6), 15, 2011.
[27] H. Moorefield-Lang, “Infographics: Information Gets Visual”,
Information Searcher, 19(3), 15-16, 2011.
[28] M. Joss, “Book Reviews: Infographics: the Power of Visual Story
Telling”, The Seybold Report, 13(3), 8-12, 2013.
[29] HupSpot Inc., “How to Create Five Fabulous Infographics in
PowerPoint”, 2013, Available online: http://offers.hubspot.com/how-
to-easily-create-five-fabulous-infographics-in-powerpoint
[30] visual.ly/sahel-crisis, 2012, Available online:
http://t1.gstatic.com/images?q=tbn:ANd9GcSP2IGF6XhPQ94_Xodv
1paQWX87nVawGnkXyYUK-Ke53jQNiuOO0H1jqVw
[31] S. Thalassino, 9 tips for designing awesome infographics, 2012,
Available online: http://makeyourideasart.com/design/9-tips-for-
designing-awesome-infographics/
[32] B. Patton, Here is why flow charts can help, 2011, http://www.patton-
patton.com/should_you_flow_chart.htm
174