If you’re looking for a truly unique design element to wow your customers, an interactive infographic might be just the thing.
Interactive infographics mesh graphics, text and animation to grab users’ attention and convey information in a more engaging way. They’re gaining attention in the web design world, but are still relatively rare online, giving you the opportunity to show your audience something they genuinely haven’t seen before.
Of course, their rarity stems from the fact that they require more planning and creative work than their static counterparts—but don’t let that scare you off from seizing the opportunity.
Here are some tips from Informatics’ graphic designer Austin Grote on what it takes to create a great interactive infographic, as illustrated by a new infographic he recently created for UFG Insurance and the company’s Worth It safe driving campaign.
How to create an interactive infographic
First things first, you need to know what you’re aiming for before you start designing, according to Austin.
“A good infographic will be easy to read, and easy to follow,” he says, adding that he works closely with Informatics’ content team to develop a smooth and logical flow for the infographic's different stages.
That process could include rough sketches, flowcharts or storyboards—whatever it takes to understand the journey users will take, and the messages that need to be conveyed at each stop.
Visually, Austin advises aiming for a few simple graphic elements, a small color palette and plenty of whitespace in your infographic. The result, he says, will be a visually engaging and highly sharable end product.
It’s also important to design your infographic with mobile in mind, as roughly half of all your visitors will be on a phone or tablet.
Behind “Bill’s Distracted Driving Challenge”
UFG’s interactive infographic, for example, was designed to follow cartoon driver Bill and his commute home, as part of an awareness campaign for Distracted Driving Awareness Month in April.
Users are asked to make decisions for Bill at various points of the drive—do you answer that text message, or dig into your bag of fast food?—and learn facts about distraction-free driving along the way.
The flow and content were carefully mapped out by Informatics’ digital marketing team before being given to Austin. He then got to work creating bold graphic elements, sourcing sound effects and using those pieces to build scenes in Adobe Illustrator, an industry-standard graphic design tool.
The completed scenes were stitched together in Adobe Animate and exported to HTML5 for testing. (Flash animations are no longer a thing, in case you missed it.)
Austin notes that usability testing is critical to ensure a high-quality experience. Make sure someone clicks every button or activates every feature of your interactive infographic, and look for errors or glitches in your animation by using it on every device you have. Don’t skip this step in a rush to take your finished piece live, or you run the risk of a technical error that distracts audiences from your intended message.
For UFG, the result is an entertaining, informative and sharable web feature that drives conversions (signed pledges to avoid distracted driving). How could your brand use interactive infographics to tell your story or make a point?
If you need help, reach out to the content and design experts at Informatics—we’re leading the charge when it comes to storytelling through interactive infographics.
