Designing for memorability

Including images to make information stick

I’m always happy to get inspiration for this Weekly Chart. (Yes, this is a call to send me your most interesting Datawrapper charts!) I’ve featured a few charts from other people as a Weekly Chart so far – for example this scatterplot about the relationship between ecological footprint and biocapacity by Edith Maulandi, or The Ninja Twitch subscription chart by Luke Christou.

But last week, my coworker Elana pointed me to a Datawrapper scatterplot with a feature I’ve never seen before: images in tooltips. The chart was created by Raúl Sánchez, a data visualizer for El Diario (an online newspaper based in Spain). Try it for yourself:

This chart was part of a bigger article, in which Raúl placed seven (!) charts (and some fun GIFs).

Chart Choices: Why images?

In these Weekly Charts, I talk a lot about design choices that can make our charts more readable or understandable. The decision to include images is not about that. The movie posters don’t increase readability – they increase memorability. I bet that if you hover over the best-rated movie, you’ll remember that movie better with the movie poster than without.

Memorability is harder to test for in a newsroom setting than readability. We can show co-workers our charts and get instant feedback on whether they get what it’s about. But we normally don’t wait for two hours or a day to then ask the same co-workers: “What do you remember about this chart?” …to then redesign the chart and wait and ask again.

But just because we can’t quickly user test for memorability doesn’t mean that we shouldn’t design for it. We can still care for memorability. And we start to understand what work: Papers like “What Makes a Visualization Memorable?” (PDF) have many suggestions. This paper didn’t research if people remember the underlying data of a chart; only the chart itself. But when it comes to chart memorability, images win: “Of our 410 target visualizations, 145 contained either photographs, cartoons, or other pictograms of human recognizable objects (from here on out referred to broadly as “pictograms”). Visualizations containing pictograms have on average a higher memorability score than visualizations without pictograms.”

So how did Raúl get the images in the tooltips, you ask? He created a column with links to the Amazon movie posters (like this one) and used the HTML code <img src="IMAGE-COLUMN" width="80px"> in the tooltip. Have a look for yourself: Hover over the chart at the top and click on “Edit this chart” in the top right corner. I’ll see you next week!

We have updated our Privacy Policy to reflect the new EU regulations. Please give it a read (it is written with the goal of clarity) and click here to accept it.