Infographics communicate information to users that might otherwise be overly complex and monotonous were said information presented in written form. Breaking up and presenting information through infographics can aid in immediate comprehension as well as long-term retention of information. Infographics are helpful because they capitalize on the visual-learning nature of users.
What is an infographic?
An infographic is a visual representation of information that is broken up in an easily digestible way. Infographics condense written information that decreases the user’s cognitive load, which is the amount of information a user needs to take in and comprehend while performing a task. Infographics can be used to communicate processes, statistical data, geographic distribution, timelines, informational lists, and make comparisons.
Components of an effective infographic
Tell a story
The first step in designing an infographic is understanding your information or data set and deciding what message you’re trying to communicate to your audience. Are you making a comparison? Walking through a process? Is there a specific statistic you will call attention to? How much contextual information do you need and what can be left out? What is the bottom line or the key takeaway you want the user to leave with?
The answers to the above questions will dictate the format of the infographic to organize and streamline the information. For example, if you’re showing a process, a linear layout like the example below makes the steps clear, concise, and easy to follow.
Also note the use of varying colors as you go through the steps. This technique chunks together the steps and information (which I will cover later in this article) as well as represents the coffee turning darker through the process, creating some visual interest and tying color to the subject matter.
Alternatively, if you’re communicating the benefits of a process, product or service, use an infographic with a more central focus, having information coming from the central source. Your users’ attention will go to the headline, then the central image (the most prominent part of the design), then to the benefits listed on each side.
Make sure you’re setting the correct tone through color and imagery that supports your story. For example, if you’re trying to educate a user on a subject like “the number of dogs that are adopted each year”, you should use light colors that convey happiness and positivity. Conversely, dark, heavy colors communicate a negative tone more suitable for a topic like “the number of dogs that end up at the shelter every year”.
If you have an established brand, you will need to consider what colors in your brand’s color palette work for the message you’re portraying and how they work within your branded collateral.
Support the message with simple visuals
An essential way to communicate information is to support your message with visuals that are specific to your content. Some examples of visuals you can use in infographics are charts, graphs and iconography.
Anticipate your user’s level of understanding. Don’t rely solely on an icon if its representation isn’t clear, or if its meaning might translate differently to different audiences. Use supporting text next to icons as needed.
Make sure you consider context. For example, the shape of a state is easier to understand when in context to the rest of a map. If you must separate a state shape from its geographical context, consider including a label for the state.
Best state to live in stats: https://worldpopulationreview.com/state-rankings/best-states-to-live-in
Use visual cues to help guide users through the story. For example, arrows can help guide the user through a process infographic.
When you include visuals, use the same style of visuals throughout your infographic. If you use fine-line icons, use them throughout while pairing them with a lighter-weight typeface that matches the stroke weight of the icons. If you use multi-tone icons, make sure you incorporate the same colors throughout the design to tie it all together. Below are just a few examples of common styles of icons.
Only use copy when necessary
As stated earlier, users are visual learners, so cut down copy to only what is necessary. Support your copy with visuals to help users understand the information quickly and recall it more easily long-term.
Use visual hierarchy to chunk information
Visual hierarchy is a key aspect of infographic design. Use design principles like size, placement, font weight, and color to guide users through the story. Highlight the most important information, and organize or group information and sections together.
If your infographic has multiple sections, clearly start each section with a header that is short and concise. If you display a linear process, number each step so the user can easily follow along.
Use a grid to lay out the visuals and make the content feel like everything is purposefully placed and correctly aligned. Grids are extremely useful when you have a complex infographic with a ton of data, and help the user easily scan and anticipate how the next section will be laid out. Users can then better focus on the information instead of learning how to read a different layout every time. This is an example of good design being invisible and adding to the user experience.
Using negative space (the space between sections and elements) can help group together information, and make it easier to see what information belongs together. Elements that are too close together can overwhelm and confuse the user.
You can also use different fonts to break up sections. Use a bolder font for headlines, and a regular-weight font for content or numbers to break up the information into sections. It’s important that you use a font that is simple to read and adds to the tone of the story you wish to convey. It’s not recommended to use a decorative or script font for body copy or small numbers in a chart, as they don’t typically scale well and can become illegible when too small.
Chart Junk (Unnecessary Information)
While infographics have many benefits for communicating, processing, and storing information, they can also be misused, leading to unintentional confusion. When creating infographics, you want to stick to only the information that is necessary to communicate your message and tell the story. Adding in unnecessary graphics or elements or having a lack of visual hierarchy can distract, confuse, and disorient the user.
Summary
Use infographics when necessary to communicate complex information to help your user learn and retain important information. Consider the story you wish to tell or what key message you want to portray and make sure that is made clear through the execution of your design.