A List Apart


Beyond Usability and Design: The Narrative Web

The web is currently torn by two strong forces, seemingly irresistible and irreconcilable. On the one hand, usability and interface engineering argue for simplicity, consistency, and clarity –  for a starkly functional minimalism. On the other, emerging web standards and technologies nourish a continuing efflorescence of new approaches to web design. On the one hand, rigid hierarchical structure, branded as Information Architecture, promises clarity and coherence; on the other, the same rigidity seems to offer sterility and boredom.

Article Continues Below

First one side darts ahead. The lead seems insurmountable. But wait – what’s this? Something new happens! The dark horse advances, sweeping ahead. A new competitor advances, sweeping ahead. Old design ideas fall by the wayside, old errors seem ridiculous, old approaches fall far behind.

But this tumultuous race, with cheerleaders on either side, ignores a third force: the power of narrative.

eNarrative everywhere

We see narrative everywhere. It’s a primitive urge, a way to tie cause to effect, to convert the complexity of our experience to a story that makes sense.

We want to see narrative everywhere. Stories are fun, exciting, comforting. This isn’t just a matter of bedtime stories and art. The saga of the Great Browser War, the Open Source tales, the stories of Bill (Gates) and Steve (Jobs), populate our work life and our weblogs. So, too, do tales of Rise and Fall – of individuals, companies, and websites.

The point is not that we should add stories to our sites to ensnare narrative-starved readers. The point is that the reader’s journey through our site is a narrative experience. Our job is to make the narrative satisfying.

Arcs of triumph

Surely a simple, transparent, efficient transaction cannot be the web’s highest aspiration. Simply serving the reader’s explicit needs will not and cannot create a memorable experience. If everything goes as expected – neither better nor worse than usual – our reader (or our customer) has no reason to remember the experience, or us. Perhaps they’ll come to us if they have a similar need some day, and happen to find us again; otherwise, why would they give us a second thought?

A forgettable experience is exactly right for peripheral web services like parcel tracking. Here, the service is intended specifically for addressing exceptions and averting problems. We don’t want you to remember tracking an overdue package; if the package is overdue, the sooner you find it and forget about the whole thing, the happier we’ll be. People who use your website to run errands or fix mishaps are a special case: move them in and out quickly, without fuss. But for the rest of your visitors – readers, browsers, shoppers, fans – you need to create a memorable narrative arc.

To offer memorable service – whether we’re giving away ideas or selling products – we need to create a story, an experience, a dramatic arc. We often begin by offering alternatives: additional options from which the reader may choose, or additional information she might want to pursue. This is not mere opportunistic up-selling (“Would you like fries with that?”): dialogue between the reader and the web gives us new chances to find out what the reader really wants, even if the reader herself doesn’t yet know what that is. Readers and customers, after all, can only ask you questions they already know; expertise is often knowing how to find the right question.

Organic narrative

Narrative experience should grow naturally from the site’s message and purpose. It’s a mistake to invent narratives – human-faced “tour guides” to your site, for example – that don’t flow naturally from the site itself.

The world abounds in stories. You don’t need to invent: the story is already there. For a cause or a crusade, the story is the struggle. For a corporate site, the big story is the story of the company – its trials, its fortunes, the challenges it faces and the way it responds.

Individual brands and products may have their own stories. Business weblogs can present the evolution of products or the trials of product development . An engaging and opinionated corporate visionary can personify an otherwise faceless corporation, focusing the unfolding story and helping readers care.

People are fascinated, too, by the stories of customers and volunteers and fellow-readers – especially when the stories are unexpected and intriguing. Simple celebrity endorsements and success stories have little impact; they’re tritely familiar and obviously self-serving.

More interesting are stories at the margins. Stories about unique uses for furniture are interesting in ways that simple declarations (“I love my sofa!”) aren’t. More compelling still are product stories that overcome adversity: the tale of a furious customer for whom things went wrong, and whose problems were ultimately solved by dedicated customer service or heroic tech support.

