MT637 HEALTH INFORMATION SYSTEM-

LABORATORY
UNIT 2: CREATING INTERACTIVE INFOGRAPHICS AS AN EDUCATIONAL TOOL
3. Journalism (writing): Why is it shown?
INFOGRAPHICS DEFINED 4. Function (information architecture)
What is an INFOGRAPHIC? -who is it shown to?
 Information graphic; a visual representation of
information or data (Oxford English Dictionary)
 A collection of imagery, charts, and minimal text
that gives an easy-to-understand overview of a
topic (Midori Nediger, Venngage-2020)
 Visual representation of information that uses
image patterns that helps readers see how pieces of
images relate to each other
 Work by encouraging visual comparison
 Exist because we recognize visual patterns faster
than we read text

Infographics is fast ; Text is slow

WHAT MAKES A GOOD INFOGRAPHIC?
 Text: sequential; 1 word at a time
EFFECTIVE INFOGRAPHICS: are composed of few
 Pictures: can be scanned in different ways at the same
different attributes which include descriptions like:
time (natural ability of humans)

 Use striking, engaging visuals to communicate 1. It tells a story

information quickly and clearly  Not only conveys information in a
convincing manner, it also narrates a story
HISTORY OF INFOGRAPHICS worth telling
 Humans have been making cave drawings, charts and
Infographics are tall rather than having multiple slides (long
maps, and diagrams since the beginning of history form infographics)
Transparent design
-see substance without seeing the form
-shows the information not the design 2. It takes your eyes on a predefined journey
-example: train station maps  The mark of a good infographic is its
effectiveness in communicating a message
 The word “Infographic” first started appearing  Where you start and where you end (fill
consistently in the 1960s between the gaps of the story and give a
 Combination of data and design narrative)
 Data: both numbers and facts
3. It is well-structured
FRITZ KAHN (1888-1968)  If there are a lot of textual information to
 A German doctor present, organize the infographic into
 the grandfather of modern infographics sections
 wanted to explain medicine to people who knew 4. It sends one key message
nothing about medicine  Implement everything at their disposal—
 How? He thinks that imagination reaches including design elements, and text—to send
analogies. one key message
 Images that are eye-catching are hard
to forget 5. It is visually appealing
 Learn how to say more by saying  added visual appeal that makes it stand out
what we already know through from textual content
analogy
6. It is accurate and well-researched
WHAT ARE THE COMPONENTS  Handle information responsibly and give
OF AN INFOGRAPHIC? useful tips based on widely agreed-upon
facts
 The concept of an infographic straddles the fields of:
 Design
13 KINDS OF INFOGRAPHICS
 Journalism  One of the key steps in the process of creating an
 Statistics
effective and shareable infographic is understanding
 Information architecture
that information can be categorized in one of 5
 The word itself reveals two of the four components ways:
that make up an infographic 1. Chronologically
2. Alphabetically
1. Data (information): What is shown?
3. Geographically
2. Design (graphics): How it is shown?
 4. Categorically
5. Hierarchically
 Never simply show data; rather, make data a pivotal
point in an overarching story and use it to drive your
audience to action.
1. MIXED CHART: includes a variety of different
charts and graphs to show data
 bar charts, pie charts, maps, and comparisons
using vector icons
 best option when there are many statistics,
facts and figure to communicate to the
audience
2. LIST INFOGRAPHIC: mostly text that lists
information about a given subject
 This type of infographic is mostly in the long
form
 Does not rely much on graphs, charts and
visual elements
 The information is enhanced with attractive
color scheme and icons
3. TIMELINE: an infographic that looks at how a
subject has changed over time
 Telling story in a chronological order
 Can also be used in resumes; historical
development of a trend, person, or product
 Most effective when they incorporate many
different data points, accompanied with
images, icons and other graphic elements
4. HOW-TO-GUIDE: step-by-step guide in creating
something
 Best suited for visualizing “how-to” articles
or description of procedures that have
several instructions to follow
5. FLOWCHART: starts at a single point and looks at
the points that branch off based on different decision
 Different from the “how-to-guide” type in a
sense that it refers specifically to the
description of a process
 Example: Decision-making process
6. COMPARISON: compares and contrasts two
different subjects
 can be between two products, people, ideas,
things, events or places
 used to contrast seemingly opposing things
to reveal dissimilarities
 used to compare to reveal similarities
 show relative advantages and disadvantages
7. LOCATION-BASED INFOGRAPHIC: uses a map
to visualize geographical data
 One of the easiest way to visually
communicate different trends across regions
or space, local, national or global
 Map w/ icons & color-coded regions
 Ideal for comparing regional and global
statistics in a relevant subject
8. PHOTO-GRAPHIC: uses mostly photographs,
combined with text, to explain a point
 Image based infographic
 Combination of images and graphic elements
such as simple line charts, icons or text
 Composed of high quality images
 Aesthetically pleasing and catches the eye
because of the way it creatively combines
visual format
9. HIERARCHICAL INFOGRAPHIC: infographic
stacks items or subjects based on a predefined level
 Usually in a pyramidal form
 Can also be seen in a form of organizational
chart
 Key function: compare different levels and
show the relationship between each of them
10. SINGLE CHART: a chart (such as a bar or line
graph) that visualizes data on a subject
 Only use one type of chart as a focal point of
the data visualization
 In comparison with mixed chart infographic,
this type of infographic performs much
better in terms of shape and views on social
media
 In a study, it was found that
