Professional Documents
Culture Documents
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 For Journalism, there is the importance of information
journalism back in 1980s. It may be used to accommodate visualization which is adding in reporting the believable and
newsletters, newspapers, magazines, and reports. Now the trusted means context. As mentioned in the book title [12]
infographics have been applied for telling the story. Infographics: Maximum Information in Minimum Space,
Additionally, the changing lifestyle in digital age, data and
this phase explains the main purpose of infographics design
information need to be quicker and easier processed. People
scan for the headlines and graphics (usually in pictures, which is produced as helpful as they can in order to give
graphs, charts) that attract their interest. They spend less time as much detailed information as possible and it can save
to consider whether it is worth further reading. Multimedia spaces. Infographics created by Peter
infographic can be created in 3D to make it more appreciative Sullivan for The Sunday Times during the 1970s - 1990s
than regular illustrative pictures and text, especially for the were some of the important reasons in encouraging
difficult and complicated contents. For the people who need to newspapers to use more infographics. Peter Sullivan (1932
communicate quickly; the spoken or printed account is 1996) was a British graphic designer recognized for his
sometimes too difficult for understanding. This paper includes work on information graphics. Sullivan is also one of the
the history, importance, and benefit of infographics in general
few authors who have written about information graphics in
and introduces the tools for making infographics efficiently.
The suggestive guidelines of infographics creation are also newspapers. Similarly, the staff artists at USA Today
addressed. newspaper, the US newspaper that launched in 1982, their
objective is to use graphics to make information easier to
Keywords- Infographics, HCI, Data Visualization, understand. USA Today usually gets credit for publishing
Information Visualization, InfoVis up-to-date infographics. Colorful charts and graphs remain
I. INTRODUCTION hallmarks of USA Todays design for readers. However,
people were using graphics to deliver information well
A picture is worth a thousand words, is the familiar before the 1982 origins of USA Today [12]. There are also
phrase. The human brain is more able to identify and many excellent infographic was published in New York
comprehend relationships and patterns if data is encoded Journal infographics in 1898 (Fig.1 and Fig.2). It has long
into visual forms [1]. The definition of infographic are: history in Journalism and Printed Poster. One of USA Today
The use of computer-supported, interactive visual infographic show by using cartoonesque images to represent
representations of data to amplify cognition [2]; data about the quantity of pasta consumed (Fig. 3). The
infographic is graphic visual representation of earliest humans on the planet shared information in pictures
information, data or knowledge intended to clarify and carved and painted on rocks and caves. NASAs Voyager
integrate difficult information quickly and clearly [7, 8]. interstellar space probes, launched in 1977, carry
For education (definition) for infographic: a collection of information-rich diagrams to show the earth existing [13;
graphic organizers integrates different media in simple 14; 15] in Fig.4, Fig. 5.
diagrams: text, images, symbols and schemas [18]. In In the 21st Century, data visualizations have been
Human and Computer Interaction (HCI), infographics can applied to commonly used computer systems,
improve user cognition by utilizing graphics to enhance the including desktop publishing, website /blog
human visual systems ability to see patterns and trends [9, publishing and Geographic Information Systems (GIS).
10]. Recognition and understanding of infographics is a
Infographic is a new way to visualize data. Another relatively new research field. With todays overflow of
word for infographic is information visualization (InfoVis) information, infographics help readers understand and
or data visualization [6]. Visualization is defined as [3] process the information quickly. A good infographic will
mechanisms by which humans perceive, interpret, use and not only tell readers story, but will also create interest and
communicate visual information [4] in [3]. The main aim induce people to read the article similar to how good
of visualization [5] is to communicate information more headlines and photos attract readers. Nevertheless, graphics
clearly and effectively by using graphical means. could fast persuade readers to disregard the article.
169
Fig. 5. The plaque attached to NASA Pioneer 10[15].
170
written or verbal information transfer [5]. Therefore, the Process Based
design of infographic should be experienced to carry These process based usually can be found in cooking
transmission of data visualization. In the newspaper (Fig.1, magazines or explain about recipe using infographic. Also
Fig 2.), design details that reflect the data correctly and an this type of infographic can be used to clarify in workspaces
attractive and understandable general design will fulfill the of factory or offices. It can make readers to understand
main function of infographics [5]. 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.
171
Gapminder have current data on major world issues and can IV. CREATING INFOGRAPHICS
create visualizations for the purposes. Data is
released with new versions of the application and The first way to create an infographic is to hire a
updated yearly.( www.gapminder.org) designer or agency to create it. This is to make sure that the
Inkscape is free graphic software available for many infographic is visually independent of others and
platforms. Based on the Google Chart API a tool representative of the brand. However, it can be expensive.
to create charts, lines, bar and pie charts, Venn Another way is to find the suitable websites that offer
diagrams, radar charts, and scatter plots. (www. portfolios or templates of infographic, or information on
inkscape.org) hiring designers. Nonetheless if we need to build the new
AmCharts is a set of JavaScript (HTML5) and flash charts infographic for specific purpose, here is the first start. As
for the websites and Web-based products. It is Krauss suggested a very useful five-step process to create
tool to generate charts for interactive the infographic [25] as follows:
infographics. (www.amcharts.com) 1. Get the idea: for example, the task is to create the
Infogram produce infographics and interactive online infographic of tourism information for Bangkok in
charts. (http://infogr.am) Rattanakosin Island area.
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
(a) (b)
Businesses that publish infographics raise their website
traffic an average of 12% more than those that dont [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 (c)
their important messages to clients, customers, suppliers, Fig. 7 example of the tourist spots in Rattanakosin Island (a) Wat Pra
and investors. An infographic is a visual interpretation of Kwoa (b) Kao San Road (c) Royal Palace
data, for instance, a graph or a chart that is designed to
deliver complex information in a simple way. The content of 2. Sketch it out: draw the simple prototype in hand or in
infographic functions is demonstrated in a form of diagrams computer to see the main components should be created
or illustration themes. These are essential to marketers in infographic.
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,
(a) (b)
especially through visual social media websites such as Fig. 8. The example of sketch of Bangkok Area with tourists spots
MySpace, Facebook, Twitter, and others. (a) Walk Map Sketch (b) Rattanakosin Area Sketch
A multimedia infographic is an interactive way to
present the company information, and can introduce the 3. Collect the data/information: find the tourist spots in
activity and ideas into the business giving the services and Bangkok including their area.
products an exceptional demand. Using an infographic to
present the companys 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 (a)
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 (b)
infographics tools and freewares, and can be posted Fig. 9. Some of information sources both pictures and statistic data
anywhere. Infographics function well for both the website (a) information from website (b) information about tourists
and for traditional printed document [24].
172
4. Develop proof of concepts: place the tourist spot on the additions of symbols or trademarks make it faster and
correct area. 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
(a) (b) image/article address.
Fig. 10. Example plot of the possible position and statistic data Use whatever tools available to create the infographic.
(a) Rattanakosin Map (b) Comparative graph of tourists data There is the well designed infographic created for
example in Fig. 12.
5. Lay it out with styles: start to add everything together.
(a) (b) Fig. 12. The Sahel nutrition crisis responded by UNICEF
Fig. 11. the example of map-type infographic of Rattanakosin Island with
[31]
the position of tourist spot (a) Rattanakosin Map(1) (b) Rattanakosin
Map(2) V. CONCLUSION AND RECOMMENDATION
Infographics present information in a limited space and
Hopkinsons [13] also suggested the nine-step process in an artistic format. They are able to quickly pass on facts and
his website about the real experience with designing team keep the readers reading it. They give important
for creating infographics as follows: data/information and are enjoyable to read and understand.
Step 1: Determine Timing Infographics become popular in web 2.0, because they are
Step 2: Provide direction (the same with setting a goals data in graphic illustrative form which makes it easier for
or ideas) readers to look at and digest [26] in [27]. Infographics show
Step 3: Decide on payment ( or setting the budget) how the advertising of data and information can be
Step 4: Organize the data (Collect the data/information) ordered/arranged and offered to integrate the summarize
Step 5: First pass (sketch it out) ideas [28]. For the website, with the advanced technology,
Step6: Getting to the great sudden ideas about infographic can be integrated with multimedia concept by
something adding together the sound and motion. However, as
Step 7: The first final candidate is sent mentioned in [16] and [12] that infographics are not a
Step 8: Make it better substitute when we do not have real information/facts. It
Step 9: The Final product means that ethical issue is very important, always use the
Step 10: Spread the word; by post on my personal actual data; they should be done without estimating at or
Facebook account, Tweet to my personal Twitter making up data to add the missing information. Animated
account, Submit to coolinfographics.com, Submit interactive infographics will happen to common by using
to reddit, Embed in blog posts. HTML5 in websites; it makes infographics much more
interesting.
At this point, here are some guidelines for designing Some designers suggest [12; 31]:
better infographics, there are many points that good quality Using a grid to organize and structure the infographic.
infographic should be built as following suggestions [12]. Choosing a friendly design scheme with the overall
Before begin to create one, it does seem right to design: colors, fonts and other design details.
understand the data or information that is attempting to Applying the style guide, if there is no style guide,
illustrate clearly for making others understand. creating a style guide in order to maintain similarity and
Always cite the data sources and links the detail to a unity of infographic.
spreadsheet for readers to view if they need. The foundation of infographics is composed of three
Create infographic with one exact size; it should be able major parts. They are Visual, Content and Knowledge. The
to place alone. tools help integrate these three main components to form
Do not try to add to many details but try to focus only nice and well-designed infographics.
one main point/idea.
Build the data and explanation right into the infographic. ACKNOWLEDGMENT
Mix visualization styles jointly in one infographic, make The author would like to thank Dr. Mayuree Srikulwong,
it more interesting. my generous UTCC colleague, for carefully reading and
Illustrations and photos included in the infographic are commenting on review of this paper.
very attractive and it can make a big difference. the
173
REFERENCES [18] F. Serenelli, , E. Ruggeri, A. Mangiatordi, and P. Ferri, Applying the
[1] W. S. Cleveland, The Elements of Graphing Data, Revised Edition. Multimedia Learning Theory in the Primary, School: An
New Jersey: Hobart Press, 1994. Experimental Study About Learning Settings, Using Digital Science
Contents, Proceedings of the European Conference on e-Learning is
[2] S. Card, J. Mackinlay, and B. Shneiderman, Readings in Information the property of Academic Conferences,
Visualization: Using Vision to Think, Morgan Kaufmann Publishers,
1999. [19] S. H. Utt and S. Pasternak, Update on infographics in American
newspapers, Newspaper Research Journal, 21(2), 55-66, 2000.
[3] M. Scaife, Y. Rogers, External Cognition: How do Graphical
Representations Work?, International Journal Human Computer [20] W. Huang, C. L. Tan, A System for Understanding Imaged
Stufies 45, 185-213, 1996. Infographics and Its Applications, DocEng '07: Proceedings of the
2007 ACM symposium on Document engineering, 9-18, 2007.
[4] B. H. McCormick, T. A. DeFanti, and M. D. Brown, Visualization in
scientific computing - a synopsis, IEEE Comput. Appl. Graph., 7, 4, [21] K. C. Spry, An infographical approach to designing the problem
61-70, 1987. list, IHI '12: Proceedings of the 2nd ACM SIGHIT International
Health Informatics Symposium, 2012.
[5] B. nan, U. Dur, Analysis of data visualizations in daily newspapers
in terms of graphic design, Procedia - Social and Behavioral [22] J. Welinske, Applying User Research, Usability Testing and Visual
Sciences 51 ( 2012 ) 278 283, 2012. Design Techniques to a Printed Publication Targeted at Teenagers,
167-169. Proceedings of SIGDOC12, ACM Special Interest Group
[6] J. Stasko, Visual Analytics for Investigative Analysis and on Design of Communication conference, 2012.
Exploration of Documents and Data, 2010, Available online:
http://www.cc.gatech.edu/gvu/ii/talks/isvc10.pdf [23] A. Ross, InfoGraphic Designs: Overview, Examples and Best
Practices, 2009, Available online:
[7] D. Newsom and J. Haynes, Public Relations Writing: Form and http://www.instantshift.com/2009/06/07/infographic-designs-
Style p.236, 2004. overview-examples-and-best-practices/
[8] M. Smiciklas, The Power of Infographics: Using Pictures to
[24] M.A. Artacho-Ram, rez, J.A. Diego-Mas, J. Alcaide-Marzal,
Communicate and Connect with Your Audience, 2012.
Influence of the mode of graphical representation on the perception
[9] J. Heer, M. Bostock, and V. Ogievetskey, 2010, A tour through the of product aesthetic and emotional features: An exploratory study,
visualization zoo, Communications of the ACM, 53(6), 59-67, 2010. International Journal of Industrial Ergonomics 38 (2008) 942 952.
[10] S. Card, Information visualization, In A. Sears & J. A. Jacko [25] J. Krasuss, More Than Words Can Say Infographics, Learning and
(Eds.), Human-Computer Interaction: Design Issues, Solutions, and Leading with Technology, 2012.
Applications (510-543). Boca Raton, FL: CRC Press, 2009. [26] R. Byrne, Picture this, School Library Journal, 57(6), 15, 2011.
[11] Beyond Words. By: Feil, Stuart, Adweek, 15499553, 8/6/2012, Vol. [27] H. Moorefield-Lang, Infographics: Information Gets Visual,
53, Issue 28 Information Searcher, 19(3), 15-16, 2011.
[12] K. Golombisky, R. Hagen, Chapter 11 The Scoop on Infographics: [28] M. Joss, Book Reviews: Infographics: the Power of Visual Story
Maximum Information in Minimum Space, White Space is Not The Telling, The Seybold Report, 13(3), 8-12, 2013.
Enemy A Beginner's Guide to Communicating Visually through
Graphic, Web and Multimedia Design, 153166, 2010. [29] HupSpot Inc., How to Create Five Fabulous Infographics in
PowerPoint, 2013, Available online: http://offers.hubspot.com/how-
[13] J. Hopkinson, Episode 166: How to create a viral infographic to to-easily-create-five-fabulous-infographics-in-powerpoint
market the brand, 2011, Available online:
http://thehopkinsonreport.com/wp-content/uploads/2012/03/usa- [30] visual.ly/sahel-crisis, 2012, Available online:
today-infographic.jpg http://t1.gstatic.com/images?q=tbn:ANd9GcSP2IGF6XhPQ94_Xodv
1paQWX87nVawGnkXyYUK-Ke53jQNiuOO0H1jqVw
[14] W. Fox, 2013, Available online
http://www.futuretimeline.net/images/pioneer-10-11-aldebaran-probe- [31] S. Thalassino, 9 tips for designing awesome infographics, 2012,
plaque.jpg Available online: http://makeyourideasart.com/design/9-tips-for-
designing-awesome-infographics/
[15] Available online: http://grin.hq.nasa.gov/ABSTRACTS/GPN-2000-
001623.html [32] B. Patton, Here is why flow charts can help, 2011, http://www.patton-
patton.com/should_you_flow_chart.htm
[16] J. A. Giner, An International Statement on Infographics and Visual
Journalism, whats 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/
174