{"id":363,"date":"2024-12-07T07:38:21","date_gmt":"2024-12-07T12:38:21","guid":{"rendered":"https:\/\/pressbooks.library.upei.ca\/infographicsmanual\/?post_type=chapter&p=363"},"modified":"2024-12-16T05:18:36","modified_gmt":"2024-12-16T10:18:36","slug":"designing-the-infographic","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.upei.ca\/infographicsmanual\/chapter\/designing-the-infographic\/","title":{"raw":"Design Phase","rendered":"Design Phase"},"content":{"raw":"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<\/strong> summarizes basic infographic design considerations, starting with establishing a short list of a priori<\/em> 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.\r\n\r\n[table id=2 \/]\r\n

Basic Elements of an Infographic<\/h1>\r\nEvery 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:4<\/sup>\r\n
    \r\n \t
  1. Structure<\/strong>: a clear, logical layout.<\/li>\r\n \t
  2. White space<\/strong>: meaningful use of white space.<\/span><\/li>\r\n \t
  3. Color palette<\/strong>: colours are consistent, complementary, purposeful and meaningful, with sufficient contrast between text and background.<\/span><\/li>\r\n \t
  4. Text<\/strong>: appropriate and accessible font types and sizes.<\/span><\/li>\r\n \t
  5. Imagery<\/strong>: effective information visualization, including use of alt text for images posted online in HTML.<\/span><\/li>\r\n<\/ol>\r\nThere are two broad areas to consider in telling the story: (1) content<\/strong>, meaning the information that will be conveyed in text and imagery, and (2) visual look<\/strong>, meaning the colours, text font, and layout of content, images and white space.\r\n
      \r\n \t
    • Content<\/strong> 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.<\/span><\/li>\r\n \t
    • Visual design<\/strong> requires understanding \u201cvisual literacy\u201d, 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<\/span><\/li>\r\n<\/ul>\r\n

      Accessibility<\/h1>\r\nConsider 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<\/sup>\r\n

      First Step: List Design Principles<\/h1>\r\nBefore 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:\r\n
        \r\n \t
      • State your objective with intended outcomes.<\/li>\r\n \t
      • Summarize your intended audience\u2019s persona.<\/span><\/li>\r\n \t
      • Identify accessibility requirements.<\/span><\/li>\r\n \t
      • Describe the type of content you will use; focus on your objective, the evidence base, and your audience.<\/span><\/li>\r\n \t
      • 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.<\/span><\/li>\r\n<\/ul>\r\nKeep in mind differences and overlaps between the organization\u2019s goals (what you want to achieve with the infographic) and the audience\u2019s goals (what your audience wants from the infographic).\r\n\r\nIn addition to the overall storyline for the infographic, patient\u2019s own stories can help readers to make sense of the information and understand why the infographic\u2019s story is important to them.23<\/sup>\r\n

        Clarify the Storyline<\/h1>\r\n\u201cDesign is an opportunity to continue telling the story, not just to sum everything up<\/em>\u201d (Tate Linden)2<\/sup>\r\n\r\nGood infographics tell a story that makes sense to the user.\r\n
          \r\n \t
        • Infographics are very short stories,<\/strong> not novels.<\/li>\r\n \t
        • A story<\/strong> 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.<\/li>\r\n \t
        • The plot<\/strong> 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.<\/span><\/li>\r\n \t
        • The storyline<\/strong> 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.<\/span><\/li>\r\n<\/ul>\r\n

          Sketch the Layout before Adding Content<\/h1>\r\nA 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<\/strong> going to the computer or adding any content and there seems to be consensus on this approach.24<\/sup> Stones and Gent (2015) and Kibar et al. (2017) show examples of the process:11,22<\/sup>\r\n
            \r\n \t
          • Find some examples of infographics similar to yours in terms of content, intent or audience.<\/li>\r\n \t
          • 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.11<\/sup><\/span><\/li>\r\n \t
          • A good infographic tells a story.15<\/sup> 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.<\/span><\/li>\r\n \t
          • 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.25<\/sup> 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.14<\/sup> 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.<\/span><\/li>\r\n \t
          • Use white space carefully. Place white space around blocks of text and graphics to highlight main storyline points. Don\u2019t make text blocks too narrow or too wide.<\/span><\/li>\r\n \t
          • 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.<\/span>26<\/sup><\/li>\r\n<\/ul>\r\nOne author suggests this:26<\/sup>\r\n
              \r\n \t
            • Use informative titles and headings.<\/li>\r\n \t
            • Use a three-part introduction:<\/span>\r\n
                \r\n \t
              • Tell reader why the infographic is important to them.<\/span><\/li>\r\n \t
              • Tell them what it was designed to accomplish.<\/span><\/li>\r\n \t
              • Tell them what to expect when they read it.<\/span><\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
              • Organize the flow logically and make the flow apparent to the reader.<\/span><\/li>\r\n \t
              • Use appropriate text, imagery and colours that support the storyline.<\/span><\/li>\r\n<\/ul>\r\nHere is another way:23<\/sup>\r\n
                  \r\n \t
                • Get right to the point:<\/strong>\r\n
                    \r\n \t
                  • Answer \u201cIs this information for me?\u201d<\/span><\/li>\r\n \t
                  • Answer \u201cWhat did you find out?\u201d<\/span><\/li>\r\n \t
                  • Answer \u201cHow did you find this information, where did it come from?\u201d<\/span><\/li>\r\n \t
                  • Answer \u201cWhat should I do next?\u201d<\/span><\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n

                    Choose the Title<\/h1>\r\nReaders decide in a few seconds whether to read an infographic.15<\/sup>\r\n
                      \r\n \t
                    • A few action-oriented, impactful words arouse interest better than an elaborate title.<\/li>\r\n \t
                    • Use a more suggestive subtitle.<\/span><\/li>\r\n \t
                    • Use words that speak directly to needs experienced by the target audience.<\/span><\/li>\r\n \t
                    • But the title content must be true to the evidence and ethically sound, not misleading or sensational.<\/span>11<\/sup><\/li>\r\n<\/ul>\r\nStones and Gent (2015) pointed out different approaches to titles:11<\/sup>\r\n
                        \r\n \t
                      • Subject: \u201cVaccinations in Infants\u201d<\/li>\r\n \t
                      • Message: \u201cInfant vaccination is available\u201d<\/span><\/li>\r\n \t
                      • Question: \u201cWhat is the state of infant vaccination?\u201d<\/span><\/li>\r\n \t
                      • Fear: \u201cInfants die when not vaccinated\u201d<\/span><\/li>\r\n \t
                      • Hopeful: \u201cInfant vaccination can be increased\u201d<\/span><\/li>\r\n \t
                      • Call: \u201cBe vaccinated not sick\u201d<\/span><\/li>\r\n<\/ul>\r\n

                        Text Content<\/h1>\r\nThese tips come from academic studies, design experts and expert advisors with lived experience:4,6,11,14,15,17,18,25<\/sup>\r\n
                          \r\n \t
                        • The user needs to know, \u201cIs this for me?\u201d.<\/li>\r\n \t
                        • Use headings and subheadings to organize the text and aid logical reading flow.<\/span><\/li>\r\n \t
                        • Avoid large blocks of text. Keep a text block together, don\u2019t wrap it around images, for example. Avoid dense text. Use left-aligned not justified text to prevent complex white spacing.<\/span><\/li>\r\n \t
                        • Put important words first and keep sentences short.17<\/sup> One idea per paragraph. Start the paragraph with a sentence giving the paragraph\u2019s topic.<\/span><\/li>\r\n \t
                        • 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.17<\/sup> Use personal pronouns like \u201cwe\u201d and \u201cyou\u201d.27<\/sup> Avoid acronyms or symbols.<\/span><\/li>\r\n \t
                        • Use the present not past tense, and active not passive voice: \u201cyour doctor is going to _\u201d is better than \u201cDoctors would have_\u201d.17<\/sup><\/span><\/li>\r\n \t
                        • Use realistic examples that the audience can relate to. Use concrete not abstract words and order events temporally.<\/span><\/li>\r\n \t
                        • Arial or Calibri fonts seem to be easy to read, but don\u2019t 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.17<\/sup> Bolded font works better for emphasis than italics or underlining.<\/span><\/li>\r\n \t
                        • Keep bulleted lists short and keep them together not across two pages.<\/span><\/li>\r\n \t
                        • Be consistent in style features like headings and spelling out numbers versus showing regular numbers. Avoid capitalization, hyphens, semicolons and long sentences.<\/span><\/li>\r\n \t
                        • Be cautious about how lay readers might interpret charts and statistics. Think carefully about how to use statistics. Write \u201chalf\u201d instead of \u201c49%\u201d. This is the process of effective \u201cdata visualization\u201d and there is lots published about it.2<\/sup><\/span><\/li>\r\n \t
                        • 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: \u201cHow did you find this information?\u201d.<\/span><\/li>\r\n \t
                        • If tables are used, make them accessible: use informative headers for rows and columns, and a caption or summary to explain the table\u2019s purpose.18<\/sup> Keep tables simple: avoid merged and empty cells, and rotated text.17<\/sup><\/span><\/li>\r\n<\/ul>\r\nPlain 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.27<\/sup><\/span>\r\n
                            \r\n \t
                          • Readability<\/strong> refers to ease of reading and understanding text. You can test readability using Microsoft Word. Select the block of text. Click on \u201cHome\u201d, then \u201cEditor\u201d, then \u201cDocument Stats\u201d. 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<\/sup><\/span><\/li>\r\n \t
                          • Understandability<\/strong> 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<\/span><\/li>\r\n<\/ul>\r\n

                            Imagery Content<\/h1>\r\nGraphics (drawings) and images (photos) aid reader retention when used well.15<\/sup> Here are some tips from the literature: 14,15,23,30<\/sup>\r\n\r\n\u2022 Not all handouts need fancy graphics or images. In fact, there is some limited evidence that some\r\n\r\nDesigning 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\r\n\r\n\u2022 Avoid distracting graphics like unnecessary grid lines or box outlines.\r\n\r\n\u2022 Avoid mixing graphics and images with starkly different colours, contrast and dark\/white space.\r\n\r\n\u2022 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 \u201cphoney\u201d to audiences and are not relatable.\r\n\r\n\u2022 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.\r\n\r\n\u2022 Use inclusive imagery. Avoid inadvertently reinforcing negative stereotypes of ethnicity, age or gender.\r\n\r\n\u2022 The authoring organization\u2019s logo can convey credibility as well as source. 23\r\n\r\nData visualization is the process of picking the right way to image data.\r\n\r\n18\r\n\r\n\u2022 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.\r\n\r\n\u2022 Arcia et al. (2015) provide details about general public preferences for graphics of statistics and other types of health information. 19\r\n\r\n\u2022 Graphics that use curves are preferred over linear ones like standard bar charts. 31\r\n

                            Text and Imagery Used Together<\/h1>\r\nThere 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.32<\/sup> That study has been criticized, but another (Canadian) study had similar findings.5,33<\/sup> Nevertheless, both studies found that readers preferred infographics over text alone.\r\n\r\nHere are tips from the literature for thinking about text and images together:15,25<\/sup>\r\n
                              \r\n \t
                            • Keep together text and images that refer to the same topic.<\/li>\r\n \t
                            • 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.<\/span><\/li>\r\n \t
                            • Repeat the most important points in different ways using text, fonts, callouts, or images.<\/span><\/li>\r\n \t
                            • Don\u2019t wrap a block of text around an image.<\/span><\/li>\r\n \t
                            • Consider how to address varying beliefs held by audience members.<\/span><\/li>\r\n \t
                            • For charts and graphs, label axes, data points and legends clearly with text rather than only colour and shape.18<\/sup><\/span><\/li>\r\n<\/ul>\r\nIf you want some insight into how design experts think of \u201cvisual literacy\u201d in terms of infographics, check out Dunlap and Lowenthal (2016).2<\/sup> They point out that visuals are powerful learning tools and that the overall look is important. To get technical, \u201cEffective visuals apply visual organization and structure to reflect relationships, describe how parts of a whole interact, and\/or reveal an underlying story<\/em>.\u201d\r\n

                              Colour Palette<\/h1>\r\nColours used in fonts, background and images must work together. They can have considerable affective impact, and they influence reader\u2019s 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<\/sup>\r\n
                                \r\n \t
                              • There are many online tools for assisting with infographic colour palette choice, but they might not consider nuances like cultural meanings. \u201cStoplight\u201d colours were found to convey value judgements to some audiences, for example.<\/li>\r\n \t
                              • Experts advise restricting colour rather than over-using it, and restricting the palette to 3-5 colours.11<\/sup><\/span><\/li>\r\n \t
                              • The Piktochart website has a basic primer. 34 Canva can suggest colour palettes.36<\/sup><\/span><\/li>\r\n \t
                              • Don\u2019t rely on colour alone to convey emphasis and meaning.17<\/sup><\/span><\/li>\r\n \t
                              • Consider colour vision impairments, which affect one in twenty people.4<\/sup> 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<\/sup> 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).<\/span><\/li>\r\n<\/ul>\r\n

                                Online Infographics<\/h1>\r\nThere are a number of accessibility design considerations for infographics that will be posted as HTML and even PDF formats.18,36,37<\/sup> Here are a few basic examples but readers should review other sources for more detailed information if they are designing online interactive infographics:\r\n
                                  \r\n \t
                                • Use concise, informative \u201calt text\u201d to convey the meaning of an infographic for readers with vision impairments.<\/li>\r\n \t
                                • 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.<\/span><\/li>\r\n \t
                                • Use HTML elements for tables that include headers, columns, and captions or summaries.<\/span><\/li>\r\n \t
                                • Use \u201csemantic HTML\u201d such as headings that create a hierarchal outline, appropriately using lists and paragraphs.<\/span><\/li>\r\n \t
                                • Provide alternative versions of the infographic for users who cannot access the visual content fully, for example a downloadable table or text-based summary.<\/span><\/li>\r\n \t
                                • Software is available that can test an infographic for use with screen readers that speak content aloud.<\/span><\/li>\r\n<\/ul>\r\n

                                  Ethical, Privacy and Copyright Considerations<\/h1>\r\nWhile 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<\/sup> It is also important to consider privacy issues around use of images and personal stories.10 \u00a0<\/sup>Be cautious about using content like images that might be protected by someone\u2019s copyright, including images generated by artificial intelligence software or online services.\r\n

                                  Cite Sources<\/h1>\r\nIn 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.\r\n

                                  Prototype Development<\/h1>\r\nRefine 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<\/sup> If intending to use a screen reader for HTML or PDF versions, pilot the implementation.\r\n\r\n ","rendered":"

                                  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<\/strong> summarizes basic infographic design considerations, starting with establishing a short list of a priori<\/em> 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.<\/p>\n

                                  Table 2. Infographic design phase considerations.<\/h2>\n

                                  <\/span><\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
                                  Design Considerations<\/th>\n<\/td>\n<\/tr>\n<\/thead>\n
                                  Establish design principles<\/td>\nDevelop design principles with the team and, ideally, end-users. Consider cultural diversity, language and readability. Expect to revisit the list and revise it as you work through the design phase.<\/td>\n<\/tr>\n
                                  Sketch general layout on paper with pen or pencil<\/td>\nOne page or two? For printing on paper or electronic distribution or both? Whole pages, folding brochure or poster? Paper sizes vary across countries and for different printing purposes. Consider whether the infographic will be viewed on cellphones. Considering the storyline, draw boundaries for text blocks, images, and white spaces. Consider the balance and alignment of those blocks. The flow of those blocks helps to tell the story. Do not add any text or imagery at this point. <\/td>\n<\/tr>\n
                                  Chose the title<\/td>\nChose a compelling title that attracts readers and sustains their attention.<\/td>\n<\/tr>\n
                                  Choose fonts<\/td>\nConsider font type, size and justification.<\/td>\n<\/tr>\n
                                  Choose colour palette<\/td>\nPick limited complementary colours appropriate for the topic and audience.<\/td>\n<\/tr>\n
                                  Add text and graphics\/images<\/td>\nConsult the guidelines you established to choose text and graphics\/images to tell the story.<\/td>\n<\/tr>\n
                                  Ethical, privacy and copyright considerations<\/td>\nBrevity risks insufficient information, misinterpretation, misinformation and bias. Be careful about privacy issues using real people\u2019s stories. Watch out for copyright if using others' content.<\/td>\n<\/tr>\n
                                  Cite sources<\/td>\nTell the reader about the evidence base for the information in the infographic. Add institution logo if appropriate.<\/td>\n<\/tr>\n
                                  Draft prototype<\/td>\nChose design software (Chapter 3): set document parameters for size and resolution appropriate for the planned distribution medium. Add content: consider readability, understandability and actionability. Balance text, imagery and white space appropriately for audience and topic.<\/td>\n<\/tr>\n
                                  Evaluate prototype<\/td>\nTest the prototype with the development team, end-user informants and content expert reviewers.<\/td>\n<\/tr>\n
                                  Revise design<\/td>\nRevise the layout, imagery, text and colours based on feedback from the team and reviewers.<\/td>\n<\/tr>\n
                                  Finalize design<\/td>\nFreeze the design.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

                                  <\/p>\n

                                  Basic Elements of an Infographic<\/h1>\n

                                  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:4<\/sup><\/p>\n

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

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

                                      \n
                                    • Content<\/strong> 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.<\/span><\/li>\n
                                    • Visual design<\/strong> requires understanding \u201cvisual literacy\u201d, 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<\/span><\/li>\n<\/ul>\n

                                      Accessibility<\/h1>\n

                                      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<\/sup><\/p>\n

                                      First Step: List Design Principles<\/h1>\n

                                      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:<\/p>\n

                                        \n
                                      • State your objective with intended outcomes.<\/li>\n
                                      • Summarize your intended audience\u2019s persona.<\/span><\/li>\n
                                      • Identify accessibility requirements.<\/span><\/li>\n
                                      • Describe the type of content you will use; focus on your objective, the evidence base, and your audience.<\/span><\/li>\n
                                      • 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.<\/span><\/li>\n<\/ul>\n

                                        Keep in mind differences and overlaps between the organization\u2019s goals (what you want to achieve with the infographic) and the audience\u2019s goals (what your audience wants from the infographic).<\/p>\n

                                        In addition to the overall storyline for the infographic, patient\u2019s own stories can help readers to make sense of the information and understand why the infographic\u2019s story is important to them.23<\/sup><\/p>\n

                                        Clarify the Storyline<\/h1>\n

                                        \u201cDesign is an opportunity to continue telling the story, not just to sum everything up<\/em>\u201d (Tate Linden)2<\/sup><\/p>\n

                                        Good infographics tell a story that makes sense to the user.<\/p>\n

                                          \n
                                        • Infographics are very short stories,<\/strong> not novels.<\/li>\n
                                        • A story<\/strong> 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.<\/li>\n
                                        • The plot<\/strong> 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.<\/span><\/li>\n
                                        • The storyline<\/strong> 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.<\/span><\/li>\n<\/ul>\n

                                          Sketch the Layout before Adding Content<\/h1>\n

                                          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<\/strong> going to the computer or adding any content and there seems to be consensus on this approach.24<\/sup> Stones and Gent (2015) and Kibar et al. (2017) show examples of the process:11,22<\/sup><\/p>\n

                                            \n
                                          • Find some examples of infographics similar to yours in terms of content, intent or audience.<\/li>\n
                                          • 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.11<\/sup><\/span><\/li>\n
                                          • A good infographic tells a story.15<\/sup> 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.<\/span><\/li>\n
                                          • 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.25<\/sup> 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.14<\/sup> 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.<\/span><\/li>\n
                                          • Use white space carefully. Place white space around blocks of text and graphics to highlight main storyline points. Don\u2019t make text blocks too narrow or too wide.<\/span><\/li>\n
                                          • 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.<\/span>26<\/sup><\/li>\n<\/ul>\n

                                            One author suggests this:26<\/sup><\/p>\n

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

                                                Here is another way:23<\/sup><\/p>\n

                                                  \n
                                                • Get right to the point:<\/strong>\n
                                                    \n
                                                  • Answer \u201cIs this information for me?\u201d<\/span><\/li>\n
                                                  • Answer \u201cWhat did you find out?\u201d<\/span><\/li>\n
                                                  • Answer \u201cHow did you find this information, where did it come from?\u201d<\/span><\/li>\n
                                                  • Answer \u201cWhat should I do next?\u201d<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

                                                    Choose the Title<\/h1>\n

                                                    Readers decide in a few seconds whether to read an infographic.15<\/sup><\/p>\n

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

                                                      Stones and Gent (2015) pointed out different approaches to titles:11<\/sup><\/p>\n

                                                        \n
                                                      • Subject: \u201cVaccinations in Infants\u201d<\/li>\n
                                                      • Message: \u201cInfant vaccination is available\u201d<\/span><\/li>\n
                                                      • Question: \u201cWhat is the state of infant vaccination?\u201d<\/span><\/li>\n
                                                      • Fear: \u201cInfants die when not vaccinated\u201d<\/span><\/li>\n
                                                      • Hopeful: \u201cInfant vaccination can be increased\u201d<\/span><\/li>\n
                                                      • Call: \u201cBe vaccinated not sick\u201d<\/span><\/li>\n<\/ul>\n

                                                        Text Content<\/h1>\n

                                                        These tips come from academic studies, design experts and expert advisors with lived experience:4,6,11,14,15,17,18,25<\/sup><\/p>\n

                                                          \n
                                                        • The user needs to know, \u201cIs this for me?\u201d.<\/li>\n
                                                        • Use headings and subheadings to organize the text and aid logical reading flow.<\/span><\/li>\n
                                                        • Avoid large blocks of text. Keep a text block together, don\u2019t wrap it around images, for example. Avoid dense text. Use left-aligned not justified text to prevent complex white spacing.<\/span><\/li>\n
                                                        • Put important words first and keep sentences short.17<\/sup> One idea per paragraph. Start the paragraph with a sentence giving the paragraph\u2019s topic.<\/span><\/li>\n
                                                        • 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.17<\/sup> Use personal pronouns like \u201cwe\u201d and \u201cyou\u201d.27<\/sup> Avoid acronyms or symbols.<\/span><\/li>\n
                                                        • Use the present not past tense, and active not passive voice: \u201cyour doctor is going to _\u201d is better than \u201cDoctors would have_\u201d.17<\/sup><\/span><\/li>\n
                                                        • Use realistic examples that the audience can relate to. Use concrete not abstract words and order events temporally.<\/span><\/li>\n
                                                        • Arial or Calibri fonts seem to be easy to read, but don\u2019t 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.17<\/sup> Bolded font works better for emphasis than italics or underlining.<\/span><\/li>\n
                                                        • Keep bulleted lists short and keep them together not across two pages.<\/span><\/li>\n
                                                        • Be consistent in style features like headings and spelling out numbers versus showing regular numbers. Avoid capitalization, hyphens, semicolons and long sentences.<\/span><\/li>\n
                                                        • Be cautious about how lay readers might interpret charts and statistics. Think carefully about how to use statistics. Write \u201chalf\u201d instead of \u201c49%\u201d. This is the process of effective \u201cdata visualization\u201d and there is lots published about it.2<\/sup><\/span><\/li>\n
                                                        • 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: \u201cHow did you find this information?\u201d.<\/span><\/li>\n
                                                        • If tables are used, make them accessible: use informative headers for rows and columns, and a caption or summary to explain the table\u2019s purpose.18<\/sup> Keep tables simple: avoid merged and empty cells, and rotated text.17<\/sup><\/span><\/li>\n<\/ul>\n

                                                          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.27<\/sup><\/span><\/p>\n

                                                            \n
                                                          • Readability<\/strong> refers to ease of reading and understanding text. You can test readability using Microsoft Word. Select the block of text. Click on \u201cHome\u201d, then \u201cEditor\u201d, then \u201cDocument Stats\u201d. 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<\/sup><\/span><\/li>\n
                                                          • Understandability<\/strong> 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<\/span><\/li>\n<\/ul>\n

                                                            Imagery Content<\/h1>\n

                                                            Graphics (drawings) and images (photos) aid reader retention when used well.15<\/sup> Here are some tips from the literature: 14,15,23,30<\/sup><\/p>\n

                                                            \u2022 Not all handouts need fancy graphics or images. In fact, there is some limited evidence that some<\/p>\n

                                                            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<\/p>\n

                                                            \u2022 Avoid distracting graphics like unnecessary grid lines or box outlines.<\/p>\n

                                                            \u2022 Avoid mixing graphics and images with starkly different colours, contrast and dark\/white space.<\/p>\n

                                                            \u2022 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 \u201cphoney\u201d to audiences and are not relatable.<\/p>\n

                                                            \u2022 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.<\/p>\n

                                                            \u2022 Use inclusive imagery. Avoid inadvertently reinforcing negative stereotypes of ethnicity, age or gender.<\/p>\n

                                                            \u2022 The authoring organization\u2019s logo can convey credibility as well as source. 23<\/p>\n

                                                            Data visualization is the process of picking the right way to image data.<\/p>\n

                                                            18<\/p>\n

                                                            \u2022 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.<\/p>\n

                                                            \u2022 Arcia et al. (2015) provide details about general public preferences for graphics of statistics and other types of health information. 19<\/p>\n

                                                            \u2022 Graphics that use curves are preferred over linear ones like standard bar charts. 31<\/p>\n

                                                            Text and Imagery Used Together<\/h1>\n

                                                            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.32<\/sup> That study has been criticized, but another (Canadian) study had similar findings.5,33<\/sup> Nevertheless, both studies found that readers preferred infographics over text alone.<\/p>\n

                                                            Here are tips from the literature for thinking about text and images together:15,25<\/sup><\/p>\n

                                                              \n
                                                            • Keep together text and images that refer to the same topic.<\/li>\n
                                                            • 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.<\/span><\/li>\n
                                                            • Repeat the most important points in different ways using text, fonts, callouts, or images.<\/span><\/li>\n
                                                            • Don\u2019t wrap a block of text around an image.<\/span><\/li>\n
                                                            • Consider how to address varying beliefs held by audience members.<\/span><\/li>\n
                                                            • For charts and graphs, label axes, data points and legends clearly with text rather than only colour and shape.18<\/sup><\/span><\/li>\n<\/ul>\n

                                                              If you want some insight into how design experts think of \u201cvisual literacy\u201d in terms of infographics, check out Dunlap and Lowenthal (2016).2<\/sup> They point out that visuals are powerful learning tools and that the overall look is important. To get technical, \u201cEffective visuals apply visual organization and structure to reflect relationships, describe how parts of a whole interact, and\/or reveal an underlying story<\/em>.\u201d<\/p>\n

                                                              Colour Palette<\/h1>\n

                                                              Colours used in fonts, background and images must work together. They can have considerable affective impact, and they influence reader\u2019s 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<\/sup><\/p>\n

                                                                \n
                                                              • There are many online tools for assisting with infographic colour palette choice, but they might not consider nuances like cultural meanings. \u201cStoplight\u201d colours were found to convey value judgements to some audiences, for example.<\/li>\n
                                                              • Experts advise restricting colour rather than over-using it, and restricting the palette to 3-5 colours.11<\/sup><\/span><\/li>\n
                                                              • The Piktochart website has a basic primer. 34 Canva can suggest colour palettes.36<\/sup><\/span><\/li>\n
                                                              • Don\u2019t rely on colour alone to convey emphasis and meaning.17<\/sup><\/span><\/li>\n
                                                              • Consider colour vision impairments, which affect one in twenty people.4<\/sup> 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<\/sup> 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).<\/span><\/li>\n<\/ul>\n

                                                                Online Infographics<\/h1>\n

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

                                                                  \n
                                                                • Use concise, informative \u201calt text\u201d to convey the meaning of an infographic for readers with vision impairments.<\/li>\n
                                                                • 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.<\/span><\/li>\n
                                                                • Use HTML elements for tables that include headers, columns, and captions or summaries.<\/span><\/li>\n
                                                                • Use \u201csemantic HTML\u201d such as headings that create a hierarchal outline, appropriately using lists and paragraphs.<\/span><\/li>\n
                                                                • Provide alternative versions of the infographic for users who cannot access the visual content fully, for example a downloadable table or text-based summary.<\/span><\/li>\n
                                                                • Software is available that can test an infographic for use with screen readers that speak content aloud.<\/span><\/li>\n<\/ul>\n

                                                                  Ethical, Privacy and Copyright Considerations<\/h1>\n

                                                                  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<\/sup> It is also important to consider privacy issues around use of images and personal stories.10 \u00a0<\/sup>Be cautious about using content like images that might be protected by someone\u2019s copyright, including images generated by artificial intelligence software or online services.<\/p>\n

                                                                  Cite Sources<\/h1>\n

                                                                  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.<\/p>\n

                                                                  Prototype Development<\/h1>\n

                                                                  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<\/sup> If intending to use a screen reader for HTML or PDF versions, pilot the implementation.<\/p>\n

                                                                   <\/p>\n","protected":false},"author":132,"menu_order":3,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-363","chapter","type-chapter","status-publish","hentry"],"part":3,"_links":{"self":[{"href":"https:\/\/pressbooks.library.upei.ca\/infographicsmanual\/wp-json\/pressbooks\/v2\/chapters\/363","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.upei.ca\/infographicsmanual\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.upei.ca\/infographicsmanual\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.upei.ca\/infographicsmanual\/wp-json\/wp\/v2\/users\/132"}],"version-history":[{"count":23,"href":"https:\/\/pressbooks.library.upei.ca\/infographicsmanual\/wp-json\/pressbooks\/v2\/chapters\/363\/revisions"}],"predecessor-version":[{"id":428,"href":"https:\/\/pressbooks.library.upei.ca\/infographicsmanual\/wp-json\/pressbooks\/v2\/chapters\/363\/revisions\/428"}],"part":[{"href":"https:\/\/pressbooks.library.upei.ca\/infographicsmanual\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/pressbooks.library.upei.ca\/infographicsmanual\/wp-json\/pressbooks\/v2\/chapters\/363\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.upei.ca\/infographicsmanual\/wp-json\/wp\/v2\/media?parent=363"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.upei.ca\/infographicsmanual\/wp-json\/pressbooks\/v2\/chapter-type?post=363"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.upei.ca\/infographicsmanual\/wp-json\/wp\/v2\/contributor?post=363"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.upei.ca\/infographicsmanual\/wp-json\/wp\/v2\/license?post=363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}