Building Nonlinear Narratives for the Web

The Tiv people of Nigeria tell a story about the early world, when things were different. It’s about Aondo, the Sky, and how he lost his relationship with humans. When the earth was still new, Aondo was close enough that people could stretch out their hands and touch him. For many years, he and the humans led a quiet existence, and everyone went about their business.

One day, though, everything changed. Aondo sat in his place above the earth, watching people come and go. And then: out walked the most beautiful woman he had ever seen. Aondo was fascinated by her, so he crept closer—too close—to watch her cook. As she was cooking, all of a sudden, she accidentally struck him in the nose.

Aondo was hurt and embarrassed, so he retreated. Farther and farther, until he was far above the earth. That is why, the Tiv people say, you cannot touch the sky.

I’m Tiv, and I grew up with fables like this. In 2011, I started Pixel Fable as a way to tell these Nigerian stories digitally. That story about Aondo, “Why the Sky Is Far Away,” was the first one I designed and built. I used augmented reality to make the animations feel more interactive (along with some wonderfully spaghetti parallax JavaScript). But the story was still a single HTML page, told from one perspective, along a linear timeline. My translation from oral tale to web page was too direct—I hadn’t captured the multifaceted ways a story could exist online.

For instance, I could’ve built two versions, based on the same HTML, split into the woman’s point of view and Aondo’s. The competing narratives would frame readers as detectives, exploring and contrasting details to figure out the whole tale. Or, I could’ve incorporated data visualizations to reflect Aondo’s mood: by combining weather data like thunderstorms and temperature with a “Sky Mood Indicator,” I could’ve designed Aondo’s emotional state as a separate, visual facet.

Either route offers a way to twist or fragment the story, to add layers to the central narrative—to transform the original Tiv tale into a nonlinear, more nuanced, and linked experience, much closer to how the web itself works.

I want to do that for Pixel Fable, and I want to show you how to do it, too. That means venturing beyond our basic scrolly-telling. But first, let’s take a deeper look at what nonlinear stories do.

The role of nonlinear narratives on the web#section2

The web operates in ways that can conflict with our traditional view of what a “story”—with a set start, middle, and end—is. Content is chunked, spread across various channels, devices, and formats. How do we define story lines, characters, interactions, and the role of the audience, given this information sprawl?

Cue nonlinear narratives. They’re collections of related content, organized around a story. They comprise video, text, links, audio, maps, images, and charts. Their chunked, compartmentalized nature gives them incredible flexibility, and makes them the perfect vehicle for how we explore online, jumping from one piece of information to the next.

Even though they don’t necessarily follow classic story structure, they still have many of the same parts: heroes, villains, locations, plots. It’s how these are developed and connected that may seem unexpected. One of nonlinear narratives’ superpowers is how they let you build on and refine them over time. For example, Vox’s cards and story streams help us aggregate information on complex news stories by posting relevant bits as they develop—whether it’s a Q&A on the human exploration of Mars that provides context in bite-sized form, or a stream of more info on a disease outbreak. These updates over time allow designers and creators to react to audience feedback.

Nonlinear narratives also offer audiences more agency. People want to learn, be surprised or intrigued, or entertained—and nonlinear stories prompt participation. Their fragmented structure needs an audience; without readers or viewers, the narrative cannot be experienced as a meaningful whole. In turn, this forces us to design stories that work with, not against, the fluid nature of the web (or what Frank Chimero calls the “edgelessness”).

Say you have an idea for one of your own. How do you link those disparate elements in a cohesive way? You can start by choosing two or three parts and combining them into a larger block, which then forms a core part of your digital story. This block can be displayed anywhere, anytime, as the story demands. For example, one Pixel Fable story in the works pairs a Google map with images and text to define key places (like the birthplace of a mad baddie) or give the factual history of a setting.

So those are the bones of a nonlinear narrative, but they come in a range of forms. Let’s take a closer look.

Types of nonlinear narratives#section3

This format isn’t exclusive to the web. From Scheherazade’s ancient tales, which weave together multiple story lines, to the movie Memento, which mimics hypertext structures, we see plenty of effective nonlinear structures outside the internet. The same is true of Pixel Fable’s inspiration—but what started hundreds of years ago as interlocking oral histories takes new shape online.

As we examine these new forms, I encourage you to note the story’s structure, how elements are linked, and how they grab your attention. You might ask yourself:

