Interactive: The New Wave of Infographics

Infographics (or information graphics) are everywhere these days. Intended to deliver large amounts of information in a visual format, the key to a ‘good’ infographic is the story it tells. From a user’s perspective, the value from an infographic comes from the information it contains and the way in which it’s presented. People should feel a little smarter after reading through an infographic, or at least have some cool trivia to drop into conversations.

Interactive: The New Wave of Infographics
Image credit: How Many Households Are Like Yours?

Organisations use infographics for a variety of reasons - building brand awareness, PR and gaining links back to their site, which can have a positive impact on their Google rankings.

The State of Infographics Today

Currently infographics are popping up every day across the Internet and are being produced by individuals, companies and online agencies of various sizes. Today’s infographics are portraying stories about literally every aspect of modern day life from average flight times around Thanksgiving to unlocking the mysteries of humpback whale migration patterns!

At present, most infographics are flat images which webmasters encourage people to embed on their websites via a little embed code, or share with other web users across social network sites like Facebook, Twitter and Google+.

The quality of the infographics, which are currently being produced, varies greatly depending on the quality of the data used to create the graphic and the overall design quality of the final product. Not to mention the ability to show a good story, and add relevant contextual information.

What is Coming Next?

As is the case with any new technique on the Internet, saturation is a problem and since the initial conception of infographics as a marketing exercise, the number of newly created graphics has risen dramatically!

A new wave of interactive infographics is appearing on the horizon, some of which utilise HTML5 properties and experimental CSS3. These offer a richer user experience and can be more beneficial to site owners as they are more likely to grab the attention of users than flat image graphics.

The motion aspects of these graphics will help them to stand out from image alternatives and can even feature live data and require user interaction via the use of jQuery or programming languages piping data in.

Examples of New Trends

Currently there aren’t many interactive infographics utilising HTML5 around, but some creative examples have started to pop up!

How Music Travels Infographic
Thomson Holidays have produced a couple of interactive infographics, the first of which has had a fair bit of exposure around the web. It’s an interactive/moving timeline which shows how popular music has travelled around the world over time. It maps different locations in the world which are synonymous with different genres of music.

How Music Travels Infographic

Where should I go on Holiday Infographic
The next example is a SVG (scalable vector graphic) map which allows users to find the best holiday spots to get some sun depending on the time of the year. The map shows average weather information for lots of destinations by month of the year.

Where Should I Go on Holiday Infographic

Dribbble HTML5 Infographic
This HTML5 graphic was designed by Jamie Brightmore and shows who is using Dribble (a popular design community website) and what they are using it for. The graphic makes use of traditional pie and globe charts but uses experimental CSS3 to display the information with a little user interaction thrown into the mix!

Dribbble HTML5 Infographic

Rainforest Deforestation HTML5 Infographic
The following information graphic designed by Jonathan Krause highlights the rapid rainforest deforestation which is occurring across the globe and gives some insights into why deforestation is occurring. This graphic is also created using web technologies like HTML5 and CSS3 which has been utilised for creating animated pie and percentage charts which give the graphic a slick look and feel.

Rainforest Deforestation HTML5 Infographic

Calorie Consumption HTML5 Infographic
This HTML5 infographic uses a map twinned with a bar chart to show which countries across the globe consume the most food compared to their income spent on food! The infographic makes use of CSS3 and jQuery to show the information selected by the user and uses hovers and shading to illustrate which data is currently being viewed.

Calorie Consumption HTML5 Infographic

The Future of Infographics

In the future more infographics are likely to utilise cutting edge web technologies such as HTML5, CSS3 and even sprinklings of jQuery as they will become more commonplace and appeal more to users and encourage higher rates of interaction and social sharing than flat images due to dynamic aspects, which will appeal to users.

The bar to entry is higher when producing interactive infographics as they tend to require more development, time to produce the back end code and also to build data sets, all with the end goal of telling an interesting story.

Moving forward, we will hopefully see more examples of engaging infographics, which have unique stories to tell, and shinier web technologies.

Opinions expressed in this article are those of the author and not necessarily those of Onextrapixel.