Infographics Are Evolving into Many Formats

The internet is full of noise, and your job is to break through that wall of information with something that resonates with your target audience. When you are communicating any message, you want to ensure that your audience will understand and remember the valuable takeaways about your products or services. You want your communication to be clear and concise. This is where infographics come in.

Infographics are your opportunity to convey complex ideas and information in a simple and easily digestible manner. Simply put, our brains love visual information. Infographics can make your marketing and advertising stand out in the crowded world of visual content.

As the Internet, our computing devices and out screen sizes continue to evolve and change, infographics need to evolve as well. Moving past the original static images, infographic storytelling with data visualizations and illustrations can now be found in a number of different formats.

Below, are great examples of different ways to leverage the five different types of infographics to make your product or services more memorable.

1. Static Infographics - Kitchen Conversion Guide

Static infographics are the most simple and most common infographic format out there. They are usually saved as an image file to be easily distributed and consumed (JPG or PNG format). Static infographics are easily shared using email and social media since there are no moving parts to consider.

Source: https://shannon-lattin.squarespace.com/how-many-guide/

This type of infographic is also easily split up into segments in order to focus on one piece at a time. This is ideal for giving presentations or sharing on social media.

2. Interactive Infographics - Daily Dose of Water

Interactive infographics are great to utilize when you want people to move beyond simply looking at the information. Ideally your audience should get intimate with the facts you’re presenting by following a specific storyline told through your data. By giving your audience something to interact with, they are engaging more of their attention with the data, and will become more immersed in the information.

For example, this infographic from Good.is and Levi’s walks users through their typical routine and calculates how much water is used for each task. This allows a personalized experience for each person that views the infographic, creating a stronger connection to the information being shared.

Source: http://awesome.good.is/transparency/web/1204/your-daily-dose-of-water/flash.html

3. Video Infographics - The Fallen of WWII

Video infographics have been gaining popularity over the years in part for a lot of the same reasons static infographics work: the ease of sharing and the ability to embed it almost anywhere.

In this video infographic that has recently gone viral, the creator uses data visualization to make a powerful statement about the sacrifice soldiers made during World War II. Data visualization is used in such a way to show the stark juxtaposition between the Second World War and more modern conflicts.  Check out this quick motion graphic titled, The Fallen of World War II from Austin-based developer Neil Halloran. His use of sound and motion brings the information to life.

The Fallen of World War II from Neil Halloran on Vimeo.

4. Zooming Infographics - The History of Film

Some infographic topics tackle a large amount of information, and a larger design is required to display all of its information. This infographic from Historyshots is a great example of a zooming infographic:

Source: http://www.historyshots.com/products/history-of-film

The History of Film plots out the most important films of the last 100 years into a beautiful, flowing timeline that visually separates the films into 20 different genres. As can be seen above, if this infographic was just left as a static image, it would be difficult to read everything because it is so detailed and complex. In the web browser, a large design is reduced in size so that the entire design can be viewed all at once on the screen, and the zooming controls are made available to the reader to view the small details clearly.

5. Animated Infographics - Flight Videos Deconstructed

Some topics for infographics are best created to feature motion, none more so than one that shows the the flight patterns of an Egyptian Fruit Bat, Dragonfly, Canada Goose, Hawk Moth, and Hummingbird. Flight Videos Deconstructed is an animated infographic about flight patterns within the animal kingdom. Covering five winged animals the and the motion their wings use while taking flight, this animated graphic uses vibrant colors and geometric shapes to convey the beauty and simplicity of flight.

Animated infographics create some motion or change in the design as the reader watches. It might be the bars in a bar chart growing, a color change, or (in the case of these winged animals) an animated character. These are differentiated from the video infographics because these are not video files. These are animated with HTML code or an animated GIF image file format to create the animation but can exist as a stand-alone object on a web page.

Source: http://tabletopwhale.com/2014/09/29/flight-videos-deconstructed.html