• What does the site or app ask the audience to do? Look at the UI and copy: is the experience active (prompting visitors to do specific online/offline actions) or passive (asking only for their attention)?
• How do elements relate to one another? Do they reinforce the central story, or do they offer a counterpoint? What content types appear to be “natural fits” with one another? How are elements ordered—do the interactions between pieces of content create a sense of rhythm?
• What’s the smallest collection of content you could see and still understand the narrative?

Extra-narratives#section4

Extra-narratives combine one central story or topic with lots of tangents. National Geographic’s “The Serengeti Lion” features a central theme: life for the Vumbi pride. Videos, images, and commentary are branches that enrich that story, allowing you to see—and hear—life on the plains, offering things like aerial views from a drone or the sounds of the pride crunching on zebra bones.You can quickly hop from branch to branch via contextual links, scrolling, or an index.

Disjointed narratives#section5

While disjointed narratives revolve around a common theme, the connections are much looser. They’re typically a series of chaotic vignettes. Documentaries about large, complex places are a good fit for this kind of narrative, and “Lagos Wide & Close” does this excellently. With a variety of content blocks forming multiple perspectives, interviews, and locations, the site evokes the dusty, jumbled vastness of the Lagos metropolis, both up close and from afar. The city acts as the central character, and the different interviewees and locations become vignettes about a wild megacity.

Parallel narratives#section6

As the name says, these show two stories happening at the same time, often with competing goals and conclusions—which makes parallel narratives ideal for contrasts.

Moon, by UNICEF, follows the parallel lives of two kids. Each wakes in the morning and goes about their life: one ends up working in a factory for a living, while the other goes to school and becomes an astronaut. After you enter a short code to link the desktop site to your smartphone, your phone becomes a controller. When you rotate your phone, you flip the desktop screen 180° to watch that child’s life unfold.

It’s a clever use of tech, and the story itself makes a clear point about poverty, wealth, and educational inequality. (I know, there’s a particular irony in interacting with a story about poverty on two expensive digital devices.)

Database narratives#section7

These are perhaps closest to the types of work designers and developers do every day. Database narratives use metadata, ARIA roles, and tagged content to auto-generate content. They’re most commonly deployed in data visualizations, where a story’s meaning often comes from the explanatory framing (via copy) and juxtapositions of data.

For instance, the subway-inequality map from the New Yorker builds an elegant, interactive narrative on wealth disparities, out of seemingly impartial census data. Visitors can click to see how income varies—sometimes dramatically—across subway lines and stations, and their neighborhoods. Database narratives are an effective way to convey a lot of data in a small space.

Micro-narratives#section8

Sometimes we want to tell small, self-contained stories that, at most, may only share an interface with other micro-narratives. The focus is on the individual story—you can view micro-narratives on their own, with no loss of reference or concept. This structure is especially useful for user-generated content (like collections).

The site Hi does this wonderfully. It’s a platform for capturing and writing about different moments in real time. Visitors explore stories of photos and text—bookended with optional private comments from readers—on places all over the world. Each story is also added to a Google map; this extra layer of shared functionality gives the site a more cohesive feel, while still allowing each story to stand on its own.

Okay. We’ve covered the building blocks of your narrative toolkit. Now, let’s consider what really makes any of them truly meaningful: your audience.

Audience participation and feedback loops#section9

Digital narratives depend heavily on the audience experience. With so many potential entry points to your story, you must define the role you want the audience to play. One constant source of tension is who controls the story: you (as the author), or your audience? Whatever narrative form you’ve chosen, it’s something you’ve designed to achieve a specific goal. Your audience, however, probably won’t be content to sit in front of a screen and follow you around. Your visitors want the ability to choose their own paths—what they see, and the order in which they see it—into your content blocks. It’s up to you to design situations and narratives that take this into account.

Happily, we have a few strategies to help you do so—and balance the tension between author and audience.

Encourage exploration#section10

This approach draws on nonlinear narratives’ strengths—meaningful tangents over time. Create a framework with plenty of content branches, leaving your visitors free to choose what most interests them. Discoverability is key here; your job is to offer enough guidance so visitors know what to do, and then get out of their way. Clearly mark possible routes with instructional labels, animations, and even color-coding. Provide menu structures that prioritize choice over simple information retrieval. For example, group similar narrative blocks in a large slideout menu, or pair questions and thumbnails, instead of relying only on text links. As you develop more content, add it to the framework as a new offshoot to explore.

