Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Diverse And Engaging Instances Of Interactive Infographic Design

In the last few years, the way we design infographics has changed significantly. Infographics have evolved from static graphics to rich, interactive experiences with animation and video elements, all tailored to the uniqueness of the content, instead of pressing it into a precast mold. For this round-up, I have collected some of the better infographics to see what engaging and informative experiences can look like today.

Most of the infographics on this list were chosen to showcase different ways that designers have approached data visualization. However, there are also a few hybrids here that illustrate the disappearing boundaries between infographics and richer multimedia experiences in creating engaging content and compelling stories1. Deviating from the traditional infographic form means that we tread into more complex media territory, but such experimentation with technology and narrative will be crucial in shaping the future of infographic design.

In compiling this list, I received some great recommendations from friends and peers in the design world, and picking just 23 was not easy. Check out the list below to see if your favorite infographic made the list, and let us know about any others that should have been included!

Wind Map Link

Though you are not advised to “fly a plane, sail a boat or fight wildfires” based on the information in this infographic, “Wind Map” is still an engrossing piece of design that shows the direction and speed of winds over the United States. It’s more artistic than utilitarian, and that’s perfectly fine with us because it’s quite nice to just sit and watch these delicate, wispy threads make their way all over the country. A simple but well-designed example of how an infographic showing movement patterns benefits from animation and moving images.

Wind Map2
Not apparent in this screenshot: wind animation. (Image: Hint.fm3)

In Flight Link

The Guardian lands the third one on this list with “In Flight,” an infographic that uses live data (at least it did when launched in 2014) to show commercial flights currently in the air and to also provide a lesson in the history of aviation. The muffled conversations between aviation crews at the start of the interactive make for a nice atmospheric touch. Are infographics gradually turning into cinematic experiences? “In Flight” certainly hints at that direction!

In Flight4
Screenshot showing flights across multiple continents. (Image: The Guardian5)

Dial A Moon Link

“Dial a Moon” isn’t much to see (if you catch it at the ungodly hour, as in the screenshot below) but it serves its purpose pretty well. Thanks to NASA, this is an infographic on moon phase and liberation for 2015 that updates by the hour. Now you don’t have to Google for this arcane information anymore (you’re welcome!).

Dial a Moon6
The moon caught in (not) all its glory. (Image: NASA7)

24 Hours Of Pluto Link

Nature magazine publishes a lot of interesting infographics for its scientifically-minded audience. Included here is its most recent one on the much-talked-about Pluto fly-by. There is a lot of text-based information here, but considering all of the jargon-laden information on the web, the visuals here provide easy access to the information you want most — whether it’s the composition of the dwarf planet or the formation of its moons.

Check out more infographics by Nature on its Tumblr page8.

24 Hours of Pluto9
24 Hours of Pluto provides a graphical guide to the fly-by. (Image: Nature10)

Decades Of American Homes Link

Take a road trip through the great big American dream (as reflected in evolving home styles). This nicely illustrated infographic lets you get behind the wheel of a car (which aptly transforms to keep up with the times as you scroll down) and work your way from the 1900s all the way to the 2000s as you drive by all of the homes that were popular over the decades. There are plenty of nuggets of useful information along the way (including the sociopolitical conditions of the time, as well as the art movement in fashion), and it all ends with a question prompting you to envision the future of the American home. The infographic is a great example of incorporating user scrolling because the concept lends itself well to it.

Decades of American Homes11
Screenshot from the middle of the journey. (Image: iMove12)

Evolution Of Insight Link

Vision Critical’s “Evolution of Insight” traces developments in market research from all the way back in the 1890s to today. It functions similar to the “Decades of American Homes” infographic above, and it’s interesting to compare the effectiveness of the interactive timeline methods of the two very different stories. The “Decades of American Homes” infographic has an advantage because looking at homes as you “drive” by them is much more intuitive than taking a road trip through great American marketing insight. The best infographics are designed for the content, not around it.

Evolution of Insight13
Evolution Of Insight. (Image: Vision Critical14)

LGBT Rights Around The World Link

The Guardian snags another position on this list with this elegant infographic explaining the legal situation for LGBT people on a variety of issues (marriage, workplace discrimination, hate crime, etc.) in every country in the world. Moving along the semi-circle provides a fast and easy way to compare statistics between different countries, and the overall composition keeps the global status front and center at all times. The infographic also comes with a strong call to action to bridge the gap between awareness and activism.

