Skip to content

Infographics: Visual hierarchy

“Viewers should never have to guess at what to look at next. And in the case of interactive infographics, they should have clear instructions about where to click and what to do.

Justin Beegel, Infographics for Dummies

When designing, an important task is to create a hierarchy – having an order of importance for the elements of your infographic. This directs viewers' attention and makes your information flow.      


Applying the principles of hierarchy

Think about information in three levels based on how important they are to your central message. More levels than three can confuse your message. You can use font, position, and scale to emphasise these levels.

Consistently use three font formats, one for each level. Generally, the most effective strategy is to keep the actual font the same but vary the size, colour, or formatting.

The three different levels have different roles:

Attract-Interest-Deliver a messageLevel 1: Headings – Attract attention

Level 2: Subheadings – Create interest

Level 3: Body text - Deliver a message


This is clearly demonstrated on the example below:

Example showing the Attract-Interest-Deliver stages. Image came from wikimedia commons.


Grouping information (Chunking)

Grouping related points into sections helps to keep your infographic clear and maintains hierarchies. You can use objects such as boxes, arrows, timelines, and lists to define the sections and indicate the order they should be read in. Be careful not to create something with too many elements in close proximity to one another, as this may make it overwhelming for viewers. 

Try creating an organic hierarchy, making it clear what order information should be read in.

Follow this link - Foodborne illnesses infographic - to see an example of an infographic with good use of chunking—notice the subtle use of boxes to group things together whilst still maintaining a sense of unity and balance.

This link will take you to an in depth analysis to visual hierarchy within design: Canva - The ultimate guide to visual hierarchy

 

Analysing a professional infographic

An example infographic with clear hierarchy

Analysis

This is essentially four infographics in one with the first section introducing the overall theme.

The principle of hierarchy has been used to order the sections and create a logical flow of information.

Each of the lower sections has their own title, text, and emphasis fonts. These are repeated to give a sense of unity throughout.

The start of each section is indicated with the larger, green title text.

Only the graphics in section 4 have boxes which stops the rest of the infographic becoming clunky and cluttered.

Notice how the boxed material draws the eye – make sure you use this for important stuff!