For instance, the Guardian’s “Seven Deadly Digital Sins” features an incredibly complex set of stories and dispersed content. The loose layout, which displays the sins in grouped thumbnails, and the slow, measured music encourage people to experience the narrative at their own pace.

Prompt the audience to play a part#section11

Or, give your visitors even more agency. Build them into your story. With this approach, you take your framework and then set parameters for audience contributions.

In 2001, the Guardian reported a sad, gruesome story. The body of a man fell out of the sky and landed in the parking lot of a home-goods store in the UK. It turns out he was a Pakistani stowaway who hid himself in the wheel well of a Boeing 777 out of Bahrain. Long since frozen to death, he had fallen out of the wheel well as the plane landed.

Some years later, Kate Pullinger and Chris Joseph created Flight Paths, based on this and similar stowaway events. After devising a setup around the life of a fictional stowaway named Yacub, they invited about 70 readers to add images, video, and text to what they called a “networked novel.” They continue to develop the narrative, most recently with an API, which packages and publishes that nightmarish story in a variety of formats.

It is a great example of how an internet community created an extra-narrative in bits and pieces. Your audience may feel more invested in a story they helped construct. However, it’s important to be clear about what your participants can expect. You’ll want to model the types of content you’re most interested in receiving (include specific prompts, give sample copy, etc.) You’ll also want to work out questions of attribution, ownership, and payment beforehand. For Pullinger and Joseph’s experiment, some potential contributors rightly asked if Flight Plans would be “monetized” and, if so, what was their work worth? Make sure you supply those answers in your terms and conditions.

What is vs. what if#section12

In all this, understand the difference between what is and what if. When I first started Pixel Fable, I wanted the audience to see my story, characters, and action through my eyes. I wanted to determine what IS. But the internet asks us to give the audience control over essential aspects of the story so they don’t lose interest and move elsewhere. Remixes are another way to keep visitors entertained. By designing narrative blocks for the audience to repurpose, we enable users to ask themselves “what if”—which results in new fan art and digital tangents we may never have dreamed of. It’s a powerful thing.

In Midsummer Night’s Dreaming, a collaboration between Google and the Royal Shakespeare Company, the audience was invited to participate in a live performance. Using Google+ as the digital “stage,” people could post videos acting out their favorite scenes, costumes, observations, and fan art. They could imagine alternate scenarios and endings for Shakespeare’s famous characters. The project let anyone who loved A Midsummer Night’s Dream answer the question, “What if I were center stage?”

Creating narrative goals (friction points) and narrative threads#section13

So, you’ve designed collections of content for a story, perhaps even split them across sites or platforms. You have specific events you want the audience to interact with, ones that deepen their experience. Although the entrances and exits to your story are largely up to the audience, we can help their journey by defining clear narrative goals, or points of friction: places your audience will be compelled to stop, explore, and interact with key narrative elements.

What does an effective narrative goal look like? Perhaps it’s a climactic event, fascinating images and videos, or even a puzzle to solve. What part of your experience will make people look further and fit some of the disparate pieces together? In the New Yorker’s inequality map, one primary goal is getting the audience to find their home station and discover the median income. Finding their neighborhood, or a place they recognize, is a task that forces the audience to slow down and view the data. The resulting visual contrast, in this case (relative) wealth and poverty, becomes the point of friction.

Narrative threads are the pathways between your goals; they move the audience from one content block to another. A thread can be a simple link between two HTML pages, or perhaps a more complicated geotagged location on a map. In “Lagos Wide & Close” and “The Serengeti Lion,” we see these threads displayed as UI. The forward and back buttons, the location-selector menus, and other interface elements act as connectors. On the Hi site, the categories beneath each captured moment allow visitors to jump from story to story.

A place for nonlinear narratives#section14

The internet continues to grow. As we design larger and more diffuse experiences, we need to make sure they are connected and accessible to our audiences.

My experience with Pixel Fable has forced me to look beyond traditional story formats. I know the stories I want to tell. That’s where these ideas on nonlinear narrative come in. I can identify the content chunks I want, the points of friction and participation for the audience, and the way to use narrative threads to link them—all to create immersive, nuanced digital experiences.

Throughout this article, we’ve looked at specific concepts and structures that you can adapt for your work. Entertain, surprise, and above all, engage your audience—encourage them to ask what if, as they navigate the worlds you’ve spun.