Interactive Infographics

How to Create Interactive Infographics

CopyPress

March 16, 2018 (Updated: October 7, 2020)

In this article…

• Prepare Your Topic
• Collect the Facts
• Set the Storyline
• Explore Types of Interactivity
• Wireframe Your Infographic
• Create Graphics
• Animate Your Piece
• How to Create Interactive Infographics with Handy Tools

Interactive infographics are compelling because they combine both visual and kinetic elements to create a piece that’s engaging and memorable. People retain information better when they interact with it physically, which is just what your interactive infographics will allow them to do. You can take the wildly popular concept of the infographic and bring it to life in a fresh and fascinating way when you add movement, pop-ups, and other elements to the mix.

Learning how to create interactive infographics requires more time, thought, and design work than a static piece, but the level of interest you can generate with this approach is well worth the added investment. Get started now, and begin exploring all the ins and outs of interactive infographic creation.

Prepare Your Topic

Image via Flickr by Colors Time

The first step when learning how to create interactive infographics is selecting a topic. Next, you need to work on crafting your storyline and gathering data. Not all topics are appropriate for an interactive piece, so it’s important to examine yours carefully to make sure you have enough information to support an infographic.

You can make nearly any infographic into an interactive product, but a few topics lend themselves particularly well to this type of presentation. You’ll find an interactive piece is an excellent choice if you’re working with:

• A topic that allows for personalization, such as a horoscope that’s unique for each user
• A timeline where you progress chronologically
• A comparison in which you might use multiple overlays on the same backdrop

For other topics, you’ll need to be particularly creative in how you add your interactive elements so they feel natural and intuitive rather than forced. However, with the right touch of creativity, you can get interactive no matter what you’re covering.

Collect the Facts

Gather reliable data on your topic, and determine the best way to visualize each piece of information. Keep track of your sources as you work. You’ll need to include these at the bottom or end of your final piece to give proper credit. If you’re using internal data or research provided to you by a private organization, make sure you have proper permissions before including it in your piece.

Set the Storyline

Every infographic needs a storyline, but this is particularly true of an interactive piece. Your viewer will take an active role in helping the infographic progress from one stage to the next. What type of story will you tell? Are you progressing through time? Are you moving geographically from one place to another? Perhaps you’re simply diving deeper into your topic, beginning with a broad overview and clicking through to get to the inner details that support your overarching message.

A personalized infographic might tell an individual story. Perhaps users will input their income and travel through an individualized tale of where that income will go the farthest based on cost of living or where they’ll earn the most for their career field. Define your story clearly so you can succeed in the next stage where you bring it to life.

Explore Types of Interactivity

You can take any number of approaches when you’re brainstorming how to create interactive infographics. Consider all your options, and determine which ones fit your storyline best.

Scrolling Effects

As the viewer scrolls through the infographic, this action triggers animations and transitions that make the journey more engaging. Watching these elements unfold pulls the viewer in and tends to encourage them view the piece to completion. These effects keep them scrolling to the end and make sure they stay with the infographic for its entirety. While you might first think of vertical movement with a scrolling infographic, these can move horizontally, as well, as seen in this piece on car sharing.

Pagination

Dividing an infographic into individual pages encourages the viewer to digest one piece before proceeding to the next. As with scrolling, there’s a nagging sense of incompletion for those who don’t finish the piece.

Personalized Participation

Where applicable, incorporating personalized elements is one of the best ways to encourage participating with your topic. In this type of infographic, the viewer enters personal data, such as a birthdate or income, or answers multiple choice questions to trigger a result that’s unique to their needs or interests.

Interactive Discovery

Hide some elements of the infographic, and encourage the viewer to scroll or click to find them. This creates an exciting sense of discovery when the user activates the proper area and new facts or animations pop up as a result.

User-Directed Highlighting

Rather than overlay an overwhelming amount of data on a single chart, try incorporating a user-directed tool that brings up different sets of data when that person clicks on or scrolls over subtopics. This is ideal for situations in which you’re using the same background, such as a map, but you want the opportunity to highlight different populations or statistics on top of it. This allows viewers to control what’s displayed so they can focus on the areas that interest them most.

Data Customization

Allow the viewer to take an active role in managing data display with customization features such as those found in the LRA Crisis Tracker. This tool allows the viewer to scroll in or out, pull up details of an incident, and display incidents as either markers or a heatmap.

With your interactivity in mind, you can begin building out your piece.

Wireframe Your Infographic

Wireframing is always a helpful step in infographic creation. With an interactive infographic, you might need two, three, or even more wireframes to ultimately map out the stages of your piece. You should block out not only the layout of your base infographic but also the visual design of each pop-up, mouse-over, and interaction.

