The design phase begins while working through early development phases, but doesn’t really get going until you start putting pen to paper. Table 2 summarizes basic infographic design considerations, starting with establishing a short list of a priori design principles specific to your project and ending with prototype testing. Once you finalize your design, go back to Chapter 1 for ideas about the distribution and maintenance phases.

Table 2. Infographic design phase considerations.

Basic Elements of an Infographic

Every infographic is different because there are so many variables, including differences in topics, intended outcomes, audiences and content. Nuances of fonts, colours and layout differ for various purposes. While there are no established standard templates, the basic elements of an infographic are:⁴

1. Structure: a clear, logical layout.
2. White space: meaningful use of white space.
3. Color palette: colours are consistent, complementary, purposeful and meaningful, with sufficient contrast between text and background.
4. Text: appropriate and accessible font types and sizes.
5. Imagery: effective information visualization, including use of alt text for images posted online in HTML.

There are two broad areas to consider in telling the story: (1) content, meaning the information that will be conveyed in text and imagery, and (2) visual look, meaning the colours, text font, and layout of content, images and white space.

• Content is chosen to achieve a desired outcome. The content must be evidence-based, ethically correct, unbiased and accessible. It is crucial to use the content in ways that make sense to the intended audience. For example, patient informants who have lived for years with a health condition that the infographic is addressing need to think about how they would have understood the infographic back when they were first being diagnosed. 14 Consider content and design aspects for infographics for health professional audiences, as mentioned in other sections of this manual.
• Visual design requires understanding “visual literacy”, meaning how people interpret the way infographics look. 2,22 Consider accessibility factors, for example users with visual impairment might miss important context that you mean to convey by your colour choices. 21

Accessibility

Consider accessibility issues while designing your infographic. Accessibility design ensures that all users, including those with disabilities or impairments can access and understand the information. See sections below for accessibility tips.^17,18,21

First Step: List Design Principles

Before you start on the design, consider the story you want to tell. Reflect on the information in this manual to draw up a list of principles that will guide design of your infographic. For example:

• State your objective with intended outcomes.
• Summarize your intended audience’s persona.
• Identify accessibility requirements.
• Describe the type of content you will use; focus on your objective, the evidence base, and your audience.
• Look through the rest of this chapter for ideas about principles regarding, for example, audience engagement, layout, text versus image content, and how text, imagery, colour and white space will work together for your audience.

Keep in mind differences and overlaps between the organization’s goals (what you want to achieve with the infographic) and the audience’s goals (what your audience wants from the infographic).

In addition to the overall storyline for the infographic, patient’s own stories can help readers to make sense of the information and understand why the infographic’s story is important to them.²³

Clarify the Storyline

“Design is an opportunity to continue telling the story, not just to sum everything up” (Tate Linden)²

Good infographics tell a story that makes sense to the user.

• Infographics are very short stories, not novels.
• A story is a narrative about an emotional journey taken by characters. Stories allow people to share information in memorable way that enables deeper understanding. For example, simply telling someone to do something does not stick as well as telling someone about a person who had a good outcome if they did the thing. The first is merely a directive, while the second is a human story.
• The plot is the sequence of events that make up the story, from start to finish. The plot includes the beginning where the storyteller introduces the characters, setting and problem; then moves to the rise in action where tension escalates, then talks about the peak (climax) where a decision must be made, then provides answers during the fall in action and, finally, describes the happy ending where the problem is resolved.
• The storyline is a summary of the plot that describes the main thread of the story, summarizing main events around a problem that affects the characters, in a setting where the story takes place.

Sketch the Layout before Adding Content

A study of design students found that better infographics were designed by students who started by laying out all the content blocks on a piece of paper with pen or pencil before going to the computer or adding any content and there seems to be consensus on this approach.²⁴ Stones and Gent (2015) and Kibar et al. (2017) show examples of the process:^11,22

• Find some examples of infographics similar to yours in terms of content, intent or audience.
• With the storyline in mind, align blocks horizontally and vertically. Eye-tracking studies give insights into how readers scan blocks in infographics. Grid systems guided readers better than random block placements.¹¹
• A good infographic tells a story.¹⁵ Lay out the blocks on the paper to achieve that end. Consider cues like headings, arrows, callouts, flow of text and images. Highlight main ideas in the story.
• Different people read infographics in different ways, so make drafts on paper to test different ways of positioning text and imagery blocks, considering reading flow in the storyline.²⁵ Some, particularly some professionals, go straight to text from left to right and top down. Others look first at the headings or images then might go back to read something in more depth. Some just skim, and callouts might focus those readers.¹⁴ The trick is to design infographics for different reading styles and accessibility needs. For example, some users will use a screen reader and some will have other people interpret the infographic for them. Consider how the design works when it is read out loud.
• Use white space carefully. Place white space around blocks of text and graphics to highlight main storyline points. Don’t make text blocks too narrow or too wide.
• Consider the infographic medium. Layout will be influenced by whether the infographic will be printed on letterhead-sized paper in black and white or colour, made into a folded brochure, or distributed electronically in a PDF or HTML format for viewing on cellphones and tablets.²⁶

