The future of data visualization lies in interactivity. Luke Clum explains how to create a truly stunning interactive infographic.
As the brilliant infographic Why Your Brain Craves Infographics explains, people are visually wired.
Advertisement
‘);
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.
Welcome to the future
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.
Different types of interactivity
01. 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.
02. Multipagination
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.
03. Highlighting 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.
04. Clicks/rollovers that 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.
05. Entering information
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.
Resources
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.
06. Tutorials
This all-encompassing 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.
07. Examples
This site demonstrates various popular transitions that can be achieved between pages, which can be very useful for inspiration as well as information.
08. 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.
Words: Luke Clum
Luke Clum is a designer and web developer from Seattle. Follow him on Twitter at @lukeclum.
Liked this? Read these!
- Download the best free fonts
- Brilliant WordPress tutorial selection
- Free Photoshop actions to create stunning effects
- Create a perfect mood board with these pro tips
- The best 3D movies of 2013
Have you seen a great example of an interactive infographic? Let us know about it in the comments below!