Stories gain impact over time, if you keep the reader’s trust: stay in character, stay true to life, stay connected. Thousands of late-working programmers got into the habit of opening a window on Jennicam to see if she’d take off her clothes; before long, they cared more about the joys and pains of dorm life – they cared more about Jenni – than about voyeurism.

Even when individual moments aren’t compelling – when the product is valuable, reliable, and boring, when the cause is invaluable and deadly dull, when the star of the story is simply flat – the narrative that emerges from collected moments can be unforgettable.

Pay for what you use

If you’re a dramatist and you need a gun in the third act, it’s unfair to have the gun magically appear just when it’s needed. The writer needs to earn the gun – needs to establish it, so its appearance flows naturally out of the action.

In the same way, in web narratives, it’s distracting and wasteful to establish things we don’t need and won’t use; if we go out of our way to set up a gun in the first act, the audience should eventually understand why. Extraneous action merely clouds the message.

The much-reviled splash page or entrance tunnel tries to create a narrative arc by grabbing attention and setting the scene. The idea is sound, but the execution is often deeply flawed.

In many sites with an entrance tunnel or splash page, the opening is an elaborate, time-consuming, singing and dancing animated introduction to a static, conventional site. The opening fireworks aren’t a prelude, they don’t grow organically from the site or from its message. The entrance is glued-on and arbitrary, mere decoration, and readers perceive it as a facade.

David Siegel once suggested that the web experience be rounded out with an exit tunnel as well, a path taken to leave the site; in practice, of course, people have so many ways to leave, and their reasons for leaving are so various, that exit tunnels are seldom used.

The promises offered by the landing page and the site structure need to be kept by the entire site – not merely for consistent branding, but as a contract with the audience.

Show, don’t tell

Writers and dramatists learn from infancy: it’s stronger to show the audience than to tell them. To say that “George was a good friend” leaves no impression; for impact, the writer shows what friendship meant to George.

Mission statements (e.g. “About this site” pages) often tell when they ought to show. Mission statements explain what you want to be. That’s weak. Everyone in the business tends to say the same thing, and their customers’ eyes glaze over at the rote declarations of good service and cutting-edge technology.

It’s far more effective to show your mission in action. If you’re a service leader, show off your service. If you’re a technology pioneer, show how you’ve advanced technology – and show what your labs are working on right now. If you’re a price leader, show your advantage. Don’t declare: do.

Show who you are, and put the mission statement back on the wall where it belongs.

It’s not about you

Many sites today pretend to be about the reader. They imagine that the way to make an experience involving is to get readers to talk about themselves, to fill out questionnaires or polls or express their opinions on bulletin boards. But narrative takes us outside ourselves. We spend much of our existence thinking about ourselves, our problems, our feelings; drama takes us away from these daily worries.

Directly addressing the reader, peppering your audience with choices, surveys, and customization opportunities can increase the psychological distance between your message and your audience. Like a too-chummy, backslapping salesman, a website that asks too much also forces the audience to think about itself. The narrative experience shatters; and the reader, recalled to a host of deadlines and worries and errands, clicks elsewhere or switches off. Each of us is the hero of his or her personal dramas; sometimes, we want someone else to be the protagonist.

A special exception occurs when direct dialogue arises organically from the site conception. Online Caroline, for example, poses as a home page written by the engaging, outspoken, and completely-imaginary Caroline. Caroline wants you to send her email –  that’s entirely consistent with her character. She emails readers all the time, leading them to new developments on her site (and keeping them in touch with the gradually evolving story). Caroline talks directly to each reader; that’s who she is. She’s a bit breathless, a tad over-the-top, and if she sometimes seems too friendly, if she sometimes forgets (or doesn’t care) exactly who you are, that’s who she is, too.

For special effects, direct address works. Most of the time, stay away.

The third act

Many of today’s web narratives are impoverished:

Mary needed a better way to update her web pages. She went to fictitiouscompany.com, bought our wonderful tool, and lived happily every after.

Everyone sees this to be unsatisfying. It is. Most people think the fault lies in commercialism. That’s a mistake. The same unsatisfying story is told by countless personal sites as well:

