“Scrollytelling” is an online storytelling technique in which more and more content is revealed as the user scrolls down the page.
“Steppers” are also a storytelling technique, especially for stories based on a data visualization, in which the user clicks from step to step to see the story develop.
Scrollytelling Example
Stepper Example
I’ve been hearing a lot of people talking about “scrollytelling vs steppers” recently, sparked in part by Robert Kosara’s blog post “The Scrollyteling Scourge.”
Like the “which visualization is best” and the “are pie charts really evil” debates, these types of questions don’t really make sense to me.
It’s like asking “which is the best tool: a hammer or a wrench?” There is no way to answer that question unless you know what the person is trying to do. Or, it’s like asking “which is best: blue or orange?” You also can’t answer that question without context, and even then it might still be related to personal preference.
The choices we make in data visualization and storytelling depend on so many things. It depends on your data. It depends on the crux of the meaning in the data and the story that you want to share. It depends on your audience. It depends on how you expect your audience to consume what you’ve created. It depends on your goal. It definitely depends on context. It depends on if it’s a one-off, or a tool that people will use again and again. And, it even depends on aesthetics and what the experience feels like. It just depends.
In short, like everything else in data viz, it’s not the one tool is better/worse. Rather it depends on finding the best technique for the situation and being cognizant of potential strengths/weaknesses. This awareness can help us decide when to use one technique or another. Moreover, if you choose one, you could add other affordances to make up for its weaknesses.
Strengths and Weaknesses
context vs lightweight progression
Steppers provides very clear context and very explicit navigation.
Scrollytelling makes it easy to keep going in a very lightweight seamless way, without having to decide to click… and click again… and click again. Alberto Cairo refers to this downside of stepper-style interaction in his post “That Time When I Made Readers Click 50 Times in an Infographic.”
In a recent conversation, Shirley Wu and Miles McCrocklin summarized it this way: “scrolling is valuable because it’s a light, relatively frictionless way for a user to progress through content, while stepping is valuable because it gives context to the user of where they are and out of how many.”
More than just ease, scrolling provides continuity. There is a fantastic talk about the discovery that infinite scroll was a bad idea for Etsy. Having infinite scroll instead of pagination led to fewer clicks, fewer items “favorited”, and fewer purchases. No fun for Etsy, and possibly not as satisfying for users either. There are a lot of theories for why this is, but my favorite is that it’s hard to stop and take action when there is always something more. The end of a page or a stepper creates a point of decisions: do I click to the next set of pages? Or, do I take some other action like clicking, purchasing or favoriting?
Unlike Etsy, the goal in data visualization is often to keep the user engaged throughout. There is rarely a call to action, or it is a single call to action at the end, as in Let’s Free Congress. In these cases, there is value in the continuity of scrolling versus coming to a point of decision to either click ‘next’ on the stepper or do something else.
You could imagine other visualization scenarios in which the reader has a strong incentive to go through all the content, perhaps for a course. For these, perhaps having a purposefully moment to pause between steps would be an asset rather than a detriment.
who controls the pacing between steps
Secondly, steppers and scrollytelling differs based on who controls the timing/experience of the animation between steps.
On the one hand, steppers can offer very crisp/clean animation between steps because the movement between steps is discrete and is triggered. Similarly, the annotations can be very customized, because the steps are discrete. You know exactly what the user will see at each step, and there are no half steps. Or .87ths of steps.
While there are advantages to the creator having tight control over the animation between steps with a stepper, there are also advantages to giving the user tight control of the animation pacing via scrollytelling. Tony Chu’s A Visual Introduction to Machine Learning is a fantastic example of how valuable this can be.
Machine learning is complicated. And, as I’m walking through the explanation, I found myself often backing up slightly to slowly move through an animation. The animations meaningful, not decorative, and show how data is transitioning from chart type to chart type. By being able to effortlessly slow transitions down, speed them up, or pause, I can see (and feel) those context switches.
discrete vs continuous
Kosara argued that it’s bad practice to use “continuous scrolling through a story with discrete steps,” and pointed to this piece as a problematic example.
Whether this principle is right or wrong, I’d actually argue that A Visual Introduction to Machine Learning is not actually a set of discrete steps. Rather it is a continuous experience. The transitions are not the spaces between the steps, but are a meaningful part of the content.
There are other scrollytelling examples, like the New York Times’ price of Oil, in which the user controls when the animation is triggered via scrolling but not the timing of the animation. I love the immersive experience, but I actually wish that it behaved a bit more like the Machine Learning piece in which I could control the speed of the transition with the speed of my scroll.
what to do?
In terms of deciding which approach to use to drive an experience, you should think about what it’s going to feel like. Can you make it feel seamless and lightweight if it’s scrolling? Or make it easy to step if stepping? Do you want to give very clear and explicit context? Who should control the pacing? Are the transitions part of the content? Are you going to lose your users if you give them the choice to click ‘next’ or not?
Idea vs Execution
When evaluating the merits of scrollytelling, steppers, or other forms, we should separate the validity of the concept from the execution.
For example, scrollytelling can be hard to execute well. There is nuance in how to make the scroll feel fluid, be triggered, stop at reasonable spots, and feel natural. It’s also appealing to combine scrolling telling with computationally heavy animations or lots of large media images/videos. As discussed above, one of the greatest strengths of scrollytelling is how effortless it is. So, if it’s sluggish or unresponsive or confusing (“scroll-jacking”), then it’s no longer has the advantage of effortlessness.
For example, I love the idea of the Upshot’s How the Recession Reshaped the Economy, in 255 Charts. But, on my computer it feels sluggish and “heavy” which breaks the “easy” or “light” feeling that scrolling provides. But, if it felt as weightless as Tony’s Let’s Free Congress, then I think it would be delightful.
Scroll-jacking is also a challenge, as the browser might seem to take control of the experience away from the user which can feel jarring. Ironically, when I opened this article on Scrolljacking and Accessibility the text moved around several times before it settled. First a big ad opened on top, and then another big visual thing appeared from the bottom. It was the kind of thing in which I literally took my hands away from the keyboard while waiting for it all to settle down.
Maybe the key question is who should have the control over pacing/position, and if the form matches that.
For steppers, a downside can be the “cost” of clicking. But, based on execution, this can be very central and natural to the experience. In others, you might have to move your mouse or be tempted to scroll to written content below instead of stepping through.
Do I have to choose?
In a recent conversation, Kennedy Elliot said “throughout scrollytelling vs stepper discussions, I often wonder if there are ways to further hybridize the two.”
Looking around the internet, I found a number of examples in which people mash-up these two basic concepts, or address similar needs/challenges in other ways. In particular, there were a number of examples of adding context to scrollytelling or brining the stepper more into the center of the experience. But, there is likely so much more we could do.
Here are just a few interesting adaptations.
scrollytelling with chapters
To break up a very long article into manageable scroll-able meaningful chunks, Sarah Slobin used scrollytelling, but with chapters, in this Wall Street Journal long form article.
The footer is also a photo-based “stepper” or table of contents, with also a next/previous arrow showing previous and upcoming chapters.
Off-topic, but I also just love Sarah’s handwritten style font. The story is so much about the mix of real life children and hard core science/medicine, and it’s interesting to see this reflected in the design.
scrollytelling with a progress bar
Another Wall Street Journal article by Sarah heavily uses scrolling to tell the story, but provides a subtle black progress bar at the top to show you how far you’ve gone.
It also has steppers within parts of the multi-media article. Not sure it works totally seamlessly (at least it got a little sluggish on my computer), but it’s an interesting idea.
small multiples for static “stepping”
In print, there is no option for scrolling or stepping. But, Hannah Fairfield used annotated small multiples to step the reader through different parts of the story, in a sort-of small multiple time line.
forward/backwards stepper embedded
While many steppers are outside the visualization, this one is embedded. It only offers forwards and backwards, with a progress bar, so is a bit of a hybrid between a stepper and scrollytelling since you can’t skip steps.
scrolling with stepper dots for context
This New York Times article on helmets and motorcycle fatalities is navigated by scrolling, with a vertical indicator to show how far you’ve gone.
stepping down or sideways
In Stamen’s Atlas of Emotions (which I worked on), you can step “down” to the next concept … or side to side to get to a different emotion.
a video moves you through the story, but gives a chance to interact
In The Fallen of World War II, the video moves you through the story instead of having to scroll or click. But, it also pauses to give you a chance to interact on several occasions.
So… How Do You Do It?
Fortunately, whether you want to make a stepper or do scrollytelling, Jim Vallandingham has a tutorial to teach you how to do it: Steps for Building a Stepper Visualization & So You Want To Build a Scroller(OpenVisConf 2015 video here). Tony has also built a bl.ock example to share/explain his technique.
Want more?
Bostock’s How To Scroll
Adam Pearce’s graph-scroll.js intro
Amanda Cox’s 2012 Eyeo Talk including discussing steppers
Scrollytelling Examples, collected by Jim
PS. Thank you to Kerry Rodden for inspiring me to write this!
