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.

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#section2

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#section3

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#section4

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#section5

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#section6

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#section7

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#section8

Many of today’s web narratives are impoverished:

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:

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:

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

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#section9

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.