Interactive Infographics: Mixing Design with Code to Make Something Beautiful
In this article…
- What Is An Interactive Infographic?
- Greater Screen Efficiency
- Amazing Visuals and Animation
- Amazing Visuals and Animation 2
- Implementing User Inputted Data
- Drop-Down Menus and Checkboxes
- Multipagination
- Using Sliders and Gauges
- Keep It Simple
- Know What to Hide
- Study Kinetic Learning
- Get Familiar With CSS3
Infographics may have some fantastic potential for content marketing, but if you want to take things one step further, you can make interactive infographics. This special medium mixes attractive design with programming, enhancing the appeal and further impressing your target audience. The difference between a common infographic and an interactive one can be like night and day, and it doesn’t have to be much more work. Take a look at what interactive infographics are capable of, and see how they could transform your business’s content campaign.
What Is An Interactive Infographic?
Image via Flickr by juhansonin
Rather than a solid, unchanging image, interactive infographics are hosted on a webpage and react to user interaction, such as the position of the mouse, clicks, and anything else that can be detected and responded to through programming. As you might imagine, they are just as much a feat of programming as they are of design and communication. Naturally, this can make them harder to load, but a screenshot with a link can still make them easily shareable on social media.
What makes interactive infographics so much better? The true answer is almost everything, but here are the highlights.
Greater Screen Efficiency
Because infographics are static, what you see on the screen is what you get, and usually, the viewer has to scroll to other parts to see all of it. Compare that to something like this Dove infographic taking a census of men’s hair, where clicking to different tabs will display the relevant information there. Without this system in place, this piece would be three times as long, at a minimum, and overly repetitive visually. Keep this in mind when considering infographic ideas.
If you have a great idea that seems challenging to create in standard form, interactivity may better organize the structure into something manageable.
Amazing Visuals and Animation
Another great way to use interactivity is to take into account the user’s scrolling position. For example, this Gannet Studio infographic does not require any sort of clicks or other direct action to see all the information, but as the user scrolls down, text fades into place, or visual elements appear in ways that better highlight their intended purpose. This may take a little more work, but the creative potential is fantastic, and could easily set you in a whole new league over all the infographics by your competitors.
Amazing Visuals and Animation
One of the best things about interactive infographics is the ability to set multiple, similar things on top of each other, allowing interactive decisions to dictate what floats up to the top. As an example, consider an infographic that uses geographically visualized data from American surveys. For each variable the person clicks, the corresponding graph of the United States will appear, with color values that show where that variable applies.
This can be amazing when you have a lot of information that can be placed within the same template. In general, find opportunities not to show the same sort of template more than once. Instead, use layers and allow the viewer to click to view whichever layer they wish. It may take a few examples before it really clicks, but this concept of layering is one of the biggest advantages of interactive infographics.
Implementing User Inputted Data
If you want to really impact people with stats and information on a personal level, try making an interactive infographic that asks for something to be typed in or otherwise received from the viewer. Allowing that to be submitted and processed through the infographic can be far more effective than animations over static data.
For example, an infographic on relative wealth could ask the user to type in their annual income. From there, it would use a number of formulas to provide unique statistics based on the inputted value, such as how many people in a certain country could live off that money, how high in the wealth percentile of the overall world population you are, etc. It doesn’t have to be so serious, either. A fun birthday infographic could ask for the viewer’s first name and birth date, providing any interesting facts from a pool of pre-loaded information.
Drop-Down Menus and Checkboxes
If you have an infographic idea that has a lot of potential options and variables for the viewer to work with and a relatively small amount of space dedicated to the output, you may want to make the options available in the cleanest way possible. Drop-down menus can cleanly show all the options from a long list, and checkboxes are great for toggling variables or choosing from any number of a small handful of options. When you don’t want the user to actually type something in, these choices are a good way to get complex input.
To better visualize this, imagine an infographic that calculates the average salary and similar statistics of a college graduate, depending on their major and education level. First, the user selects their major from a drop-down list, then checks a single-option box for the level of degree, and fills in some other options, ultimately resulting in an output of specialized data, all using variable graphic images to illustrate it. Images outputted from menus and boxes are far more personalized and appealing than a simple scrolling list of results on different majors, and it stops the infographic from ever getting boring.
Multipagination
Image via Flickr by psd
Approaching an infographic as if it were a slideshow is called multipagination, and it is one of the cleanest and simplest ways to add interactivity. Instead of making something scroll downward or to the right, the user has buttons to click forward or back to other “pages”. Each of these pages can then be interactive or animated as necessary. Combine this with the other advantages of interactivity, and you’ll have something far more engaging and accessible than a plain old slideshow.
Multipagination is great for infographics that would feel too long if you had to scroll through them, or would be too large and unwieldy if organized as a giant, single page. Pagination also allows for cleaner control over what the viewer sees, and when. No one can mistakenly scroll too slowly or too quickly if progress depends on clicking to the next page. For businesses that are more serious and professional in tone, a somewhat simpler approach, relying on multipagination for the most part, is likely the best choice.
Using Sliders and Gauges
Another handy trick worth considering is the use of variable sliders that the viewer can adjust as they like. For example, let’s imagine an infographic that shows examples of different degrees of sound amplitude. At the bottom would be a slider that the user could click and drag, leading to higher or lower decibel values. On the rest of the page, examples would show up depending on the range that the slider position is currently within. Sliding it higher would eventually show things like airplane jet engines or volcanic eruptions while sliding to the left would eventually show quiet things like whispers.
If you want to get truly impressive, you can also use the mouse scroll wheel instead of sliders. This is often done with infographics that involve scale, such as comparing the sizes of different objects. By scrolling the mouse wheel forward, for example, a zooming animation could move forward and show smaller and smaller particles of matter, while zooming backward would eventually show universes. In that case, the sliding effect is a much cleaner and more enjoyable user experience than what you’d get from multipagination.
Now that we’ve covered some of the fundamental design possibilities and advantages of making an infographic interactive, let’s conclude with some tips for your style guides and production process.
Keep It Simple
While the possibilities with interactive infographics are virtually endless, that also makes it easier to get carried away. Try to set some clear limits as you come up with ideas, such as file size, average time to finish reading the infographic, maximum time to load for the average internet connection, etc.
Making an interactive infographic too big will make it less friendly on mobile devices, which amount to enormous waves of traffic that will pass you by. In general, if a particular aspect of the infographic will make it less appealing or unusable on mobile, it’s not worth it. Feature creep is a common pitfall of programming, where more features are added to the intended final product, creating a mess. Work within the limits above, and you should be safe from feature creep.
Know What to Hide
Interactivity should allow an infographic’s user to only see what they need to at any given time, and nothing more. You can have fun with this rule by deliberately hiding things until some sort of condition is met, such as hiding the results of a survey until the user highlights their mouse over it. Requiring some sort of behavior before showing something will give you more control over how the infographic is experienced.
Hiding certain elements also intrigues viewers enough to keep reading, due to the curiosity of something not immediately visible, and thus it can help anchor their interest during a somewhat drier, text-heavy part of the work.
Study Kinetic Learning
Infographics already perform very well with data visualization, allowing ideas to stay in a viewer’s mind longer and more clearly than with other forms of media. Even when considering the union of visuals and text, making the audience do something in order to absorb the full information, with clear visual feedback, is even more effective. This is called kinetic learning, and it’s a topic that is well worth studying in these early years, while it grows more prevalent.
If growing fields like computer games are any indication, there’s no real limit to what you can create when you employ interactivity. Think about what specifically you want your infographic to do, on an interactive level, and study the logistics of that topic. This is not just busywork; understanding how to optimize design for mouse movement or clicking, or the ideal timing for transition animations after a click, will make all the difference between a finished product that feels “right” or not.
Take note: with a proper understanding of kinetic learning, you may also realize, before production, that the idea you’re thinking about doesn’t lend itself to interactivity after all, and that you should look elsewhere. You’ll save yourself plenty of time and end up only committing to the truly great interactive infographic concepts you and your team brainstorm together.
Get Familiar With CSS3
Because interactive infographics must be viewed through an internet connection, they function basically like little web pages. Because of this, some knowledge of how web pages are programmed visually, and how different things have to be done, is extremely important. Even if you won’t be involved in the actual design, the writing phase will go smoother when you understand what would be easier or harder for a designer to program.
You can design web pages with a number of languages, but for the most part, you’ll get the most value out of studying CSS, which stands for Cascading Style Sheets. CSS3 is the current standard and has been made easier and more powerful than ever. Even an hour spent following a basic tutorial of how CSS3 works will help you understand why a designer has issues with a certain feature that you want to appear in the infographic, and how to work around these limitations.
In addition to studying web design programming language, check out the amazing tools that have already been created by experts on D3js.org, a vast library of JavaScript data animations and graphics suited to CSS designers.
Interactive infographics combine savvy web design with the one-two punch of visuals and compelling text. While the added work to design them, coupled with the programming labor, will make them a bit more costly than ordinary infographics, they are a great choice if you’re more interested in making a small number of excellent infographics, rather than a large number of good ones. Check out the tons of different infographics with interactive elements that have already been made, to get an idea of what’s possible.
CopyPress writer
More from the author:
