10 user-engaging ways to create interactive infographics

1 Create a narrative

The best infographics take you on a content journey with a very definite outcome. Your starting point is the subject, your content is the ‘happening’ and the memorable ending is what your users take away. Take responsibility for being your users’ guide. They can get lost very quickly in a world of stats, diagrams and numbers. Make sure this doesn’t happen to them.

Architect your content

2 Architect your content

Create wireframes for the layout of your content. Use them in the same way you would a website. Consider the pathways you want to lead your users through – this needs to work very much with your intended content narrative. Ask yourself what interactivity/functionality you’re creating – and where it goes, and what it does. Treat your interactive infographic as a mini website, because that, essentially, is what it is.

3 Be properly interactive

The purpose of building an interactive infographic is to enhance engagement. Don’t settle for simple click-and-reveal functionality – you would be better off focusing on a great static visual if that’s the case. With great code you can do anything, so be original with your interactive features.

Show don't tell

4 Show don’t tell

Visualise everything you can: word count should be kept to a minimum. Push back on the client brief if the messaging isn’t enhanced by being visualised – not everything is. Remember, you are visualising the story to make it more engaging, not just for the fun of it. Show you care about the project by pushing back on the brief if needed.

5 Build for context

HTML, CSS, JavaScript or Flash – consider the environment the interactive infographic will be hosted in. It sounds obvious, but consider the basics of where and how this will be implemented. Get this nailed early in the project otherwise you may have to compromise at too late a stage on the functionality you designed for.

Hero your hook

6 Hero your hook

Every infographic has a central hook to the content. Create a strong, relevant visual identity based on your content. Consider the visual tone and treatment. By creating a relevant visual identity based on the subject, you then give the content room to breathe in the right environment.

7 Work your numbers hard

Whether they’re static or interactive, infographics live or die by the strength of the numbers and statistics. Whatever numbers your story has behind it, lead with these. They give real substance and weight behind whatever argument, product, service or situation you are communicating – and lend themselves to engaging visual cues. Avoid visualising opinions or statements as these aren’t as strong and tend to need copy to explain.

Animation vs code

8 Animation vs code

Think about animating your infographic rather than creating a coded interactive tool. The engagement level can be just as high. Animations can also be used in media, broadcasting and on social networks – letting you push your message out to the audience, rather than having to pull them in. Both approaches work equally well, but make sure you choose the right one for the brief.

9 Be user-centric; be scientific

Infographics and user experience (UX) design are closely aligned. Essentially all infographics exist to present users with information in a quick, easy-to-digest, memorable and engaging way. You could even apply a little neuroscience thinking to the design process. Users have less time than ever before to make decisions while interacting with your design, so delve into the subconscious and think about the three fundamental layers of the brain: instinct, feeling and thinking.

The gift of giving

10 The gift of giving

The most engaging interactive infographics require the user to make choices. Consider rewarding your user with a tailored output graphic (a JPEG, say) based on the choices they have made. This gives your content real personal relevance, and potentially great exposure on blogs, media, social networks and so on. Also, it’s good to give a little. Users have taken the time to engage with you, so give them a reward for their efforts.

All illustrations by FFunction