toped shared infographics were
in this form
TOP THREE MOST POPULAR
INFOGRAPHICS
 Flowcharts
 Singe chart
 List-based infographics
11. VISUALIZED NUMBER INFOGRAPHIC: adds
images to statistics to make them more appealing
 Contains various statistics and figures
visualize using large numbers, icons, or
other graphic elements
 Ideal for adding visual interest to individual
units of information
12. ANATOMICAL INFOGRAPHIC: breaks down
what makes something ‘work’
 uses visual metaphors, such as the human
body, to display information
 this format allows you to visualize
information in a palatable manner rather vs a
plain list of characteristics
 alternatively this type can also be less
figurative, by using representation of objects
and explaining the parts that make up their
anatomy
13. VISUAL RESUME: resume in infographic form
 Turning text-based resumes to visually
captivating infographics
  Hannah Morgan, in her book The
Infographic Resume, advises using visuals
with the purpose such as:
 Charts: highlight key statistics
and accomplishments
 advised the usage of this type of infographic in
industries that are open to non-traditional resumes
(marketing, advertising, graphic design, High tech
and start-ups)
STEPS TO CREATING INFOGRAPHICS
1. DEFINE YOUR TARGET AUDIENCE
 First step to crafting any message, whether in
a textual or visual format
2. DEFINE YOUR GOALS
 What exactly do I want to achieve in this
infographic?
FEW POSSIBLE OBJECTIVES:
 Reveal hidden trends and patterns using data
 Break down complex information and present
it in an easy-to-digest way.
 Provide your audience with a step-by-step
guide on how to do something
 Raise awareness of a specific issue or cause
 Create a comprehensive, go-to visual resource
on a topic
 Compare two or more products or concepts
 Translate a story, such as a brand story, into a
timeline infographic
3. DEFINE THE MEDIUM
 Many of the infographics created for
marketing purposes are published online
(saves a lot of time & resources)
 It can also be through print infographic that
can be handed out. Must consider factors
such as:
 Dimensions
 File format
 Image resolution
4. CHOOSE YOUR TOPIC
 a thesis statement backed up by data
 conduct research to arrive at a well-
supported argument
5. FIND THE RIGHT INFORMATION
-Consult these possible resources:
 Recently published surveys or polls
 Newly released reports
 Press releases
 Proprietary company data
 Academic studies
 Interviews with experts and/or clients
 Your own informal surveys using Google
Forms
6. PROCESS YOUR DATA
 Once you have the data you need to answer
your initial question or to support the point
you want to make, you can now convert the
data into a format you can work with
7. FIND THE STORY IN THE DATA
 “interview” your data to find a story worth
telling.
 Ask questions to obtain various interpretations
of the same data instead of simply sticking
with your first reading
Journalists interview sources to create a narrative, shift
through the collected data and ask questions to detect patterns
and trends that reveal facts
 Changes over time
 The difference or similarities between
items
 The makeup or composition of a whole
 The relationship between two or more
variables
Besides interviewing your data in spreadsheet form, you can
also detect patterns by visualizing data through different
types of charts
a. Compare values: bar / line chart
b. Analyze trends: bar/ line chart
c.
Show the individual parts that make up a
whole: Pie chart, stacked bar, stacked
column
d. Understand how data is distributed:
scatterplot, line chart or bar chart
e. Comprehend the relationship between
data sets: line chart, scatterplot, bubble
chart
8. HOW TO CHOOSE THE RIGHT TYPE OF
INFOGRAPHIC FOR YOUR INFORMATION
9. HOW TO WRITE COPY FOR YOUR
INFOGRAPHIC
 Finding the surprise in your data and add it
as the title
 The one big idea
Fleshing out a narrative (Exposition, inciting
incident, complication Climax, Denouement)
Create a Textual Outline
a. TITLE: must be catchy and informative
that summarized your data; it can be:
 Numbered list with an effective
hook (eg. 15 facts everyone thinks
are true)
 A question (eg. Where does your
taxpayer money go?)
 A title based on a visual
metaphor (eg. A race track for a
visual comparing the economic
growth of different countries)
 A straightforward title
b. INTRODUCTION: should be no more
than a few lines and can:
 State a problem
 Define why your audience should
care about it
 Set the stage for your exposition
of the problem or a unique point
of view
  Provide an enticing statistic or
figure to pique your audience’s  Choosing Font Combinations
interest -fonts also determine the mood and overall
look and feel of your infographic
c. BODY CONTENT: should develop the
 How to Create Effective Charts
narrative and arguments behind each of
your claims; include:
12. WRAPPING EVERYTHING UP
 Section subheadings that
 Adding finishing touches
correspond with each of your
main points  Include your sources
 Subsection text under  Go back and proofread (check for any grammar
subheadings that correspond and spelling errors)
with each of your supporting  Ask other for feedback
details
 Concise text to support
highlighted stats or figure
 Chart labels

d. SOURCES: include a complete list of

information sources, with links, at the end
of your infographic.

10. CREATE A WIREFRAME

 Create several iterations of your wireframe
before finally arriving at one that effectively
tells your story
 Make sure to include the following:
 Placement of titles, subtitles, and
introduction
 Placement of highlighted stats and
figures
 Rough sketches of charts and graphs
 Rough sketches of illustrations or
icons

11. DESIGN YOUR INFOGRAPHIC

 Deciding on a Visual Theme
-can use visual metaphor, symbols or other
visual associations
 Choosing a Color Scheme
-what do colors mean?

COLOR SCHEME TOOLS:

 Adobe Color CC
 Coolors.co
 Paletton