As you’re developing your wireframe, make sure you specify how each feature gets triggered. Does it take place when the user simply passes the mouse over an icon, or does it require a click for activation? If you’re developing a scrolling infographic, highlight where each animation will occur as the user scrolls. For paginated infographics, you need a separate wireframe for every page as well as indicators for what action will move the viewer along from one page to the next.

If you’re developing a quiz, you’ll need both a wireframe and a flowchart or other written outline that specifies which answers correlate to each conclusion. You might tabulate a numerical score for each question to bring the user to a final endpoint or perform other backend calculations, such as working with the viewer’s birthday to determine his or her numerology.

Create Graphics

You can begin constructing your interactive infographic much the same way you would draft a static piece. Illustrator and Photoshop are two popular tools for creating stunning imagery. Start by drafting your images here. Make sure to save each element with a transparent background for easy uploading into your final piece.

Carefully consider where movement will take place as you’re working with your images. If you want the legs on an individual to move, you’ll need to create the legs on a separate layer and draft several sets of legs to ultimately simulate that movement. A character that blinks will need multiple sets of eyes, likewise saved on different layers.

Animate Your Piece

Pull your graphics into your chosen tool for animation. You have several options when it comes to animating an infographic, depending on your level of experience and comfort with coding.

Javascript

If you’re comfortable coding with Javascript, this is an effective way to bring your graphics to life. Save your graphics in SVG format so you can manipulate them in an HTML file using Javascript. You can incorporate simple Javascript commands to utilize mouse-over and click events or show and hide elements. This is a relatively straightforward approach that can yield an engaging amount of interactivity with basic coding that you might already be familiar with.

CSS

As with Javascript, you can use CSS to add interactive coding to an SVG file. You can select various layers of the initial file and incorporate code that will hide them until the appropriate action occurs. Hover styles will define what the user sees when he or she mouses over an item, while transitions can impact the visual effect that occurs when moving from one view to the next. Check out A Collection of Page Transitions for a full sampling of the transitions you can use with CSS.

Edge Animate

Adobe Edge Animate is an outstanding choice for creators who want a hands-on approach with minimal coding. As part of the Adobe Creative Cloud, this software works seamlessly with Illustrator and Photoshop as well as InDesign, Premiere Pro, and After Effects.

Begin by uploading your graphics from the previous step and adding text in HTML format. At this point, you can implement responsive scaling by activating this feature from the properties panel. Set your project’s minimum and maximum width, and it will scale within those parameters for viewing on multiple devices.

To bring your infographic to life in Edge Animate, you’ll create widgets with various animated states. Edge provides you with powerful widget tools that can contain a wealth of information in a single button, such as the TimelineTrigger, which contains a default state, animated rollover state, and animated rollout state.

How to Create Interactive Infographics with Handy Tools

If you’re not up to the task of coding your way through the creation process, you can also put together interactive infographics quickly with the help of a few handy software tools. These offer limited functionality, but they’re an easy fix when you want to add just one or two interactive elements to your piece rather than combining a more complex suite of features.

ThingLink

This tool lets you embed text, images, videos, and other content within an image. Using a static infographic as your core image, with this tool you can layer additional information on top. ThingLink provides a quick shortcut for turning your standard infographics into deeper and more engaging features.

Qzzr

If you’re interested in building a personalized infographic but you don’t have the deep coding skills necessary to craft one from the ground up, try a tool like Qzzr. This quiz-builder offers ample opportunity for customization using your own images, videos, GIFs, and text. Though you’re working with a standard background tool to put your content together, each Qzzr creation is satisfyingly unique.

Mapme

As the name suggests, Mapme is all about map creation. If your infographic guides viewers through a geographic journey, you might be able to take a shortcut to interactivity using this tool. The functionality is limited to maps, so it isn’t effective for other presentations, but it will let you set pins and embed data, videos, images, and more.

Infogr.Am

Specifically designed for highly engaging visuals, Infogr.Am is a powerful tool that will help you create maps, charts, and even dashboards. This is one of the more versatile tools available for creating interactive visual pieces without deep coding.

Votion

Votion is an interactive tool for creating polls, quizzes, brackets, and other interactive matchups. If you’re plotting one category against another, this creator will help you do so in a visually engaging format that puts the viewer in control of the action.

Ceros

Ceros is one of the more in-depth options for interactive infographic creation. This product is designed to give you all the functionality you’d enjoy with coding without the hassle of learning the finer points of Javascript, CSS, and similar languages. This feature-packed program isn’t as intuitive as other products, but it does give you more options to explore once you’ve mastered its navigation.

With the right tools and programs, you can put together an interactive infographic at nearly any skill level.

If you’re looking for a fast way to vault your content to a new level, learning how to create interactive infographics can be beneficial. Interactive infographics are ideal ways to boost engagement and gain your audience’s attention. Start brainstorming your next infographic topic, and explore how interactivity can share it with your viewers in a fresh new way.

CopyPress

March 16, 2018 (Updated: October 7, 2020)