Just as earthquakes are (tangentially) related to presidential elections, so too are avalanches related to data storytelling and visualization.
Before I tell you how, though, let’s first define “scrollytelling.” Scrollytelling is a form of interactive storytelling that unfolds as you scroll and includes elements that are activated or triggered by the scrolling.
For instance, a recent example from The New York Times: “How the U.S. Compares With the World’s Worst Coronavirus Hot Spots.” This could have been a typical news story with copy and charts and graphs that you scroll past. But instead, it begins with a line chart titled “New daily cases per million residents, top 10 countries,” showing nine subtle gray lines and one bold red line, labeled “U.S.” This sets the context.
As you scroll, the story unfolds. The chart locks into place, but the copy scrolls up and lays out the arguments bit by bit, a sentence or two at a time. And as each bit scrolls past, the chart updates, highlighting and labeling different lines, changing the scale and reference countries shown. Classic, simple, effective scrollytelling.
“Mom, where does scrollytelling come from?” Before scrolling, there was something else. So let’s start at the beginning.
The earliest computer interfaces were driven by punch cards. Then came terminals where you typed one line at a time and could arrow up and down, but it wasn’t easy to see large amounts of information. The Graphical User Interface took off in the ’80s and scrolling became the primary mode to move around in content.
When the web came along, the common wisdom was to “keep everything above the fold,” meaning on the first page, or you risked losing your audience. So the norm was to create shorter content and make people click to get more. That is why so many websites back in the day had multipage click-through experiences. (Nowadays when you see this, it’s more about driving clicks and advertising views for web publishers.)
But even in those early days of the internet, this wisdom was challenged. “Our research shows that … fewer, longer pages may be the best approach for users,” wrote user experience expert Jared Spool way back in 1998. As he elaborated with me last month, “If you want me to keep clicking 45 times, that’s a pain in the ass. Scrolling is easier.”
In other words, scrolling works. We expect it, it’s easy, it’s become our default mode to consume content, we’re more than happy to scroll and scroll and scroll to keep the good stuff coming. So of course, scrolling can and should be at the heart of a great user experience.
So what does this have to do with avalanches? I suspect that if you were in web design or UX design in 2012, you already know the answer to that question. If you’re a skier or from Washington State, you may not know the answer, but you will know the reference.
The snow burst through the trees with no warning but a last-second whoosh of sound, a two-story wall of white and Chris Rudolph’s piercing cry: “Avalanche! Elyse!”
So began a story called “Snow Fall: The Avalanche at Tunnel Creek,” published in the Sunday New York Times Magazine in December of 2012. It was an epic six-part story that included several new things we had never seen online: full-screen background videos, parallax scrolling effects, and scrollytelling. It was well-written, beautifully designed, and completely captivating. It won a Pulitzer Prize and a Peabody Award.
I was in web design at the time, and can tell you that pre-Snowfall, the ask from a new client was always “we want a website like Apple” (simple, clean, intuitive). After Snowfall, Apple was still held up as a model, but let’s just say that Snowfall was immediately added to the conversation as a verb — “we want to Snowfall our site.” In fact, if you look at the Apple site today, you could argue that it has been completely Snowfalled!
What’s incredible is that that piece was published eight years ago. Trends don’t last eight years, right? And yet, scrollytelling, which “Snowfall” introduced, is still going strong. Hell, full-screen video backgrounds and parallax scrolling effects (which is when the background of a page moves at a different speed than the foreground as you scroll) are everywhere too.
By 2015, scrollytelling was EVERYWHERE. The term had been coined and was being used widely, Jim Vallandingham gave a great talk at OpenVizConf about how to do it, and Bloomberg’s “What is Code” (another epic longform piece with scrollytelling features) was published, leading to a lot of debate and hand-wringing.
This piece specifically, and the proliferation of scrollytelling more generally, caused some people to wonder whether it was all too much–both the growth of the use of scrollytelling across the web and the overuse of “eye-candy” effects. People were also asking themselves questions like, “Should we all be doing things like this now?” And, “How can we institutionalize this?” And “Why would we?”
Many started to wonder if we had arrived at “peak scrollytelling.” Some people’s open questions turned to backlash. One of the most famous expressions of this backlash came in Robert Kosara’s aptly titled blog post, “The Scrollytelling Scourge.” In it, he laid out some of the ways scrollytelling goes wrong, including common misuse (in particular, “scrolljacking,” which is when scrolling causes unexpected behavior and is a widely accepted UX faux pas), awkwardness, and misalignment between the form and the story being told. He and others have argued that scrollytelling may lead to some eye-catching visualizations in the Times and elsewhere, but is often buggy, inaccessible on older devices, and distracting from the story at hand.
“If we need to create a moment of pause or if the goal is to allow comparisons and/or show change over time (showing statefulness), then it can be very helpful.”
—David Sleight, design director at ProPublica
Inhindsight, 2015 was a false summit. Today, it really feels like we may have actually, finally arrived at peak scrollytelling. It’s still all over the Times, is used left and right by everyone in data storytelling and visualization (including me), and is still very much a key feature of many award-winning data- and information-driven stories.
Why has scrollytelling ̶l̶a̶s̶t̶e̶d̶dominated the way it has? Like Spool pointed out, it’s just a good default mode for navigating content. But it’s more than that.
“If you put a neon sign on data, people pay attention. There are lots of ways to put neon signs on data. Scrollytelling is one of them,” data visualization researcher and practitioner Stephanie Evergreen told me. In other words, it’s about engagement.
You need to capture your audience’s attention and point them to what’s important. And scrollytelling does a great job of this — bringing content to life at just the moment you’re ready for it, as you’re consuming the relevant information.
There is a ton of research on humans’ limited ability to retain information, cognitive load, and how that affects processing information. For instance, we can process three to five chunks of information but we know that drops even lower when we’re stressed and/or busy. (Pandemic … hello!) Scrollytelling helps solve this problem, Evergreen says, because it’s about spoon-feeding our audience. “It sounds like infantalizing them but it’s not,” she adds, saying we need to understand them and their needs, and acknowledging our cognitive limitations allows us to choose methods of content delivery to maximize our results.
Even Robert Kosara, who wrote about the “Scrollytelling Scourge,” has started to come around. “There’s a lot less jerkiness and scrolling just plain not working right than there used to be,” he told me recently. “I still believe that for pieces where the story is told in discrete steps, the interaction should be discrete. Like maybe tapping the screen to go to the next step, or a single swipe per step.” So while maybe he wouldn’t call scrollytelling a “scourge” any more, it seems safe to say he still isn’t exactly a fan.
David Sleight, ProPublica’s design director, shared that his publication is “neutral to positive on scrollytelling — but it’s a question of where and why. If we need to create a moment of pause or if the goal is to allow comparisons and/or show change over time (showing statefulness), then it can be very helpful.” He pointed to the Bloomberg “What Is Code” piece as “an all-guns blazing example of cool whiz-bang stuff.” Work like that and Snowfall, he suggested, should be embraced “like your R&D lab for everyday articles.” They’re opportunities for discovering interesting things that can be applied, but maybe shouldn’t drive every decision, every piece, going forward.
The New York Times is largely credited with inventing scrollytelling on “Snowfall” and “now they have a hammer so everything is a nail. But it’s just a hack to tell stories in a way to take advantage of the the DOM. But is it the right and best way to tell the story?” asks Spool.
It’s a fair question.
Whither goes scrollytelling, in UX generally, and data storytelling specifically? Will it always be this widespread and popular?
“All trends are pendulums — it’s just a matter of how long it takes for the pendulum to swing. I don’t think we’ve hit peak yet because it’s not point-and-click easy — there is no WordPress plugin yet. Once that happens, we’ll have a year at most before the backlash,” says Evergreen.
There actually are plugins that create limited scrollytelling effects — animating in gallery images as they scroll into view. Even with these plug-ins, it’s early days on the tools front. Tableau and Flourish have “storytelling” features that are clickable steppers, and Flourish just recently published a short piece explaining how to turn this into a scrollytelling experience. And if you’ve been paying attention, Flourish almost single-handedly killed racing bar charts by making them so easy to create — they’ve been banned on Reddit’s DataArt subreddit and ALL FLOURISH VISUALIZATIONS have been banned on the Data is Beautiful subreddit simply because of the viral explosion of racing bar charts! Where goes Flourish …
This is the power of the democratization of data visualization tools, which Evergreen alludes to. And she’s not alone. Our own Elijah Meeks has talked about the “Third Wave of Data Visualization,” which includes the convergence of the ways we communicate with data and the tools we employ. This is made possible, in part, because the tools are in more people’s hands and they’re getting easier and easier to use. And Diana Yoo, data visualization head at Capital One, talks about the “Democratization of Data” to describe the incredible opportunity all organizations have when all of their people have access to data and can consume and even create visualizations that empower them to make better decisions.
Sleight doesn’t think this will necessarily lead to a backlash. ProPublica is building some scrollytelling features into their CMS—things like full-bleed photo title openers with crossfades, scrolling modules with triggers for stepped graphics. But maybe a coder will still have to step in to program that graphic to react to the scroll triggers. And, he points out that CSS handles a lot of the scrollytelling effects already — sticky positioning and transitions can be done much more easily now than when Javascript had to do all the heavy lifting, contributing to that democratization process.
“We’re putting more burden on the user,” Spool says, “and that’s not always a good idea.” He compared scrollytelling to video where all decisions are made by an editor about the pace and extent of an experience. What I think he’s getting at is that people love passive experiences like video and animation. We don’t want to drive the story, we want to experience it. You may remember the predictions from the early dot com days about the proliferation and eventual dominance of interactive stories where users could choose their own plot pathways and endings. That never took off. It turns out we didn’t want it!
Sleight adds that there are cross-platform issues to consider as well. He has to pay close attention to how a piece will perform on Apple News’ and Flipboard’s proprietary interfaces. This poses technical challenges that could prevent scrollytelling from taking over everything OR, alternatively, perhaps those platforms will adopt scrollytelling as a norm.
“The thing is, scrollytelling isn’t about the scrolling anyway. It’s just a very realistic content consumption experience that stems directly from how we interact with computers.”
Ithink scrollytelling is here to stay. Humans crave realistic experiences. Parallax is still popular, despite overuse and resistance in the early days, because it mimics reality. Things that are closer seem to move at a different speed compared to things that are far away. So seeing this effect feels “right” — even when it’s wrong (the background scrolls faster), we get a momentary “Ooh, interesting” moment.
The thing is, scrollytelling isn’t about the scrolling anyway. It’s just a very realistic content consumption experience that stems directly from how we interact with computers. We can only consume one thing at a time. As we consume chunks of content, we want relevant supporting information in context. Scrolling is the way we place this content in front of ourselves for consumption.
Spool was right to point out that humans love passive experiences like video. But I would argue that we get interrupted by the phone ringing, and we sometimes don’t have time for a five-minute linear experience. We want to skip ahead, and we want to see what we’re skipping, not just blindly jump ahead 60 seconds hoping for the best.
Scrollytelling is actually a perfect mimicry of video with the added ability to slow it down or speed it up, all while seeing every frame along the way. It’s like highly performant video scrubbing where we don’t miss a beat. Things happen in a linear way, over time, one thing at a time, just like reality but better, because we have some control over the pace and direction.
I have to admit that I love scrollytelling — I’m completely biased. But I was curious to understand how others feel about the technique. So, in addition to interviewing the experts quoted above, I ran a (not) HIGHLY SCIENTIFIC survey of Data Visualization Society members on the internal DVS Slack channel, asking “What do you think about scrollytelling?” Out of 71 responses, 80% of respondents chose “pretty cool” or “LOVE LOVE LOVE.” 14% chose “meh”, 6% chose “not enamored” and just one person chose “KILL KILL KILL”. You can debate the likert scale options — they were snarky, but fair!
Scrollytelling done right adheres to the UX “principle of least astonishment” created by Mike Cowlishaw, which says “if a necessary feature has a high astonishment factor, it may be necessary to redesign the feature.” “Snowfall” may have astonished readers when it came out, but today, most scrollytelling no longer provokes the same wonder. It is the most natural thing we can do. When something comes to life as we scroll, it’s “engaging” and “interesting,” sure, but not “astonishing.”
Now, if and when hardware changes and scrolling is no longer the way we consume content, maybe scrollytelling will fade away. Say the “next big thing” is augmented reality (we’ve been saying this for a long time, I know). Maybe as you move through the world and consume content, events will be triggered, content will light up and animate and come to life — your movements will automatically trigger “a neon sign on it,” as Evergreen phrases it — but scrollytelling will live on, maybe renamed “walkytelling” or “lookytelling” or something hopefully even more memorable.
Bill Shander has been a data visualization practitioner for 25 years and also teaches data storytelling and visualization workshops to organizations around the world, and teaches online classes on LinkedIn Learning.
