Four insights from our first scroller

Fueled by a high number of mobile readers, scrollytelling is quickly replacing interactive graphics as a preferred method for telling complex data stories. Even though larger news outlets have used it for some time, few best practices have emerged and we are all still experimenting. In this article we are to keen to share four mistakes we’ve made in our first scroller and what we’ve learned from them.

Screenshot of the article as it appeared on NZZ.ch

The article was produced over a period of three weeks in a team of developers, journalists and designers. After the publication, we completed informal user tests and looked at the screen recordings of a few random readers. The process and the observation of our readers have led to four insights:

1. Prepare readers for what is coming.
2. You can’t design it without using it.
3. Text and visualisation need to show and tell the same thing.
4. Scroll-over seems to work better than scroll-under.

Prepare readers for what is coming

Screen recording of one reader struggling to use the visualisation.

It was painful to watch how many of the readers struggled to understand how the scroller worked at first. Some of them easily took ten seconds to figure out the mechanism. Even though we wrote that the story was «interactive», readers struggled to understand how and clicked on the graphic, expecting something to happen. After that, some of them tried to scroll sidewards (presumably to move through time, as time is often shown on the x-axis). Many only discovered that they needed to scroll down by accident.

Our resolution for the next time is to better prepare our readers for what is coming. This could be an animated preview of the article as recommended in Boy et al. or a simple «scroll down» hint at the beginning of the scroller.

You can’t design it without using it

Some of the early sketches that where used mostly to communicate and discuss ideas within the team.

As the developers immediately started to build a skeleton for the scroller, I started to design by plotting the data and sketching a lot of screens. It is well known among visualisation designers that if you start designing without the data, your design will most likely not work in the end. The same goes for interaction, when you design it without using it.

Screen recording of an early prototype. At this point we were quite sobered and started to develop the article with an even tighter feedback-loop.

When we looked at the first interactive prototype after a week of static prototyping we where sobered. The article didn’t work at all. Highlighted points didn’t capture the attention enough, the rising curves where only visible after the most important measures had already happened (e.g. a lockdown or financial aid), making you wonder why they were implemented in the first place. But worst of all, there was practically no relationship between the text and the visualisation except a common date.

Our resolution for next time is therefore to implement an interactive version as early as possible. So all project members (design, content, development) can try it out, learn and iterate.

We finally managed to address all of the points mentioned above. Most importantly, we’ve strengthened the connection between the text and the visualisation with two small changes: we’ve added text labels that indicated when related events happened in other countries to the visualisation. And we mentioned some of the numbers displayed in the visualisation at important points in the text.

This introduces the next insight: text and visualisation need to be in sync.

Text and visualisation need to show and tell the same thing

While observing readers we found that most of them first focused on the text and only used the visualisation for context. This is in line with what eye tracking experiments found: text labels are read before the graphics.

Typically, readers first referred to the text and only then turned to the visualization for context.

The visualisation often showed interesting additional information, for example related events, that was not mentioned in the text. With this, we effectively forced our readers to follow two storylines at once. Some of them mentioned that either this felt mentally straining or that they feared they had missed something important.

Our resolution is therefore to not show anything important or interesting in the visualisation that is not addressed in the text.

Scroll-over seems to work better than scroll-under

We put a lot of effort into keeping the texts short and the visualisation small so that both of them could fit on one screen without covering each other. On scroll, the text would vanish behind the visualisation on top. We imagined that this would be a superior approach to what is often used: text blocks that scroll over the visualisation and cover parts of it. But after seeing how people use the article, we wouldn’t do it the same way again. The readers had to constantly shift their attention back and forth between the visualisation and the text to not miss anything important.

Our resolution for the next time is therefore to make the texts scroll over the visualisation and give the readers time to look at the graphics, in the gap, while they scroll to the next text.

Even though the article worked well with our readers and was shared and praised in general, we hope that our next scroller will vastly improve on the first by adhering to these four resolutions.

Thanks go to Manuel Roth, Barnaby Skinner, Ulrich Schwerin, Philip Küng, Nikolai Thelitz, and Kaspar Manz for the great collaboration.