5 Storytelling Techniques Applied to Web Design
Stories are how we connect and understand each other. They’re how we remember information and build meaning.
Stories are also engaging. As people, we seem to be hardwired to love stories. We pay attention and get involved and share them with others.
This means that stories are a very powerful way to get a message across. And if you can tell a story with words, or pictures or sounds — why can’t you tell one with a website?
There are a few components that almost every good story has. By incorporating these things into web design, you can build very compelling websites.
To start with, every good story has…
1. A BEGINNING
Stories set the scene. What kind of world is this? What sort of story will it be?
On a website, this comes down to communicating your brand. First impressions count and visitors need to know right off the bat what kind of company or individual you are.
Playful? Professional? Spontaneous? Reliable?
TOMS website is able to instantly set just the right mood.
The roughly painted font, the circle of children holding hands, the bright outdoor setting… these things set a tone that is cheerful, comfortable and socially aware.
TOMS lets us know what to expect. We won’t be surprised when we’re asked to donate. We’ll know we’ll find casual, not formal shoes. Because we’ve been prepared, we’re more likely to be pleased by both the product and the company.
Also, the right beginning is how you get people to stick around. People often leave without going past the landing page. But if you’ve started a good story, they’ll have to stick around just to find out what happens.
2. CHRONOLOGY
Time is the organizing principle which is most familiar to us. First this happened. Then that. And finally, this.
Its the way (most) stories are told — and it turns out to be the easiest way to get information across and have it be remembered.
Scrolling landing pages are perfect for creating chronologies. Instead of jumping randomly from page-to-page, users progress through information as a linear sequence.
Freese’s For Better Coffee website gives you 5 rules for making good coffee.
Instead of presenting these rules side-by-side, Freese organizes the rules into a chronological sequence that progresses as users scroll down the page.
The result is a story. A simple one — just someone making a cup of coffee — but its compelling.
Its the chronological structure that turns 5 rules into a story that is easy to understand and remember.
3. CONFLICT
Every story has a conflict — a problem or question that needs to be resolved. This serves the same function on a website that it does in a story: a hook that draws your audience in.
Conflict creates anticipation and uncertainty and we automatically become engaged in the act of problem-solving.
Andrew Stanton (writer for Pixar) calls this “The Unifying Theory of 2+2”. That is, people are born problem-solvers. We love to be included in the finding of an answer. Don’t give us 4. Give us 2+2.
The non-profit Thirst Relief does this really well. Here’s their landing page:
It’s a simple message, and yet it presents a complex, colossal riddle. A problem that must be solved…but how?
What engages us is the promise — not the presence — of an answer. This unsolved problem creates an itch that must be scratched. We’re propelled to keep reading, if only to find out how Thirst Relief plans to solve such a colossal issue. And it the meantime, we’re thinking to ourselves, How?
Its a great storytelling technique. Give your audience a problem. Promise them an answer — but don’t give it just yet.
4. INDIRECT CHARACTERIZATION
The best stories use indirect characterization. Basically, this means showing instead of telling.
For example, an author can say outright that a character is compassionate.
He was a very compassionate man.
Alternatively, an author could reveal information about the character, prompting a conclusion that he is compassionate, without actually stating it.
He said, “You never really understand a person until you consider things from his point of view […] until you climb into his skin and walk around in it.”
This second quote (from To Kill a Mockingbird) uses indirect characterization. We are not told that the character Atticus is compassionate, we are shown. Its is a much richer form of storytelling.
The same idea can be applied to storytelling through websites.
Consider the Nike website. Nike could tell us, “Our products will make you stronger, faster and more motivated”. And maybe we’d believe this. But it wouldn’t be the same as this:
Nike shows instead of telling. Its still communicated that Nike is a company that can make you faster, stronger and more motivated — but it feels like a conclusion that we’ve arrived at ourselves, not something others have told us. It’s become an emotion, not a message. Something we just know to be true.
This is indirect characterization. Its how you tell a good story or develop a brand, and its how you build a persuasive website.
5. A RESOLUTION
To some extent, every story provides resolution. An answer to the question that was initially raised.
The moment of resolution is what gives focus and clarity to story. Everything is leading towards a single goal — the resolution of this conflict.
On a website, building towards a resolution gives you a strong, consistent theme. And it provides a very satisfying moment for your audience — like scratching an itch, or getting the answer to a really good riddle.
Going back to the Thirst Relief example, here’s a what comes after “Nearly 1 billion people lack access to clean drinking water”:
An answer. A specific, intelligent solution that Thirst Relief is offering as a salve to the unsolvable problem.
This moment gives websites the opportunity to ask for something. Whether its donating or signing up for a newsletter, these calls-to-action will be much more effective after you’ve proven that you hold the answers —after you’ve provided a good ending to a good story.