With so many new and different formats of infographics available to today’s marketers, providing your audience with a story that conveys your message has never been more exciting. Sharing the key takeaways from your product or services can be done in an expertly designed way that appeals to your audience and leaves them wanting more. 

The World's Loudest Noises - An Audio Infographic

Loud noises can be unpleasant. But how loud is too loud? The World’s Loudest Noises is an interactive infographic from Air Conditioning Company that explains the loudest noises in the world and how much damage they could do to your ears. So next time your air conditioning kicks on and you feel like complaining… Just remember, there is always something louder.

Turn your volume down before you start clicking!

Our initial attempt to explain how loud air conditioners are via an internet page was, in our opinion, a minor disaster.

An indisputable fact is that 99.999% of us haven’t got a clue what a decibel either sounds like or looks like! Let’s be honest, we didn’t even know ourselves precisely what a decibel was!

So we started to delve into the dark world of decibels to make the blinking things easier to understand. We initially wanted to create an amazingly informative infographic to best explain how loud our air conditioners are. However, we didn’t know where the ‘cut-off’ point should have been and we got somewhat carried away until we found the worlds loudest noise!

Despite all of our in-depth research, noise levels and decibels are still controversial and subjective. We found so many different accounts of how loud the same sound was. Indeed, most of our research showed that an aeroplane taking off is louder than a spaceship launch and surely this cannot be the case. Further investigation revealed that people forget to mention how far away they were when actually measuring the sounds. Also, based in London, we don’t live close enough to Cape Canaveral to run around waving our own decibel meter…..

Have some fun clicking around on our all-singing-and-dancing infographic below. Those of you who wish for a more academic approach can scroll to the bottom to check out our initial research.

An audio infographic! This is a new way to create an interactive infographic. Each of the sounds listed in the infographic above is clickable to play an audio sample of each noise. It’s more fun and entertaining than actually representing the decibels because there’s no way your computer speakers (or your mobile phone speakers) can reproduce some of the decibel levels shown here. Plus you have volume control.

I’m really disappointed that the vertical scale is out of proportion. The sounds should be accurately placed along the decibel scale, not just evenly spaced no matter what the values are. That’s just poor data visualization.

There’s a sharing issue that happens with an interactive infographic like this one. I was bale to get the embed code from the publisher, so all of the click-to-play sounds should work here on Cool Infographics as well. However, most people that share the infographic will only grab the JPG image file or click the sharing buttons, and that loses all of the interactivity included in the code. The sounds also don’t work on many iOS and mobile devices.

What other infographic topics could include sounds?

Thanks to David for sending in the link!

100 Years of Rock Visualized

From Gospel to Grunge: 100 Years Of Rock in Less Than a Minute is an ambitious design project from ConcertHotels.com.  It’s an animated, interactive timeline design that let’s you click on any genre to highlight it’s specific history and play a sample of the appropriate music.

The history of rock music is pretty interesting. Everyone knows that it’s roots lie in genres like Gospel, but what about all the other genres?

How did Cowpunk come about? Or Indie Rock? Or Nu Metal?

These are the sorts of questions we ask ourselves here at Concert Hotels (oh, and other important topics like what we should have for lunch).

Curiosity piqued, we decided to trace the roots of the various rock genres, kinda like ‘Who do you think you are?’ but for rock music, and then visualize it.

We embarked upon what turned into a mammoth research task, the likes of which none of us have undertaken since college. But we stuck with it. We think it was worth the effort.

Ladies and gentlemen, we give you our Rock Time Machine - click here to journey through 100 years of rock in less than a minute.

And there’s more - while we were at it we thought it might be pretty cool to be able to hear a sample of each genre.

So turn your speakers up to 11 (or pop your headphones in if you’re the considerate type) - you never know, you might just find a new music genre to fall in love with.

Although music heritage isn’t an exact science, the color-coded flow arrows are easy to follow throughout the design.  However, they get more complicated at the bottom.  Apparently there hasn’t been any new music since Y2K?

Found on Fast Company

NFL Concussion Watch 2013

PBS Frontline has published the interactive data visualization, NFL Concussion Watch 2013 to summarize all of the player concussions reported in the NFL.