One author suggests this:²⁶

• Use informative titles and headings.
• Use a three-part introduction:
  • Tell reader why the infographic is important to them.
  • Tell them what it was designed to accomplish.
  • Tell them what to expect when they read it.
• Organize the flow logically and make the flow apparent to the reader.
• Use appropriate text, imagery and colours that support the storyline.

Here is another way:²³

• Get right to the point:
  • Answer “Is this information for me?”
  • Answer “What did you find out?”
  • Answer “How did you find this information, where did it come from?”
  • Answer “What should I do next?”

Choose the Title

Readers decide in a few seconds whether to read an infographic.¹⁵

• A few action-oriented, impactful words arouse interest better than an elaborate title.
• Use a more suggestive subtitle.
• Use words that speak directly to needs experienced by the target audience.
• But the title content must be true to the evidence and ethically sound, not misleading or sensational.¹¹

Stones and Gent (2015) pointed out different approaches to titles:¹¹

• Subject: “Vaccinations in Infants”
• Message: “Infant vaccination is available”
• Question: “What is the state of infant vaccination?”
• Fear: “Infants die when not vaccinated”
• Hopeful: “Infant vaccination can be increased”
• Call: “Be vaccinated not sick”

Text Content

These tips come from academic studies, design experts and expert advisors with lived experience:^{4,6,11,14,15,17,18,25}

• The user needs to know, “Is this for me?”.
• Use headings and subheadings to organize the text and aid logical reading flow.
• Avoid large blocks of text. Keep a text block together, don’t wrap it around images, for example. Avoid dense text. Use left-aligned not justified text to prevent complex white spacing.
• Put important words first and keep sentences short.¹⁷ One idea per paragraph. Start the paragraph with a sentence giving the paragraph’s topic.
• Use plain language. Use short, familiar words and short sentences. Use common words and only use jargon or technical language when necessary and likely to be understood the audience.¹⁷ Use personal pronouns like “we” and “you”.²⁷ Avoid acronyms or symbols.
• Use the present not past tense, and active not passive voice: “your doctor is going to _” is better than “Doctors would have_”.¹⁷
• Use realistic examples that the audience can relate to. Use concrete not abstract words and order events temporally.
• Arial or Calibri fonts seem to be easy to read, but don’t mix fonts, certainly no more than 3 types. The 10-point size generally is too small. Use much larger fonts for children and those with reading difficulty. Avoid fonts with serifs.¹⁷ Bolded font works better for emphasis than italics or underlining.
• Keep bulleted lists short and keep them together not across two pages.
• Be consistent in style features like headings and spelling out numbers versus showing regular numbers. Avoid capitalization, hyphens, semicolons and long sentences.
• Be cautious about how lay readers might interpret charts and statistics. Think carefully about how to use statistics. Write “half” instead of “49%”. This is the process of effective “data visualization” and there is lots published about it.²
• Be clear about evidence sources for the content in the infographic. Provide information about access to further resources for the audience. Refer (in an easy-to-understand way) to evidence sources: “How did you find this information?”.
• If tables are used, make them accessible: use informative headers for rows and columns, and a caption or summary to explain the table’s purpose.¹⁸ Keep tables simple: avoid merged and empty cells, and rotated text.¹⁷

Plain language is preferred. Plain language means wording, structure and design that is so simple and straightforward that everyone can understand it. Technical language often fails because only specialized readers can understand it, including even a narrow group of health care practitioners within a sub-specialty of their own specialty. Patient information leaflets can be laid out well but often exceed patient comprehension thresholds.²⁷

• Readability refers to ease of reading and understanding text. You can test readability using Microsoft Word. Select the block of text. Click on “Home”, then “Editor”, then “Document Stats”. Word returns scores for Flesch Reading Ease and Flesh-Kincaid Grade Level. Health care providers can read technical language, while language for the general public needs to consider different reading abilities. Guidelines suggest that general public infographic readability should be grade 8 or less and grades 4-6 are sometimes preferred. ^28,29
• Understandability refers to how easy it is for readers to understand the information. Actionability refers to how easy it is for readers to act on the information. Both can be assessed with, for example, the Patient Education Materials Assessment Tool (PEMAT). 12

Imagery Content

Graphics (drawings) and images (photos) aid reader retention when used well.¹⁵ Here are some tips from the literature: ^14,15,23,30

• Not all handouts need fancy graphics or images. In fact, there is some limited evidence that some

Designing the Infographic | 10 technical readers like health care providers can prefer text in certain circumstances. But even handouts for technical readers can benefit from graphics, and graphics aid engagement and retention for all audiences. 15

• Avoid distracting graphics like unnecessary grid lines or box outlines.

• Avoid mixing graphics and images with starkly different colours, contrast and dark/white space.