I was sad (or lonely, or not trendy, or lacked expertise). Then I went to my friend’s web log, and I felt better.

Whether we’re explaining a product or an idea or a political cause, the point is not merely that we’re bestowing a gift on our audience. No story worth telling, no relationship worth cultivating, is that simple.

This is the problem of the third act – the act that begins, in David Mamet’s memorable shorthand, “But there was something they had forgotten.” The web isn’t a great medium for impulse sales; its strength lies in depth, in continued exchange, in building relationships that are deep and strong. The web’s strength is the third act.

The story of a product doesn’t end with the sale; the sale is merely the beginning of the big story. Take Mary, who has just purchased new software; now she needs to install it, learn to use it, and create new things with it. Often, she’ll need to learn new ways of thinking about her work; new tools often create new opportunities. Problems will arise – they always do. Some are dull – mere fulfillment or basic tech support:

My box was run over by a forklift: can you send a replacement?

We don’t need to tell these stories in much detail. Others, though, are more interesting:

We standardized on the new software tool last month. I expected that the system would make everyone more productive. It took a lot of convincing to get the budget approved. But, at last, we got everything set up – and it worked! Productivity improved, errors decreased, management was thrilled. But some of my staff still prefer the old way of working. Some say they hate the new software, that it interferes with the way they handle their accounts. Others swear they’ll never go back. The arguments seem to get louder and more emotional every day. How can I prevent this from getting out of hand?

We began with a problem – a conflict. We addressed it by taking action. But that’s not the end of the story: there is always something we have forgotten. Deep sites explore these ramifying conflicts, issues that arise from adopting new products or learning new ideas. Narrative builds community through a sense of shared experience, and builds coherence by connecting the experience of a product or an idea with its purchase. This depth, in turn, retains our customers and reinforces our adherents; it turns readers into partners, and partners into fans.

Plots are everywhere

Scott McCloud’s brilliant Understanding Comics teaches us a lesson that transcends the realm of comics: if we see two things next to each other, we draw a connection from one to the other. Our minds construct a sequence, a connection, a relationship. Even if the relationship is obscure, we’ll eventually find it (or make one up). In space, we call this collage. In time, it’s montage. We see things next to each other and we imagine a sequence. We see a sequence, and we imagine a story, a cause and its effect.

Juxtaposition in much web design today is poorly controlled. For example, what story does this familiar navigation bar tell us?


In this story, we learn about the product. We try it, and we like it. We buy it. Then, after we’ve bought it, we need support. And then, at the very end, we have a way to contact the company. The natural inference, alas, is that SUPPORT follows PURCHASE because something has gone terribly wrong, and CONTACT is our last hope of getting satisfaction after SUPPORT has failed. (SUPPORT must have failed, not only because SUPPORT is the kind of schlemiel who always fails, but also because it fits the plot: if support succeeded, who would we need to CONTACT?)

More and more websites assemble content modules to order. Servers observe the time, the date, and perhaps the user’s cookie, and add elements to the page like Lego blocks. This creates a sensitive graphic design problem, since each block is logically independent but will inevitably appear right next to another, unrelated block.

Newspaper and magazine layouts have long wrestled with this problem. Judicious use of rules and whitespace can help. Staggered layouts and irregular grids help avoid unfortunate juxtapositions. Distinct type faces (and, even better, distinct leading – now practical with prudent use of stylesheets) helps to break up the page as well.

We can’t eliminate the problem, because we have too much to say to the reader, and we need to say it here and now if we’re to have any hope of capturing the reader’s attention. Until we reduce the unpredictable page-loading delay to conform to Akscyn’s 1/4-second Law, the problem (like all interesting graphic design problems) is intractable. Finding good solutions and interesting new ways to pull pages together without muddling the meaning will remain a core design challenge.

We’ll face the challenge. We’ll find solutions. And, inevitably, there will be one thing we’ll have forgotten – and that one forgotten thing will open the way to the third act, and beyond the third act to endless new web stories.

No Comments