5 Key Tips for Designing a Successful Interactive Infographics
If you are spending a lot of time browsing the web, you probably see a lot infographic content used to deliver information to the audience. Infographics were and still remain a great source of information, especially for people who do not have time to read extensive data and research.
In the last 5-7 years, the infographic was widely adopted by media specialists as a successful marketing tool and it evolved as such. From a static content piece with graphs and pie charts, it became an entertaining tool for advertising products, presenting mundane data and calling to action.
Web designers even started using an infographic approach to building websites by using HTML5, CSS3 and jQuery.
It seems that in the last couple of years interactive infographics are a preferred medium for presenting data and promoting products.
Creating an infographic is not that difficult job. Creating a successful one is a difficult task as interactive infographics should inform users and communicate with them.
Keeping users engaged is a tough job because you need to make them involved and keep them entertained. But keeping users engaged means that they have to understand the data they see.
Here is some simple tips that help myself whenever I am creating highly-engaging and successful infographics.
#1 – Gather meaningful data
Creating great infographics always start with researching and choosing the right information. Choose your sources carefully and collect as much relevant information as you need.
From personal experience, I would advise you to be careful with data and hold your horses at some point as you may end up in what I call “desperation hole”. This happens when you start reading and get really involved in your research so much that you forget to stop as everything seems to matter. It doesn’t, trust me.
Have a clear plan in your head:
- What is topic of the infographic?
- What do you want to say with it?
- What are the main points you want to stress out?
After figuring out all that, you may start information collection… Otherwise you are doomed to fall into the desperation hole…
And when I am saying meaningful, I mean relevant, important, valuable, consistent…. You should be careful what you putting in your infographic, choose your facts carefully and check the sources.
Example: How does a hybrid car work?
Source: Column Five Media
This interactive infographic is a collaboration amongst Good Magazine, Kia and Column Five Media. It informs the users how a hybrid car works and how owning one can save money. Currently, in America such cars are the fastest selling types.
As you can see, this infographic requires users to take action in order to receive information. It is a simple, yet informative interactive artwork which promotes Kia’s hybrid automobiles and also give valuable facts about this modern vehicle.
Notice that the main source of the data is the U.S. Department of energy. Sometimes, when you are doing infographics you may need only one credible source of information.
(Pay attention to citing your sources. It is a good practice to cite and list all the sources you used to create an infographic )
#2 – Storytelling
After you gathered all the data it is the time to figure out what story you want to tell the readers. Ask yourself what is the purpose of your infographic. Are you promoting a product? Do you inform the audience and urge them to take action about a particular issue? If you do not figure out what is the story, all you have is a dull and boring data. Trust me on that, nobody will pay attention to your piece until you make it fascinating and interactive.
Think about how you are going to tell the story and deliver the message. When you think about stories, most of the time all of them have a logical flow. Consider the data you have and create a flow of small pieces of this story.
Lærepenger is an example of interactive website that uses infographics creatively. Instead of just presenting data, the creators decided to fully engage their audience by interacting with the data. It is more of a quiz based website but it is a great instance of using data to inform and engage the audience.
The audience here is 5th graders who want to learn more about economy. The website has the interaction incorporated into the data, it has also the educating factor and it is a compelling informative piece. By any means, this is an example of the future of presenting data on the web.
#3 Visual Appearance and Interactivity
Assuming that you have all the data figured out as well as the story, you now have to think about the visual appeal of all the number and figures. You need to think about the general look and feel of the interactive infographic. If you are doing a product launch infographic, you may want to echo the branding of the company in it.
Bear in mind the audience as well. You have to know who is the infographic for. If the target group is teenagers, you should think about making things more vibrant and keeping the content short. If the audience is young professionals, you may want to create a piece that reflects their style and character.
If your audience is consisting of middle-aged group of people, you probably want to choose functionality that responds to their temperament and behaviour on the Internet.
When creating an interactive infographic, you should consider your audience and it should reflect their distinctiveness.
Example: 115 Years of American Homes
This interactive infographic is created by a moving company and presents a lot of data in terms of different types of homes the Americans lived and still live.
This piece is clearly telling a story of how the Americans lived and how their homes looked like. Also, it gives some info of how the way they lived impacts the society and how new appliances and gadgets reflected the lifestyle.
A truly clever idea for an infographic by a moving company. The whole idea evokes positive emotions for the viewers and what’s important, people tend to connect to a company or a brand which make them smile and feel good.
#4 – Edit and Improve
Let’s imagine that you now have a lovely infographic that is beautifully designed and your fingers are itching to share it all over the web. Well, you may want to hold for a little while.
Believe me when I tell you that it nothing more annoying than seeing a stupid mistake in the content. There are countless examples on the web of greatly designed pieces with spelling mistakes. I would suggest to leave your amazing infographic for a couple of days and then have a look at it with a fresh pair of eyes. Or if you have a friend who is a master in spelling ask them to have a look for you. Sometimes, other people see things that we do not see.
Lastly, check your interactive infographic for bugs. Test on various devices, check for speed and functionality. People tend to be annoyed when they like something and it is not working properly.
#5 – Tell the world
Ok, so now everything is fine with the infographic. You like it. Clients or colleagues like it. Perfect.
Now, it is time to make it public. If it is a product infographic, think about putting on a specific domain or sub domain so it is easy to be discovered and people can easily interact with it. I would not recommend putting in an iframe and post it on a blog or any page on the client’s website.
Research what are the influential bloggers and news sites in the industry that infographic is relevant to and contact them. It is a great idea to prepare some high quality visuals and summary of the piece to send them to use in their blog articles.
Share the interactive infographic on Pinterest, Twitter,Facebook and all the social networks you are active on. Do not forget to use relevant hashtags to make it more accessible and searchable.
Resources & Inspiration for creating interactive infographic
- Column Five Media Infographics Portfolio
- Interactive Infographics @ Codepen
- 10 Wonderful Examples of Interactive Infographics
- Your daily dose of water @ GOOD.is
- 15 Online Infographic Tools and Free Vector Elements
- The art of Infographics: Hierarchy
Do you know any great interactive infographics example or tutorial? Feel free to leave a comment below.
(Featured image is designed by Freepik.)