4 jaren geleden geplaatst in Blog

It was obvious when the story was really good, his eyes would become even wider than usual, and his mouth would form a perfect O shape. He could sit for hours quietly waiting to hear the ending, completely engaged. He would be charmed by the story for many days after, which was a big help to my mom.

My job now doesn’t differ much from back when I was creating nice stories to entertain my brother and his friends. My customers may be surprised to know that today I use exactly the same formula to design solutions for them. While I hardly consider myself a master storyteller, I am a designer with a belief that storytelling can add to the users experience by adding another level of interaction, one worthy of exploration.

The beginning

If you are reading this article is because, like me, you consider storytelling to be an excellent tool to drive conversions, often more effectively than any marketing campaign, SEO optimization, or interactive element on the web. As with any tool, the user must wield it skillfully.

With all the designs we create, whether for a website, an app, or a brochure, we need to answer two important questions:

  • Who is our audience?
  • What are our goals?

Properly understanding our potential customers and the motivation behind our activities will lead us to another important element every story has, the narrative voice.

When I was telling stories to my brother, sometimes the narrative voice was a man, sometimes it was an imaginary character in the story, and sometimes it was just me as a third person narrator. Choosing it wisely allowed me to ensure the story was full of twists and turns.

Defining the narrative voice is important and answers specific questions like:

  • Who is talking about your brand/product: your brand itself, the CEO, the designer, a mascot, an influential customer, the product itself?
  • What's the tone of voice: friendly or authoritative, casual or formal?

The story

A story can be as complicated as we want to make it, but it always contains four specific components:

  • Characters
  • Plot
  • Action
  • Emotion

The most challenging part is to relate them to specific elements to create a website by generating an interesting flow that grabs the users attention and invites them to discover more of the story.

This requires a better understading of each component, so let’s break them down further.

1. Characters


The company, organisation, or product, play a big role in the story and are usually the protagonists. Playing such a central role means the personalities need to be well developed in order to work as part of the narration.

A brand needs to feel alive while keeping in mind its mission and goals. A product needs to be real and show relatable qualities and as well as its function. A testimonial needs to look credible, showing real facts and authentic experience.

On the other side we have the user. He/she is not a passive watcher of the story as with a book. They will actively influence the story by interacting with buttons, links, video, and anything else you provide to further the narrative. This is why it’s absolutely essential you know your users well before you plan your story.

2. Plot


In a story the plot dictates the order the main events progress. Unfortunately for you, the web cannot have a linear plot like a book. You may think this is a problem, but actually, this is the beauty of creating storytelling on the web, the unpredictability.

All plots have a beginning, middle, and end. We like to think of the home page as the beginning of a story. This is where we present our setting, introduce our characters, and establish the other important factors. For this reason alone, designers take a lot of care in designing beautiful home pages.

While this approach isn’t wrong, it is incomplete. In fact, the user may also land on your site through other links. For this reason, we need to ensure all pages are able to project the right perspective to your visitors, even if they suddenly appear through the ‘service door’.

The middle of our plot is all about developing the unexpected and keeping the ‘wait and see’ moment going through the entire site. Through interaction, admirable architecture, and curated content, we need to be able to reveal the story so the user wants to know more, page after page.

The end is the grand finale of the plot. When I was a child I loved Aesop’s tales because they always taught me something I could use in real life. All stories have takeaways, so must our story on the web. It can be something physical, like an e-book or video to watch, or something immaterial, like an emotion or new knowledge. Let's make sure that no matter how our story ends, our user will enjoy coming back or sharing the experience with others.

3. The Action


When we create the plot we need to think in a more general way. We know we can't control our users navigation, but we can address their actions by assisting them during the navigation of the website.

One of the strengths of the web is it gives us the chance to interact with the user on different levels.

Visual level: The way the information is presented. The way we combine colours to stimulate a specific action or mood. The contrast in the text to improve legibility. These all fall into this category. Also of vital importance is the way we balance content with whitespace, or the hierarchy of the information revealed, as they all contribute to the way the story entertains our visitors on a visual level.

Content level: The web creates a non-linear flow. For this reason, the way we introduce the content to our visitors’ plays an extremely important role in the way the user will react, and in the actions they will take. This is the level where tone of voice, headings, paragraphs, and images (video included) need to be connected. Where written words count, not only in the macro-interaction (reading articles and headlines), but also in the navigation, in the labels for the buttons, or even on the hidden error page.

4. Emotion


When we talk about emotions, I like to mention the Angel Cocktail that speaker David JP Phillips introduces in his TED talk, ‘The Magical Science of Storytelling’. In his talk he tries to stimulate the brains of his audience to produce three important hormones:

  • Dopamine
  • Oxytocin
  • Endorphins

Why? Because emotions happen on a mental level (even if we do associate romance with the heart) and those hormones induce our users to be more focused, creative, mindful, motivated, and of course, engaged.

To stimulate our brain to produce these hormones we need (no surprise) a good story. The content and the visual level mean nothing if they are not able to entice the user to want to know ‘What happens next?’

You can use different elements on the web:

  • Images and videos to evoke memories and feelings that users relate to.
  • Authentic testimonials so users feel empathy and project themselves into the story.
  • Real brand experiences to show your company understand what concerns users the most.
  • Change the perspective by tackling the human angle. Focus on the benefits, experience, and emotions features can generate, rather than the features themselves.

The End

As humans we are able to instinctively communicate through a narrative, however telling a good story needs planning and lot of practice, especially on the web.

A story doesn't need to be too detailed or complex, but it needs to have the right balance between characters, plot, action and emotion in order to bring a message to life.

What are you waiting for? Take your next web project to another level and challenge yourself to introduce the storytelling elements when you plan your site. I can promise as a designer, you will enjoy this process a lot, and developers will love building the site following a clearly defined path constructed of actions and consequences.