LGBT Rights15
LGBT Rights Around The World. (Image: The Guardian16)

Inequality Is Fixable Link

Another great example of an interactive infographic, “Inequality Is Fixable” invites its audience into the issue at hand by making it personal: You are not going to lose interest quickly when the infographic tells you exactly how much you are being underpaid and why. By keeping the user a part of the story17 throughout (and supplementing it with all of the relevant information that needs to be communicated), the designers are able to maintain interest and guide the user through the requisite steps of information all the way to the call to action at the end.

Inequality18
Inequality Is Fixable. (Image: Inequality Is Fixable19)

You Draw It: How Family Income Predicts Children’s College Chances Link

Many of the infographics in this list use animation and interaction to provide a rich experience. Visually, this New York Times infographic sticks to a classic chart format but uses behavioral insights to expand into a new area of infographic design: anticipatory and participatory visualization. By asking readers to draw their own line first, the infographic leverages the reader’s personal engagement and knowledge to deliver its, therefore, valid packets of information.

Your Draw It20
You Draw It: How Family Income Predicts Children’s College Chances. (Image: The New York Times21)

How Americans Die Link

Apart from its Seurat-like title image, this one sticks to good old charts for its visualizations, but it cleverly lets users navigate the data themselves by moving their cursor along the data lines. This makes it much easier to compare, for instance, how many suicide-related deaths occurred in the ’70s compared to now (hint: it’s on the rise) than a static chart would allow for.

How Americans Die22
The title image from the infographic. (Image: Bloomberg23)

The Russia Left Behind Link

Ever since “Snowfall24” debuted to widespread attention and praise, the New York Times has been developing quite a reputation for its cutting-edge multimedia journalism, using a combination of infographic design and in-depth narrative to create rich and engaging experiences. There are more flashier examples of such work, but the one on this list is a strikingly resonant piece on Russia that works like an interactive road trip (complete with a map that you work your way through as you progress) and is all the better for it. For the publication’s earlier pieces that lean more towards data visualization, check out the color-based analysis of movie trailers25 and a map of the different paths26 presidential candidates can take to the White House.

The Russia Left Behind27
The Russia Left Behind. (Image: The New York Times28)

Bond Cars Link

If you have ever wanted an easy and fun way to explore James Bond’s history via his wheels, UK-based car dealer Evans Halshaw has just the thing for you. His interactive infographic lets you nail down the model and design for each one of Bond’s cars and also provides some trivia on each one. Using the ubiquitous slider tactic, you can also “reveal” the car in its full metal glory, rather than the default sketch. It is a creative workaround for including photography that does not gel well with your aesthetic.

Bond Cars29
The Aston Martin from Casino Royale. (Image: Evans Halshaw30)

The Colors Of Motion Link

“The Colors of Motion” is an infographic series that analyzes movies only regarding their color palette, frame by frame. If you’ve ever wondered what your favorite movie looks like as a color palette, you have your answer. Can’t find a title in the database? Just send the designers a message; they are accepting requests.

The Colors of Motion31
The Colors Of Motion. (Image: The Colors of Motion32)

Peru’s Royal Wari Tomb Link

National Geographic has a pretty impressive collection of what it calls “interactive graphics” (most of which are accompanied by an in-depth story, such as its piece on Trajan’s Column33) but I chose this relatively simple one to highlight what’s really effective about interactive infographics. “Peru’s Royal Wari Tomb” systematically uncovers the burial of a noblewoman, layer by layer. The focus shifts from her bundle to her adornments and provisions (in that order). By dividing information into digestible chunks and letting the user navigate them, such interactive graphics avoid the biggest pitfall of most involved infographics: an onslaught of data and visuals. Moreover, each subsequent interaction adds richness to the experience, which is much more rewarding than being presented with everything at once. Our minds have a way of turning out overwhelming stimulus, so interaction provides a great solution for the user to explore information at ease.

You can check out other great infographics by National Geographic on its Pinterest board34.

Peru's Royal Wari Tomb35
One of the panels from the infographic. (Image: National Geographic36)

