A Guide To Interactive Infographics

Infographics are great for helping users digest information much more quickly and efficiently. But what if there is much more content? Or if the subject matter requires information to be personalised for the user? This is where interactive infographics come in. I’ll explain how a more reactive infographic can not only help convey information better but also make the reader feel more personally involved.

Reasons you might want to use an interactive infographic:

1. You have reams of content and information that it would be too difficult to visualise in the limited space that a traditional static infographic provides.

2. The content you are visualising could benefit from being customised by the user. Can they find out specific info from where they are? Could they input some basic data to find out how the topic may affect them directly?

3. There is a specific narrative to the content. The user can reveal or add layers to the information they are receiving.

4. The ability to have increased user feedback and prompting towards key information.

5. Better incorporation into websites and other media.

I’ll go into more detail on how to best use interactive infographics (with plenty of examples!).

Display More Content, More Effectively

There’s something quite daunting about screen-stretching content. Despite users becoming increasingly comfortable with vertical scrolling on the web, interactive infographics are a great way to condense information down into a more concise experience, allowing them to cherry-pick the data that they want to see, or learn about, in more detail.

Expanding Sections hiding and revealing content is the simplest way to do this. In this example, content is hidden behind icons and photography. All the content is quickly and easily revealed, but without cluttering the page and complicating the graphic. This interactive infographic also paginates nicely to reduce the overall clutter.


01-Blog-illustration
Interactive Graphs and Data Visualisation

This example from the BBC allows the user to interact with the timeline and therefore choose the information they’d like to view. This has the double benefit of keeping the user interested and also conveying more information.

02-blog-illustration

Customisable Content

Some information comes across better with a personal twist. Users are more likely to be interested in how a subject or set of data will affect them directly, so the ability to do this within an interactive infographic can be very useful.

Personalisation and Inputted Data

In the interactive infographic we created for Flexible Dieting, the user is able to input their own personal stats, allowing them to have instant feedback on how they can get started themselves. This increased connection not only improves the users receptiveness at the time, it can also lead to them revisiting the interactive infographic as their situations change.

03-blog-illustration

In another example, users can reveal statistics from anywhere on the globe, which helps if they’re interested in a particular area.

Creating Narratives

A good infographic should tell a story and cleverly guide the user through the information in a relatively linear and well thought out way. Interactive infographics are particularly useful for this.

This interactive infographic covering the history of Social Media, uses a timeline, which when hovered over reveals information relating to each year. Pretty simple stuff, but very useful to get the point across.

04-blog-illustration

Another infographic showcasing how design trends have changed throughout the decades makes full use of the additional space that interactivity allows. Full screen images that transition beautifully allow each decade to be quickly and easily recognised,  whilst simultaneously displaying the narrative of changing styles.

05-blog-illustration

Visual feedback

Giving the user haptic feedback can be a great way to get them to feel involved in the content. This can be particularly useful to draw them towards key points within the graphic and things like calls-to-action etc.

Better Incorporation into other Media

Interactive infographics are much more easily incorporated into the flow of a webpage or article. Given their, generally, smaller, less scroll intensive nature they can be quite easily worked into an article, and therefore relate to specific content therein. The BBC makes great use of this and often uses them within introductions to a topic, to set the scene and immerse the user.

Updateability

Given their coded nature, rather than just being pixels (like a traditional graphic), designers, or even content managers, can ensure that facts are always accurate, which can be the perfect way to keep the graphic relevant. This can be particularly useful in an ever-changing industry. One interactive infographic that makes great use of this feature is Messi vs Ronaldo. All the statistics are kept up-to-date and this is especially beneficial for the site, as increased traffic comes to the site when certain events are held or records are broken. This means the infographic remains sharable at all times.

06-blog-illustration

Conclusion

Interactive infographics are a great alternative to a classic infographic. Their main advantage is their optimisation for web, allowing them to be incorporated into articles and other formats without disrupting the overall readability or look and feel of the rest of the page. They can also be a lot more interesting for users, especially when the designer works to bring personalised content to the user in the form of maps, user inputs and customisable statistics.

These type of infographics are becoming popular but still remain relatively rare, which makes them the perfect format to bring interest to a particular subject. They are highly sharable and their potential for personalised interaction and ability to always remain up-to-date means they can remain relevant and in the public eye.

 

Liked this? Sign up and become a follower of Views - the go-to destination for breaking news, insights and everything VISU.AL