4 Tips for Designing Interactive Visualizations

Filed Under Mindjet

4 Tips for Designing Interactive Visualizations

September 11, 2012

We all love a good visual. Whether it’s an infographic, video clip, or image a well done visual can not only captivate and entertain your audience, but also engage and educate them. Today, I wanted to specifically talk about interactive visualizations. Interactive visualizations are a great way to tailor specific information to your end users. They enable readers to focus on interesting parts and details, to customize the content, explore large amounts of data. According to Lars Grammel, of the visualization blog, Visually, “At their best, they facilitate a playful experience that is way more engaging than static infographics of videos.”

So if interactive visualizations are so awesome, what are some good tips to help you design them? Well, you’re in luck. Lars offers up four tips to assist you in creating some interactive visualizations so cool that your audience might not realize that they’re actually learning something.

1. On-Demand Highlighting & Details

Having the ability to highlight data or specific details that you want to point out on-demand is a useful feature in almost all data visualizations. Sometimes it’s difficult to pick and choose “only the best” data for a visualization. Sometimes, there is just too much interesting data. This is where having the ability of on-demand data highlighting or details is so important. By using this strategy, you’re able to shy away from creating an overwhelming visualization while still conveying tons of important information to your viewer.

Take for example this Euro 2012 tournament graphic. It showcases tons of information but still manages to retain a fairly simple, unobtrusive layout. The key here is that this visual has rich popup windows. So when users click on games, groups, teams, or stadiums, a unique popup launches containing detailed information as well as providing links for further in-depth exploration.

2. User-driven Content Selection

According to Grammel, “A major advantage of interactive visualizations is that the content can be changed by the user.” Instead of focusing on how data will be displayed, the focus shifts on designing the template through which the various data sets are displayed. Not totally sure what I mean? Take a look at this interactive visualization by the New York Times. In it, users can select the household type by choosing a primary resident and adding or removing additional residents. When users change each piece of information, the visualization is then updated accordingly giving immediate feedback.

NYT Household visualization

3. Multiple Coordinated Visualizations

“A single graphical representation typically only shows a few dimensions at once and in a particular way.” However, “by assembling multiple standard parts and coordinating them, you can show different aspects of the data at the same time”, writes Grammel. Take a look at the How Riot Rumors Spread on Twitter visualization below. This interesting visualization uses multiple visuals to simultaneously portray various data at one time. The bubble chart section of the visualization showcases the different tweets, their relation to the rumor and their influence. Users have the options of playing the entire visualization as an animation or interacting directly with it. By having both a bubble and line chart, they allow the user to explore interesting points in time (i.e. to see the proportion of positive and negative tweets when the number of rumor related tweets starts to decline.)

How Riot Rumors Spread on Twitter

4. Show Data in Different Ways

One of the drawbacks of having multiple coordinated visualizations is that there is less screen space for each. If you are going to go down this route, Grammel suggests allowing the user to reconfigure the mappings from data to visual. He believes that this is a solid alternative that can help in maximizing the space available for your visualizations. If you look at this New York Times visualization on the flooding and damage caused by Hurricane Irene, you will see that they provide four different settings for users. When the user selects a specific setting, the data and the way it is displayed onto the visualization layer of the map changes. The map, including the path of the hurricane, and the story next to it provide a constant frame of reference.

NYT Irene Visualization

I genuinely hope that with these four tips your next interactive visualization is your best one yet. Are you experienced in creating these super cool visualizations? If so, we’d love to hear some of your tips in the comments.

Image Source: www.istockphoto.com