Scottish Referendum Explained For Non-Brits Link

The Guardian, much like the New York Times, has been pushing the envelope in multimedia journalism, and its video piece on the Scottish referendum does what infographics do best: make unwieldy information palatable. For a lot of us outside the UK, there was a lot of confusion about the whole referendum business; thankfully, this video helps you become knowledgeable about the essential aspects of the topic quickly without requiring a deep history dive.

Scottish Referendum Explained for Non-Brits37
Scottish Referendum Explained For Non-Brits. (Video source38)

Population Health Link

For a 3-part article series commissioned by The Atlantic about “Population Health39”, a concept to improve the health of communities, Truth Labs created a rich digital narrative. Its core goal was to preserve the natural document scroll and reading flow while creating an experience that is different from a visual perspective. To bring it to life, they borrowed tools and strategies from filmmaking, but also established a set of design principles to support reading as the key tenet.

Population Health40
One of the panels from Population Health. (Image: The Atlantic41)

Joho’s Bean Link

The Austrian coffee roaster Joho’s4442 has created an impressive multimedia experience to tell the story of the origin of their coffee beans. The narrative harmoniously blends audio, video and photo material to create an experience for (almost) all senses. You’ll hear the birds chirping as you follow the farmer around the coffee plantation, the sound of the roasted coffee beans getting bagged, as well as the busy streets and the traffic noise in the city.

Joho’s43
Joho’s takes you on a trip to the origin of their coffee beans. (Image: Joho’s4442)

The Wild Path Link

The Wild Path45 is an interactive storytelling experiment made with Canvas. It’s core element is a map that will animate a path on the map as you scroll the page. That way, the story being told is beautifully connected to the path itself. The project is highly experimental, though, and might not work in all browsers. If you want to dive deeper into the tech behind it, there’s an accompanying article which explains how it was done46.

The Wild Path47
An animated map shows the path as you scroll. (Image: Codrops48)

Live Election Results Link

The Guardian’s coverage of the US 2016 presidential election brings some fun into the serious business of percentages and precincts. An interactive infographic tracks the caucus votes in four states49. By default, the graphic shows the statewide results, and as a user hovers over a precinct on the accompanying map, the results show how the candidates performed there. The fun twist: The presidential candidates are represented as little pixel avatars, and as the infographic is updating live, the pixel people color in the precincts in which they won. Every now and then there’s also a speech bubble appearing next to the candidate with a quote he/she has (or could have) said.

Live Election results50
Live election results of the state caucuses. (Image: The Guardian51)

Have we missed some of your favorite infographics? Let us know in the comments!

Additional Resources Link

(og, al, ml, cm)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/content-strategy-storytelling/
  2. 2 http://hint.fm/wind/
  3. 3 http://hint.fm/wind/
  4. 4 http://www.theguardian.com/world/ng-interactive/2014/aviation-100-years
  5. 5 http://www.theguardian.com/world/ng-interactive/2014/aviation-100-years
  6. 6 http://svs.gsfc.nasa.gov/cgi-bin/details.cgi?aid=4236
  7. 7 http://svs.gsfc.nasa.gov/cgi-bin/details.cgi?aid=4236
  8. 8 http://naturegraphics.tumblr.com
  9. 9 http://www.nature.com/news/pluto-fly-by-a-graphical-guide-to-the-historic-mission-1.17927
  10. 10 http://www.nature.com/news/pluto-fly-by-a-graphical-guide-to-the-historic-mission-1.17927
  11. 11 http://www.imove.com/american-homes-through-the-decades
  12. 12 http://www.imove.com/american-homes-through-the-decades
  13. 13 http://www.visioncritical.com/evolution-of-insight/
  14. 14 http://www.visioncritical.com/evolution-of-insight/
  15. 15 http://www.theguardian.com/world/ng-interactive/2014/may/-sp-gay-rights-world-lesbian-bisexual-transgender
  16. 16 http://www.theguardian.com/world/ng-interactive/2014/may/-sp-gay-rights-world-lesbian-bisexual-transgender
  17. 17 https://www.smashingmagazine.com/2015/01/all-about-customer-journey-mapping/
  18. 18 http://inequality.is/fixable
  19. 19 http://inequality.is/fixable
  20. 20 http://www.nytimes.com/interactive/2015/05/28/upshot/you-draw-it-how-family-income-affects-childrens-college-chances.html
  21. 21 http://www.nytimes.com/interactive/2015/05/28/upshot/you-draw-it-how-family-income-affects-childrens-college-chances.html
  22. 22 http://www.bloomberg.com/dataview/2014-04-17/how-americans-die.html
  23. 23 http://www.bloomberg.com/dataview/2014-04-17/how-americans-die.html
  24. 24 http://www.nytimes.com/projects/2012/snow-fall/
  25. 25 http://www.nytimes.com/interactive/2013/02/19/movies/awardsseason/oscar-trailers.html
  26. 26 http://www.nytimes.com/interactive/2012/11/02/us/politics/paths-to-the-white-house.html
  27. 27 http://www.nytimes.com/newsgraphics/2013/10/13/russia/
  28. 28 http://www.nytimes.com/newsgraphics/2013/10/13/russia/
  29. 29 http://www.evanshalshaw.com/more/bondcars/
  30. 30 http://www.evanshalshaw.com/more/bondcars/
  31. 31 http://thecolorsofmotion.com/films
  32. 32 http://thecolorsofmotion.com/films
  33. 33 http://www.nationalgeographic.com/trajan-column/index.html
  34. 34 https://www.pinterest.com/natgeo/national-geographic-infographics/
  35. 35 http://ngm.nationalgeographic.com/2014/06/peru-tomb/tomb-interactive
  36. 36 http://ngm.nationalgeographic.com/2014/06/peru-tomb/tomb-interactive
  37. 37 http://www.theguardian.com/politics/video/2014/sep/17/scottish-referendum-explained-for-non-brits-video
  38. 38 http://www.theguardian.com/politics/video/2014/sep/17/scottish-referendum-explained-for-non-brits-video
  39. 39 http://www.theatlantic.com/sponsored/athenahealth/
  40. 40 http://www.theatlantic.com/sponsored/athenahealth/
  41. 41 http://www.theatlantic.com/sponsored/athenahealth/
  42. 42 http://johos.at
  43. 43 http://johos.at
  44. 44 http://johos.at
  45. 45 http://tympanus.net/Development/StorytellingMap/
  46. 46 http://tympanus.net/codrops/2015/12/16/animated-map-path-for-interactive-storytelling/
  47. 47 http://tympanus.net/Development/StorytellingMap/
  48. 48 http://tympanus.net/codrops/2015/12/16/animated-map-path-for-interactive-storytelling/
  49. 49 http://www.theguardian.com/us-news/ng-interactive/2016/mar/08/primary-caucus-live-results-michigan-mississippi-idaho-hawaii-election-2016
  50. 50 http://www.theguardian.com/us-news/ng-interactive/2016/mar/08/primary-caucus-live-results-michigan-mississippi-idaho-hawaii-election-2016
  51. 51 http://www.theguardian.com/us-news/ng-interactive/2016/mar/08/primary-caucus-live-results-michigan-mississippi-idaho-hawaii-election-2016
  52. 52 https://hbr.org/2014/04/what-makes-the-best-infographics-so-convincing/
  53. 53 /2011/10/the-dos-and-donts-of-infographic-design/
  54. 54 /2009/09/25-useful-data-visualization-and-infographics-resources/
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

Babar Suleman is a director, experience designer and writer. He is the recipient of a Hearst and NYC Media Lab Fellowship and his design work has been awarded by Intel and Hyperakt's Re33 StoryHack. Babar is a Fulbright scholar and received his MFA in Design & Technology from Parsons School of Design in New York City.

  1. 1

    Thanks for sharing these examples. There are some great ones in here—especially love the In Flight and Pluto pieces. :)

    I’ve seen lots of interactive infographics being created with Ceros over the past year. I’d encourage you to check out some additional examples on our site.

    Really interested to see how this trend evolves!

    2
  2. 2

    I recently worked on one that I am prod of, it tracks the consolidation of the airline industry in the U.S.

    http://www.oliverwyman.com/our-world/airlines.html

    0
  3. 3

    Evans halshaw is a car dealership in the uk

    0
  4. 5

    These were so awesome! The movies by color palette is going to waste a lot of my hours :)

    1

↑ Back to top