• Use images that seem real, relatable and sympathetic to the audience. Be aware that some people interpret images far differently than intended by the designer. 30 Avoid stock images using stereotypical representations of people because they look “phoney” to audiences and are not relatable.

• Use alt text (alternative text) to describe images in HTML infographics to improve accessibility for readers with different learning styles or accessibility needs. 17,21 Accessibility features can also be built into PDF versions.

• Use inclusive imagery. Avoid inadvertently reinforcing negative stereotypes of ethnicity, age or gender.

• The authoring organization’s logo can convey credibility as well as source. 23

Data visualization is the process of picking the right way to image data.

18

• Be careful with charts: they can be easily misinterpreted, even by technical readers. Pick the right chart type for the data type and audience, or even use a non-chart method to display the data.

• Arcia et al. (2015) provide details about general public preferences for graphics of statistics and other types of health information. 19

• Graphics that use curves are preferred over linear ones like standard bar charts. 31

Text and Imagery Used Together

There is evidence that information from infographics is more likely to be retained than from text alone.15 Three randomized controlled trials comparing infographics and plain language summaries of Cochrane systematic reviews found that while infographics were preferred in terms of reading experience and user-friendliness in both lay and professional audiences, there were no differences between the two modes in knowledge translation.³² That study has been criticized, but another (Canadian) study had similar findings.^5,33 Nevertheless, both studies found that readers preferred infographics over text alone.

Here are tips from the literature for thinking about text and images together:^15,25

• Keep together text and images that refer to the same topic.
• Imagery and text generally complement each other rather than convey the same information but sometimes can be used to repeat the same information for different reader styles.
• Repeat the most important points in different ways using text, fonts, callouts, or images.
• Don’t wrap a block of text around an image.
• Consider how to address varying beliefs held by audience members.
• For charts and graphs, label axes, data points and legends clearly with text rather than only colour and shape.¹⁸

If you want some insight into how design experts think of “visual literacy” in terms of infographics, check out Dunlap and Lowenthal (2016).² They point out that visuals are powerful learning tools and that the overall look is important. To get technical, “Effective visuals apply visual organization and structure to reflect relationships, describe how parts of a whole interact, and/or reveal an underlying story.”

Colour Palette

Colours used in fonts, background and images must work together. They can have considerable affective impact, and they influence reader’s comprehension owing to the meanings readers attach to colours, and ease of readability due to contrast levels and other accessibility considerations.^{15,19,21,22,34,35}

• There are many online tools for assisting with infographic colour palette choice, but they might not consider nuances like cultural meanings. “Stoplight” colours were found to convey value judgements to some audiences, for example.
• Experts advise restricting colour rather than over-using it, and restricting the palette to 3-5 colours.¹¹
• The Piktochart website has a basic primer. 34 Canva can suggest colour palettes.³⁶
• Don’t rely on colour alone to convey emphasis and meaning.¹⁷
• Consider colour vision impairments, which affect one in twenty people.⁴ There are online tools that can be used to ensure that the colour palette is accessible to people who perceive colour in different ways.^18,21 Red/green and blue/yellow combinations can be problematic. Colour contrast is especially important for those with low vision. Online resources like the WebAIM Contrast Checker tool can be helpful (https://webaim.org/resources/contrastchecker).

Online Infographics

There are a number of accessibility design considerations for infographics that will be posted as HTML and even PDF formats.^18,36,37 Here are a few basic examples but readers should review other sources for more detailed information if they are designing online interactive infographics:

• Use concise, informative “alt text” to convey the meaning of an infographic for readers with vision impairments.
• Allow users to navigate them with a keyboard alone so that all interactive elements like buttons and links are accessible by the tab key with clear focus indicators.
• Use HTML elements for tables that include headers, columns, and captions or summaries.
• Use “semantic HTML” such as headings that create a hierarchal outline, appropriately using lists and paragraphs.
• Provide alternative versions of the infographic for users who cannot access the visual content fully, for example a downloadable table or text-based summary.
• Software is available that can test an infographic for use with screen readers that speak content aloud.

Ethical, Privacy and Copyright Considerations

While brevity is a key goal in infographics design, it is important to carefully avoid causing ethical problems that lead to misinterpretation, misinformation and bias.^37,38 It is also important to consider privacy issues around use of images and personal stories.¹⁰  Be cautious about using content like images that might be protected by someone’s copyright, including images generated by artificial intelligence software or online services.

Cite Sources

In a succinct and user-friendly way, tell the reader where the information you are giving them comes from. For health care providers, give them a sense of the strength of evidence and certainty of conclusions. If appropriate and with permissions, add logos of supporting institutions.

Prototype Development

Refine the design before finalizing it. Prototypes can be shown to health care expert advisors for content and to audience members to assess engagement, accessibility, comprehension and actionability.^19,39 If intending to use a screen reader for HTML or PDF versions, pilot the implementation.