This Cyber Monday Envato Tuts+ courses will be reduced to just $3. Don't miss out.
Despite the fact that storytelling dominates everything from entertainment to advertising, we rarely use it on our websites. It's time to change that.
Thumbnail image: Share Your Story in Wood Type on Photodune
Have you considered how much of our entertainment is made up of stories? Cinema, books, theatre, television, games and even Opera! We are obsessed with stories. Storytelling is a fundamental part of the human experience, one that stretches back throughout history.
Interestingly you don't find a huge amount of storytelling online. Perhaps this is because storytelling is synonymous with entertainment and most websites are informational.
However, thinking of stories as entertainment is to miss their power. In this post I explain why storytelling matters and how to incorporate it into our sites.
What then is the role of storytelling, and why should it matter to web designers?
The Role of Storytelling
To understand the role of storytelling we need to look at the fields of psychology and literature. When you do it becomes apparent just how much storytelling can bring to web design.
Storytelling can aid in three aspects of any website:
- Helping the user to understand.
- Engaging with the user.
- Ensuring that the user remembers.
Let's look at each one in more depth.
Stories Help us to Understand
Although occasionally a website has a simple premise (e.g. buy this widget), much of the time it needs explaining. Whether a new web app or service, it is often necessary to explain what is being offered and how it works.
Understanding the premise of a website takes effort on the part of a user. Unfortunately, as Steve Krug explains, users shouldn't have to think.
As web designers we use many techniques to reduce the cognitive load for the user. We improve usability, create minimalistic interfaces and enhance legibility. However, we rarely turn to storytelling.
This is unfortunate as stories can be a powerful way of improving understanding. As the novelist Douglas Coupland writes:
Your left brain is a potent tool. It forces you to create stories in order to make sense of information. Without enough information, it will create information to fill in the blanks.
Stories are an excellent way for us to process and store information. A story contains a large amount of information in digestible chunks. Stories allow us to break down events into smaller units so that we can better understand the information being communicated. Psychologists call this chunking of parts of a story event structure perception.
If you use stories to explain a website's offering, users will understand it more quickly. But, stories don't just help you understand concepts better. They also help you remember.
Stories Help us Remember
Meet Andi Bell. He has an amazing memory. In fact he is the world champion. Give him 10 decks of shuffled cards and 20 minutes and he will have memorized every card and its order in the pack. That's 520 cards and he remembers every number, suit and order.
His method of achieving this feat is simple, he turns the whole pack into a single narrative. He turns it into a story. Of course, this is not the sole reason for his extraordinary memory, but it is a significant factor.
The success of Andi's technique comes from the way we process stories. We have an area of the brain dedicated to this role and that makes stories a powerful way of remembering.
This is a fact well known in education. In the research piece “Storytelling in the classroom” the author writes:
Stories are the way we store information in the brain. If teachers fill their students' brains with miscellaneous facts and data without any connection, the brain becomes like a catchall closet into which items are tossed and hopelessly lost. But stories help us to organize and remember information, and tie content together.
We know that users rarely convert on their first visit to a site; we need to help them remember the site so they return later. That is where storytelling can help. A user may struggle to remember a strap line, branding or key message, but they will remember a powerful story.
The likelihood of them remembering the site is further enhanced if it makes an emotional connection with the user. That is where we come to the final benefit of storytelling.
Stories Create an Emotional Connection
One of the holy grails of modern web design is to emotionally connect with users; to make them care. We endeavor to do this using design delighters, emotionally charged copy and participating in social networks.
However, once again we see a lack of storytelling, despite the fact that stories are well known to be emotionally engaging.
Any one of us who has read a book that inspired, or watched a movie that moved us to tears, knows that stories cut straight to the heart. This is because stories enable us to empathize with the characters. As Weinschenk writes in Neuro Web Design:
A story not only conveys information, but it also allows us to feel what the character in the story feels.
This is why charities have stopped bombarding us with facts and figures and started sharing the stories of individuals who are suffering.
We don't just sympathize with those in stories, we actually feel what they feel. Doctor Joshua Gowin writes:
When you tell a story to a friend, you can transfer experiences directly to their brain. They feel what you feel. They empathize. What's more, when communicating most effectively, you can get a group of people's brains to synchronize their activity. As you relate someone's desires through a story, they become the desires of the audience. When trouble develops, they gasp in unison, and when desires are fulfilled they smile together.
This is powerful and something we should be utilizing on our websites. Of course, having a theoretical understanding of stories is great, but we need to put it into practice.
Incorporating Storytelling into Your Site
I don't have the answers about incorporating storytelling successfully into our websites. However, there are people that we can learn from.
Whatever your approach the starting point is obvious. You need to collect the stories.
You may think you don't have stories to tell. However, that is almost certainly not the case. More likely you are simply not aware of them, or not thinking about them in the right way.
One of our clients, the Environmental Defense Fund convened an all-staff retreat and devoted an entire day to collecting stories that had been informally circulating within the organisation. We then structured the website around these stories, including both environmental problems and stories of success.
The Environmental Defense Fund are one of many charities that recognize the power of stories to encourage giving.
You are not limited to looking internally for your stories. You could follow Twitter's lead and ask users. By asking users to tweet stories of their twitter experiences, they have been able to collect some amazing stories.
Some of these stories are incredibly inspiring, such as the earthquake victims saved because of a tweet, or the man who received a kidney after making an appeal on twitter.
These stories are powerful and yet still help explain how twitter is used and what it is. They have taken the messages about their service that could have conveyed in a factual way and repackaged them as stories.
Repackaging Your Message as a Story
Using stories doesn't mean you have to change the underlying messages you wish to communicate via your site. All you are doing is presenting those messages in the form of a story, thereby making them more engaging.
Take for example the custom prints sold by web designer Cameron Moll. These limited addition prints are meticulously produced and printed to an exceptionally high standard. Cameron could have written a bullet point list outlining the work that went into his posters. Instead he chose to tell a story about their creation through a video on his site.
This video tells a compelling story of craftsmanship in a way that no amount of text could have. What is more, Cameron's video doesn't simply focus on the product, it looks at the people and the journey they took.
Focus on People
For a story to resonate and make an emotional connection, it needs to include people. As I have already said, a story provokes us to empathize. However we can only empathize with people, not products or brands.
Kiva.org does this well. The entire site is dedicated to people and their stories. They recognize that giving to a large faceless charity is not as compelling as giving to a specific individual with a real story. They harness the power of personal stories to emotionally connect with users and encourage giving.
Kiva.org focuses on individuals and their stories to encourage people to act.
Not that this emotional connection is limited to charities. Every organization is made up of people and these people all have stories to tell.
Oberlin college tell the stories of their students through their website. When you read them you cannot help but identify with these people and their lives at college.
One of my client sells frozen foods to the elderly. You would be forgiven for struggling to see a story there. However, there are some wonderful stories. Stories of chefs struggling to make purée food for the elderly look appetising, delivery drivers who go above and beyond to help their older customers or packers who spend their day working in –25 degrees to ensure the food arrives fresh.
Once you have your stories, you need to consider how to present them.
Presenting Your Stories
The temptation with storytelling, is to fallback on text because it is easy to produce. However, it is not the only way of telling a story and not necessarily the most engaging.
For a start there is video. Hearing and seeing stories first hand is often more powerful than reading a second hand account.
37Signals who produce project management software Basecamp, have produced some superb videos telling the stories of those who use their software. The emphasis is not on the product's features, but the stories of those who use it.
Creating videos does not need to be an overwhelming task. 37 Signals outline their process on their blog and it isn't complicated. However, you could take an even simpler approach. Recording and editing video is within the reach of anyone.
Not that video is your only option. You can use imagery, audio or even maps. For example, Map Tales is a web app that allows you to tell a story using maps. With this in mind, we should only see text as one of many options.
Good stories are not just about the content, they are also about the way they are told and presented. This is where design has a role.
Enhance Your Story with Good Design
The design of your website is an intrinsic part of telling your story. We know this from the advertising industry where art direction brings design and content together to communicate a message.
Design contributes to storytelling through good user interfaces, infographics, illustration, typography, branding and so on. This is because design creates mood and tone, setting the scene for a story and helps the user make an emotional connection to it.
A good example of this is an iPhone app called Ben the Bodyguard which protects your data. The app itself is fairly unremarkable, but the design and branding presents it as an engaging story.
Your data is protected by a fictional French bodyguard, reminiscent of the 1994 film Leon.
Heavily art directed, the site uses design to tell the story of how Ben protects your data. It turns a relatively dry feature set into an engaging and interactive story.
Another example of how design can be used to tell a story is the wedding site of illustrator and letterer Jessica Hische. This site turns the story of her relationship with her fiancé Russell into a highly illustrative timeline. The combination of timeline, illustration and design delighters adds a richness to the user experience that would otherwise be lacking.
There is no doubt that storytelling is a powerful communication tool and one that is under utilised online. Hopefully I have inspired you to experiment with using storytelling on your site.
The examples I have shared with you are just the tip of the iceberg. An increasing number of web designers are realising that stories have a lot to offer. Maybe you know of other examples, if so share them in the comments below.