NICAR16: Visualization designed for the human brain

Data visualizations must tell a good story. But even the best stories might get lost in the translation to a chart, infographic, or map and end up in the dreaded WTF Viz hall of fame. In a session called “Information design for the human brain,” BuzzFeed reporter Peter Aldhous and MediaShift metrics editor and curator Allie Kanik highlighted different ways of encoding data and shared their tips and tricks for deciding the appropriate visualization for a given story that can be easily understood by readers.

Understand the perceptual hierarchy of visual cues

“Data visualization is the encoding of data by visual cues,” Aldhous said. “But our brains do not treat those cues equally.” He outlined a spectrum of visual cues in terms of accuracy, with aligned length as the most accurate (think of a bar chart) and color hue as the most generic. In information design, different tasks will call for different moves up and down the perception hierarchy.

Our brains interpret different types of visualizations differently. Length tends to be associated with accuracy (bar charts), while color is less so.

Know the story you want to tell

Knowing the story you want to tell narrows down the options for your visualization. For example, column charts, dot and line charts, and line charts are all good for showing change over time. But each one accentuates different aspects of the story. A line chart shows the rate of change over time, a column chart shows more direct side-by-side comparisons, and a dot and line chart is the best of both worlds because it shows both the trend and allows for comparison of individual years.

Manik explained the importance of understanding the difference between sequential and spatial learning. She used a New York Times graphic to illustrate the use of sound and motion to perceive the proximity of finish times in different Winter Olympic sports. “Sound is understood by the brain in sequence,” Manik said. She also used animated GIFs as examples of conveying information in a sequential and repetitive way for learning and understanding. This is because loops help explain complicated lessons through repetition. (And they’re fun!)

Make compromises

Knowing what you want to illustrate with your data may mean making compromises. Aldhous showed the comparison of several counties regarding immunization in California kindergartens. With 58 counties, a dot-and-line chart is visually chaotic and overwhelming. A drop down the perceptual hierarchy uses color intensity to better represent the percentage of incomplete immunization across the state. In this case, the granular comparison is exchanged for an idea of the overall pattern. What is lost in terms of ease of perception is gained in the overview of the data. But you can get creative with additional graphics and visualizations. “You’re not limited to one visual encoding,” explained Aldhous.

While this image is accurate, it's much more difficult to decipher than the one below.

This graphic includes the same data as the one above, but is much easier to interpret thanks to smart design choices.

Don’t make our minds struggle so much

“Don’t make people’s brains work harder than they have to,” Kanik said. She and Aldhous both emphasized the importance of using color to both fit the data and make the interpretation of that data as automatic as possible. Choosing the right colors not only lightens the burden on readers, but it is also an important issue when designing for accessibility. Using tools like ColorBrewer ensures that your data visualizations also work for colorblind readers.

Keep it simple

While more complex visualizations like box plots may be good for those crunching the numbers and doing the analysis, they are typically too complex for readers. Supporting details and context are crucial for good information design. Annotations can go a long way for forming a story and guiding readers through the key points. Using white space gives time for the brain to process information.

Aldhous recommended sketching and experimenting with different encodings and visualizations in order to test them with different people. “They have to work instantaneously,” he said. He called for a shift from the mentality of “I’ve got this data, what’s the chart” to “I’ve got this data, what’s the story?” Because at the end of the day, the story is in the data.

About the author

Nicole Zhu

Undergraduate Fellow

Interested in visual storytelling and building products for news. Studying computer science and English at Northwestern.

Latest Posts

  • Prototyping Augmented Reality

    Something that really frustrates me is that, while I’m excited about the potential AR has for storytelling, I don’t feel like I have really great AR experiences that I can point people to. We know that AR is great for taking a selfie with a Pikachu and it’s pretty good at measuring spaces (as long as your room is really well lit and your phone is fully charged) but beyond that, we’re really still figuring...

    Continue Reading

  • Capturing the Soundfield: Recording Ambisonics for VR

    When building experiences in virtual reality we’re confronted with the challenge of mimicking how sounds hit us in the real world from all directions. One useful tool for us to attempt this mimicry is called a soundfield microphone. We tested one of these microphones to explore how audio plays into building immersive experiences for virtual reality. Approaching ambisonics with the soundfield microphone has become popular in development for VR particularly for 360 videos. With it,...

    Continue Reading

  • How to translate live-spoken human words into computer “truth”

    Our Knight Lab team spent three months in Winter 2018 exploring how to combine various technologies to capture, interpret, and fact check live broadcasts from television news stations, using Amazon’s Alexa personal assistant device as a low-friction way to initiate the process. The ultimate goal was to build an Alexa skill that could be its own form of live, automated fact-checking: cross-referencing a statement from a politician or otherwise newsworthy figure against previously fact-checked statements......

    Continue Reading

  • Northwestern is hiring a CS + Journalism professor

    Work with us at the intersection of media, technology and design.

    Are you interested in working with journalism and computer science students to build innovative media tools, products and apps? Would you like to teach the next generation of media innovators? Do you have a track record building technologies for journalists, publishers, storytellers or media consumers? Northwestern University is recruiting for an assistant or associate professor for computer science AND journalism, who will share an appointment in the Medill School of Journalism and the McCormick School...

    Continue Reading

  • Introducing StorylineJS

    Today we're excited to release a new tool for storytellers.

    StorylineJS makes it easy to tell the story behind a dataset, without the need for programming or data visualization expertise. Just upload your data to Google Sheets, add two columns, and fill in the story on the rows you want to highlight. Set a few configuration options and you have an annotated chart, ready to embed on your website. (And did we mention, it looks great on phones?) As with all of our tools, simplicity...

    Continue Reading

  • Join us in October: NU hosts the Computation + Journalism 2017 symposium

    An exciting lineup of researchers, technologists and journalists will convene in October for Computation + Journalism Symposium 2017 at Northwestern University. Register now and book your hotel rooms for the event, which will take place on Friday, Oct. 13, and Saturday, Oct. 14 in Evanston, IL. Hotel room blocks near campus are filling up fast! Speakers will include: Ashwin Ram, who heads research and development for Amazon’s Alexa artificial intelligence (AI) agent, which powers the...

    Continue Reading

Storytelling Tools

We build easy-to-use tools that can help you tell better stories.

View More