Every week in the National Football League, a player is sidelined by a head injury. In some cases, their symptoms are clearly visible and they exit the game. Other times, less obvious warning signs can mean a missed diagnosis and a return to the field. Either way, research indicates that the long-term health effects of such injuries — including memory loss, depression and even dementia — can pose problems for players long after retirement.

Concussion Watch is an effort to monitor the NFL’s response to the persistent risk of head injury in professional football. To do so, FRONTLINE will track which players are being removed from games after a hit to the head — and which players are not — and keep score of how long they are kept from the field following a concussion.

I really like the idea of this data visualization, but they messed up the visuals.  The circle sizes are supposed to change relative to the values, but they’re not correct.  The designer chose to make the circles for 1-3 too large in order to fit the numbers inside the circles, and 4-5 are larger but the same size.  The choice of aesthetics over accuracy is a common mistake, and creates a false visual to the readers.  It’s the wrong choice.  Accuracy of the data visualization is more important than any other part of the design.

In visualizations, the design is supposed to visually compare values to create context and understand for the readers.  Because some of these circles are larger than their actual values, this creates the impression that most of the football positions have similar risk, instead of clearly highlighting how less risky some positions truly are.

I do like the design layout that places the circles into their correct player positions.  Readers can grasp this layout in a fraction of a second, and understand where the riskiest positions are.

Thanks to Melanie for sending in the link!

The Racial Dot Map

The Racial Dot Map visualizes the 2010 U.S. Census data, where every individual person is represented by a single, color-coded dot.  The color coding shows the racial groupings gathered by the census.

This map is an American snapshot; it provides an accessible visualization of geographic distribution, population density, and racial diversity of the American people in every neighborhood in the entire country. The map displays 308,745,538 dots, one for each person residing in the United States at the location they were counted during the 2010 Census. Each dot is color-coded by the individual’s race and ethnicity. The map is presented in both black and white and full color versions.

The map was created by Dustin Cable, a demographic researcher at the University of Virginia’s Weldon Cooper Center for Public Service. Brandon Martin-Anderson from the MIT Media Lab deserves credit for the original inspiration for the project. This map builds on his work by adding the Census Bureau’s racial data, and by correcting for mapping errors.

Each of the 308 million dots are smaller than a pixel on your computer screen at most zoom levels. Therefore, the “smudges” you see at the national and regional levels are actually aggregations of many individual dots. The dots themselves are only resolvable at the city and neighborhood zoom levels.

Each dot on the map is also color-coded by race and ethnicity. Whites are coded as blue; African-Americans, green; Asians, red; Hispanics, orange; and all other racial categories are coded as brown.

The map is an interactive, zoomable map online of the entire country, and allows you to explore any U.S. locations.  Chicago is show above.

Since the dots are smaller that screen resolutions where the viewer zooms out, the data is aggregated to pixels at each level of zoom.   The Minneapolis-St. Paul metro area is highlighted on the site as an example of the aggregation.  You can see the more detailed dot pattern on the right at the higher zoom level.

I would love to see this added as a layer in Google Earth!  Wouldn’t that be cool?

Thanks to Renee for sending in the link!  Also, found on Wired.

Atlanta:

Dallas-Fort Worth:

The entire U.S.

Drones Kill - Animated, Interactive Visualization

Great data visualization design from Pitch Interactive.  Out of Site, Out of Mind is an animated data visualization of every U.S. drone strike in Pakistan since 2004 and the associated kills reported in the news.  There is also an interactive element is that the readers can hover their pointer over the visualization an more details appear in a popup window.  Visit the original site to see the animation.

Since 2004, the US has been practicing in a new kind of clandestine military operation. The justification for using drones to take out enemy targets is appealing because it removes the risk of losing American military, it’s much cheaper than deploying soldiers, it’s politically much easier to maneuver (i.e. flying a drone within Pakistan vs. sending troops) and it keeps the world in the dark about what is actually happening. It takes the conflict out of sight, out of mind. The success rate is extremely low and the cost on civilian lives and the general well-being of the population is very high. This project helps to bring light on the topic of drones. Not to speak for or against, but to inform and to allow you to see for yourself whether you can support drone usage or not.

The visualization is created in HTML5 and JavaScript. We recommend Chrome for the best viewing experience.

The challenge with gathering the data and how drone attacks are represented in the news is shown by the large OTHER category of victims.  Also, it’s the largest category of victims.  A data visualization like this is a tremendously effective way to bring this issue to light.

The category of victims we call “OTHER” is classified differently depending on the source. The Obama administration classifies any able-bodied male a military combatant unless evidence is brought forward to prove otherwise. This is a very grey area for us. These could be neighbors of a target killed. They may all be militants and a threat. What we do know for sure is that they are targeted without being given any representation or voice to defend themselves.

The visualization was created by Wesley Grubbs, and there is a video interview of him about the data visualziation process by The Huffington Post.

Thanks to Ray for sending in the link!

How Many Alien Civilizations are there in the Galaxy?

Very cool!  The How Many Alien Civilizations are there in the Galaxy? infographic from BBC was designed by Information is Beautiful to illustrate the Drake equation. The Drake equation is an equation used to calculate how many potential aliens may exist in the Milky Way Galaxy.

Today, we live in an age of exploration, where robots on Mars and planet-hunting telescopes are beginning to allow us to edge closer to an answer.

While we wait to establish contact, one technique we can use back on Earth is an equation that American astronomer Frank Drake formulated in the 1960s to calculate the number of detectable extraterrestrial civilizations may exist in the Milky Way galaxy.

It is not a rigorous equation, offering a wide range of possible answers. Instead it is more a tool used to help understand how many worlds might be out there and how those estimates change as missions like Kepler, a telescope that is currently searching for Earth-like planets, begin to discover more about our universe.

Until ground-based observations, space telescopes and planet-roving robots uncover any tell-tale signs of life, what better way to speculate on how many intelligent alien civilizations may exist than to explore the universe with our interactive version of the equation.

It’s actually an interactive infographic because it let’s the user change the assumptions and recalculate the results.  So if you only believe there is a 50% chance of plant life developing, change the assumption value and recalculate.

Found on FastCo Design.

The Foursquare Visualizer

Foursquare has release a new Foursquare Visualizer, that creates an interactive data visualization of your own activity for the last 12 months.  I included the images from my own history.

At Foursquare, we’ve always known how very special our community is. Today, April 16 (4/4^2), marks the fourth annual 4sqDay. Each year, we take this opportunity to thank our amazing community for all that they do.

…take a peek back into your own history at foursquare.com/visualizeme. It’s just our small way of saying, “Thanks! We think you’re awesome.”

There are a handful of different visualizations of your own history of check-ins available.  The connection circle (shown above) is the best looking.  Other visuals include a Timeline and Categories.

Found on the Foursquare blog

How Far is it to Mars?

How Far is it to Mars? by David Paliwoda is a fantastic animated, interactive infographic website that shows the viewer the scale of the distance to the Moon and to Mars as measured in pixels.  David calls this a motion-infographic.

Click the image above to see the animated site.  Very cool! 

Found on Daring Fireball

Beautiful Animated Wind Maps

The static image above doesn’t do these maps justice.  Go see the Wind Map on the Hint.fm site to truly appreciate the design work from artists Fernanda Viégas and Martin Wattenberg.

An invisible, ancient source of energy surrounds us—energy that powered the first explorations of the world, and that may be a key to the future. This map shows you the delicate tracery of wind flowing over the US. 

The animation is mezmerizing, and the interactive piece allows you to click-to-zoom in closer to any part of the map to see much more detail in a specific region.  The main page shows the map based on the most current weather information, but the Gallery page has some snapshots linked to specific points in time (like Hurricane Sandy).  I love that even the speed legend on the side is animated!

You can also buy a poster version as an art print.

Thanks to Jeff Jarvis for sharing this on Google+!