InfographicHow to

8 pro tips for creating interactive infographics

The future of data visualization lies in interactivity. Luke Clum explains how to create a truly stunning interactive infographic.

Infographics are everywhere on the web right now, and they're increasingly interactive. Luke Clum offers 10 pro tips for creating an interactive infographic - read on to find out how you can create a design that truly engages with its audience...

01. Understand the psychology

This infographic explains why infographics work

Before you start to make your interactive infographic, it's worth considering why you're making it interactive.

As the brilliant infographic Why Your Brain Craves Infographics explains, people are visually wired. We're all far more likely to be willing to read, understand, and remember a presentation that includes engaging visuals. But while visuals are arguably the most essential learning tool, they can only go so far.

There is also the vital component of kinetic learning, by which people are better able to retain information through a physical activity. So it makes a lot of sense that adding interactivity to the already potent field of data visualization should make an infographic even more memorable and effective.

This combination of visual and kinetic approaches is what makes interactive infographics the data visualizations of the future. Of course, some infographic topics simply don't encourage the use of any interactive elements. But many others are vastly improved by the addition. Interactivity can help to make sense of the information, give control to the user, and capture the imagination in ways that a static graphic simply can't.

02. Add spice with scrolling effects

One of the most popular types of interactivity requires just a little scrolling from its user participants, which usually triggers animations and transitions. It creates somewhat the same need for completion as a Jack-in-the-box; users feel compelled to finish what they've started.

It's a great technique for drawing viewers into a story and making them feel more engaged without overtaxing any limits of interest. The handwashing infographic above uses both subtle and flashy animations to make the journey through a rather dry topic as fun as possible.

Scrolling can also be used in really simple ways, with simple narratives. For example take a look at this iPod capacity visualization. The content is incredibly basic, but scrolling factor does an excellent job of communicating the point.

03. Multipaginate for easy digestion

Your Daily Dose of Water has users click through pages rather than scroll, and shows how some concepts work better with this multi-page approach.

Elements on each page are interactive beyond the simple movement between topics, so clicking onto a new page more fully ensures that the user has time to digest one portion before moving on to the next.

04. Let users highlight certain areas

Some of the best infographics are the ones that take an unwieldy amount of data and distill it down into a single manageable graphic. But these visualizations often still take some patience and perseverance to understand. Interactive highlighting of different portions of these graphics help to minimize initial confusion, which is essential for attracting and retaining the average easily-distracted web user.

The infographic about IRS tax returns shown above, How Much Goes Unclaimed Every Year, could have displayed the number of individuals and amounts of unclaimed money per state in one large chart, but featuring each one individually makes it much less confusing.

Occupational Outlook (above) which displays percentages of job openings by both occupation and education level, has a similar presentation. But this infographic includes so much information that it was necessarily split into several different pages.

However, the rollover functionality is the same across all pages, which makes the information feel like it's all of a piece. If you don't have the time or resources to build something quite as robust, you can often supplement with a few well placed animations.

In a much more simple way, this business guide to intangible assets utilizes scrolling animations to add pizazz to its otherwise mundane charts and graphs - helping to keep the user's attention throughout the page.

05. Make clicks/rollovers reveal further detail

Another great way to get users to actively participate in the infographic experience is to have clicks or rollovers that offer more information. Not only does this encourage the user's sense of curiosity and exploration, it also allows them to skip over minor topics that are not of interest to them, without discouraging them from continuing on with the rest of the infographic.

Beneath the Thinking Cap, uses intriguingly labeled icons (like "Einstein's Wide Load") to encourage users to read the factoids associated with each area of the brain. On the more complex end of examples is the SimpliSafe guide to home security (shown above). There's a lot more than just clickable links in this journey through the different layers of home defense, but their inclusion makes for a richer learning experience.

06. User participation is compelling

You vs John Paulson shows an example of the type of infographic that populates its information based on the user's particular data entries. By entering your annual salary, you get a comparison with the amount of money that foreign trader John Paulson makes in a matter of minutes (along with a few other examples, just to drive to point home).

Because this type of interactivity only works for a minority of topics, it's less common than the others on this list. However, it's probably also the most compelling, not only because it invites the most user participation, but also because it uses personalized information.

Where Does My Tweet Go? (above) is a slightly less conventional example of the technique, in that it's an app that measures how far any user's tweets reach through the Twittersphere. An even more extreme example of how tailoring infographics makes them infinitely more appealing, this information is so captivating that it has expanded beyond the usual confines of a microsite.

07. Check out these tutorials

The rise in interactive infographics has correlated with a similar upsurge in animation and transition tools and guides, both of which make the process of creating the most complex effects surprisingly manageable.

This site is helpful for anyone looking to get an overview on CSS transforms, transitions, animations, and filters. It offers detailed tutorials on all these topics, and is a great place to start for a thorough technical overview.

08. Try these cool transitions

This site demonstrates various popular transitions that can be achieved between pages, which can be very useful for inspiration as well as information.

09. Make use of these handy tools

Lastly, D3.js is a JavaScript library that allows you to transform and animate data in any number of ways, using HTML, CSS, and SVG. With it you can create the collapsing graphs or spinning data points that are one of the key features of most interactive infographics. With all these resources freely available, the reasons for making a traditional static infographic are becoming less and less viable.

10. Further reading

Words: Luke Clum

Luke Clum is a designer and web developer from Seattle. Follow him on Twitter at @lukeclum.

Liked this? Read these!

Have you seen a great example of an interactive infographic? Let us know about it in the comments below!

Subscription offer

Log in to Creative Bloq with your preferred social network to comment

OR

Log in with your Creative Bloq account

site stat collection