Here we discuss what animated infographics are and show some excellent examples of how they are used.

 

Infographics have become extremely popular, but they are not a new concept. The term simply means a visual presentation of information, such as a chart or graph, where the reliance on text is minimal. Recently the term is more often used to describe a collection of charts, graphs, data and illustration. They regularly use a long form layout which lends itself to being shared on Pinterest or scrolled on a webpage. They can be a great tool to powerfully convey information and their sharable nature can be excellent for SEO.

 

Examples of static infographics on Pinterest

 

Going a step further, animated and interactive infographics can be an even more engaging way to present data.

They can include animated charts and graphics. Illustrations can move and come to life, and transitions between sections can include effects like wipes and colour changes. The best animated infographics go beyond simply ‘prettifying’ the content – they break it down and make it easier to understand. One technique that works well is to sequentially provide information in bite sized chunks, providing interpretation of data where required. This can help users understand a complex topic more easily than a long text narrative or a complex static diagram. They can also be interactive, for example the user could click to cycle through a range of examples or to adjust a key variable to see how it affects the data in a chart.

Animated infographics can use many of the techniques found in animated video pieces. The main differences are that videos play at a set speed, and are a set aspect ratio. Animated infographics are controlled by the speed the user scrolls, and can be designed so that they fill the users screen, regardless of aspect ratio.

Now is the time for online animated infographics. Browser support for modern technologies like HTML5 and SVG combined with increases in user internet speed make them possible without irritating loading screens.

I will present several strong online infographics that make use of animation or interactivity. Here I will focus on examples with an illustrative or graphic design focus. You might also be interested in my article on the related field of digital data visualisation.

Parallax infographics

Goldman Sachs have produced an interactive infographic to present a Data Story of the Millennial Generation. It is a compelling piece that is playful and sharable. It highlights Goldman Sachs understanding of the Millennial Generation’s priorities and behaviours. It is an effective marketing piece that would encourage businesses interested in this market to partner with them.

Ferrari InfoSeason provides an animated overview of how the Formula 1 racing season progressed. Like the first example, the animation is controlled by vertical scrolling.

 

Ferrari InfoSeason

 

Input driven infographics

Being able to use dynamic data is an area where animated infographics stand apart from static designs. You Vs John Paulson uses your salary as a starting point to emphasise the wealth of the super-rich. I like its strong typographic design.

The BBC’s Will a robot take your job asks for your job title to show your automation risk; the graphics and graphs are customised based on your response.

 

You Vs John Paulson

 

Animated Gif infographics

The GIF image format can be used to create looping animated infographics. Cheetah: Nature’s Speed Machine includes a great running animation. How to build a human is a mesmerising animation of embryo and fetus development.

 

 

Cheetah: Nature’s Speed Machine

 

Parallax annual reports

Animation can help to add interest to content that might otherwise be dry. Before Ustream was acquired by IBM they produced this fantastic annual report that still seems fresh today. Home depot also use graphics and animation to add life and character to their annual report.

Ustream Annual Report