The House That Fish Built
By: Josh Kalven
Tags: Publishing, Media, Storytelling

First, a list:

Now let’s rewind a bit.

In March 2012, Robin Sloan introduced us to a “short but heartfelt manifesto about the difference between liking something on the internet and loving something on the internet.” He called it “Fish: A Tap Essay.” As with all of Sloan’s work, the writing was fun and thought-provoking. The mode of delivery, meanwhile, felt both new and familiar.

Fish, in the wild

Sloan distributed Fish as a standalone iOS app which, when opened on your iPhone, forced you into landscape mode and asked you to tap the screen to move forward. With each tap, a new sentence or fragment of a sentence would appear, along with an accompanying visual (most often just a solid color background). By controlling the progressive reveal of information, Sloan managed to establish a cadence — something we generally associate with the spoken word, not the written one.

The constant variation also created an undercurrent of suspense. Tapping forward felt addictive and satisfying: What would he do/say next?

Me, the next day

Around the time Sloan published Fish, I had been wanting to move my explanatory storytelling studio towards a new visual medium. Newsbound had produced several video explainers earlier that year — on wonky subjects like the filibuster and the federal budget process. They had attracted healthy traffic, but our user testing had revealed a pacing problem. Everyone loved the accessible illustrations and animations, but more-informed viewers often complained that our narrator (yours truly) spoke too slowly. Newcomers to the subject matter felt the opposite — that it was too much information too fast.

I’d already entertained the idea of a self-paced, slideshow-esque format, but worried that requiring the user to continuously click or tap their way through a narrative might be too tedious. Then I found myself standing in line for a sandwich at Pal’s, happily tapping my way through Fish.

I was bewitched by this medium — and emboldened.

In the days that followed, I created a prototype in Keynote (a chronological explanation of the Trayvon Martin story). Using their iOS app, I could simulate the “tap-essay” experience on an iPhone. Over the next few weeks, we tested that prototype with a series of users. They took vastly different amounts of time to complete the explainer, but stuck with it nonetheless. Most of them complimented the format, telling us that they had “lost themselves” in the story and expressing surprise when we showed them a text-only print-out of the 1,500 words they had just consumed in bite-sized pieces. (“I would never read something that long!”)

The Newsbound team continued to refine the reading experience and started building our own web-based technology to power it. Around the same time, Sloan wrote an essay for Contents reminiscing about Hypercard stacks and predicting their triumphant return:

“We will start to make stacks in earnest again. We will develop a new grammar for this old format. We will talk about rhythm and reveals and tweetable cards. We will know how many cards an average person can tap through in one sitting. We will know when to use stacks…and when to just scroll on. Twenty-five years later, we will prove the hypertext researchers wrong: cards are pretty cool after all.”

When we published our first embeddable, public-facing explainer in this format (on the history of political conventions), we called it a “stack.” Internally, we started referring to our software as “Stacker.”

Newsbound has since published over 75 stacks — some of them original works, some client projects. Our embeddable player has appeared on the websites of The New York Times, The Washington Post, BoingBoing, The Atlantic, Upworthy, as well as in Bill and Melinda Gates’ annual letter.

Over this period, we’ve gathered granular analytics (all those clicks and taps are trackable, after all) and observed remarkable engagement rates. For instance, out of the 50,000 people who started reading this Gates Foundation stack on the history of international family planning, 65 percent finished it, spending 4–5 minutes on average. Over 80 percent completed this OZY stack on Iceland’s marriage norms. The minimum wage explainer we produced in tandem with KQED has been launched nearly one million times.

This year, we released Stacker as a platform to a beta group of writers and designers. They are now creating their own stacks and, every week, we are onboarding more people from the waiting list (which has grown to over 400).

About that new grammar …

Stacker is just one branch splintering away from Sloan’s Fish app. As the list above shows, we’re not alone. NPR’s visuals team, The New York Times, Facebook, CNN and others are experimenting with this medium as a way to tell certain stories. Each is approaching it with their own tenor and flavor. The techniques vary. But a common strain runs through it all.

In a blog post on Source dissecting his team’s approach to picture-driven content, NPR senior interaction designer Wes Lindamood categorizes pieces like Demolished as “sequential visual stories” and acknowledges Fish as a source of inspiration (along with the work of Scott McCloud and Frank Chimero).

He goes on to provide one of the best descriptions of the medium I’ve ever read:

“Sequential visual stories are self-paced experiences controlled through a minimal interface. Like a slideshow, ideas in sequential visual stories are presented in a linear and visual way — but unlike a slideshow, which treats the image as the dominant element, sequential visual stories mix multiple forms of media. A key advantage of this format is that it can direct a user’s focus in a way that will have editorial impact, without taking control away from users over the speed in which they experience the story. Through revealing moments over a sequence of screens, we can emphasize key ideas, offer surprise and juxtaposition. And because users have control over the amount of time the spend on each screen, they can linger on images and ideas that are most important to them.”

I can’t speak for the other outlets and companies experimenting with this medium, but at Newsbound we’ve still struggled with the “new grammar” that Sloan referred to back in 2012. While working on a stack, we sometimes refer to the atomic unit as a “frame,” other times as a “slide,” other times as a “click.” Lindamood apparently calls them “screens.” Before Betaworks shut down Tapestry (which allowed anyone to create a Fish-esque tap essay), they used the term “page.” And Sloan has called them “cards.”

When it comes to the broader label, we’ve noticed that “stack” doesn’t always … stick. Just look at the wide-ranging terms our readers use to describe our content:

“filmstrip”

“infographic”

“slideshow”

“interactive”

“powerpoint”

“deck”

“picture book”

Take a peek at the tweets emanating out from one of NPR’s sequential visual stories and you’ll see something similar happening, with references to “presentations,” “slide decks,” “slideshows,” etc.

Is this actually a problem?

I don’t know. I go back and forth on this question.

On the one hand, I believe this a powerful medium for all the reasons (and more) that Lindamood and Sloan lay out. I know there are certain subjects and certain readers for whom it is the ideal platform. I want to see it become as pervasive and familiar as the video or the infographic. And perhaps — perhaps! — if we had a common shorthand for this style of storytelling, adoption would spread faster.

On the other hand, I’m not sure you can force such a thing, no matter how hard you try.

Still, I’m interested to hear from the other writers, designers and developers experimenting in these waters or contemplating it. If the term “slideshow” were prohibited, how would you describe this medium to your boss, your loved ones, complete strangers? Leave a response below or email me at josh (at) newsbound (dot) com.

And if anyone has more examples of recently-published stories that fall into this bucket, please send them along (I’ll then update this post with a longer list).