Does your user experience lack a story?

By Josanne Griffin-Mason, 17th September 2015

Stories have defined our world since the dawn of communication, from etchings carved into cave walls to long nights spent telling tales around a burning fire.

As we evolved, we invented new ways to entertain and teach, and our stories transformed into letters, books, film, theatre, song… And then came Twitter. Suddenly, our beautiful prose was so severely severed, it could be nothing more than 140 characters in a stream of other peoples’ erratic noise.

But that doesn’t spell a bloody end for stories. Quite the contrary; we just need to find new ways to tell them.

Every communication needs to have a story.

Storytelling helps us understand the world and each other. When you see a butterfly, you understand the journey it has travelled to become the colourful, winged creature it is from the tiny caterpillar it once was, and when you ask your colleague how their weekend was, you receive a story of highs and lows, of parties and chores.

Just because our communication methods have become faster and more compressed, that doesn’t mean we no longer crave a compelling story.

Advertisers, marketers, website designers and web developers know this, so they’re shifting from the business of simply selling products, to the art of selling the backstory that makes those products desirable.

Captivating stories require skilful design.

Stories don’t just happen. J.K. Rowling didn’t open up her word processor one day and wait until the words poured out of her fingertips; she carefully constructed each character, setting, and twist of fate, to yield maximum impact on our collective psyche. You see, storytellers are expert designers.

Below is a diagram to illustrate the most successful formula for creating stories used by novelists and screenwriters across the globe.

classic_story_arc

Harry Potter, Star Wars, Frozen… The classic story arc could describe almost every film you’ve ever seen or book you’ve ever read, and we’ll readily talk about Harry, Darth Vader and Elsa with our friends and as if they’re people we know, not mere characters created in fiction.

This type of emotional investment is what brands live for. It’s the precise reason why Adidas focus on integrating with peoples’ experiences and lifestyles, from their leisure activities to their music preferences, rather than using every marketing opportunity to simply shift some stripy footwear.

Understanding the user experience.

When we describe a story, we tend to approach it from an emotional perspective, relaying how it made us feel or how we related to it. When we refer to a website, our opinions are dominated by how well we think it functions to perform expected tasks.

However, there’s more to website usage than we may first presume, as our interactions tap into a much deeper constitution, whether we’re aware of it or not.

Donald Norman, professor of cognitive science and usability consultant for the Nielson Norman Group, explored peoples’ relationship to design in his book ‘Emotional Design’.

Norman found that design affects how a user experiences a product on three different levels. These are:

  1. Visceral
    Our initial reaction to a design is pure instinct. For instance, we may take a strong dislike to the snot-coloured background or we may be fond of the cute kitten photographs.
  2. Behavioural
    As we spend time engaging with the product, we’ll decide how good the usability is and our overall experience with it.
  3. Reflective
    This happens once the initial impact has worn off and we take the time to consider where the product fits in with our broader life experiences, associating specific meaning and values to it.

All website visitors experience these three stages, whether they’ve landed on a rather dull online banking platform or if they’re browsing an extravagant parallax website, and each element combines to establish the user’s definitive experience and how they regard a brand.

emotional_design

Turn the audience off on a visceral or behavioural level and you’re unlikely to make a sale, but keep them engrossed right through to the reflective stage and you may have just acquired a loyal customer. Stories are your added ammo, because whilst great design has the power to resonate with your audience and tell a story within itself, adding a solid narrative to that provides the opportunity to further develop the user’s emotive response and enable them to verbalise what they’re experiencing.

Enhance the user experience with creative storytelling.

User experience teams require the expertise of website developers, graphic designers, marketers, and more, which ironically, can be detrimental to the final user experience. The reason for this is that each component of the team has a competing goal. For instance, the developer may be keen to implement a revolutionary scrolling feature because it showcases your company’s skills but the marketer may want it scrapped when they notice bounce rates skyrocket.

Creating a story for your website reduces the risk of downfall because a narrative aligns everyone involved with one user-centred purpose to take said user through to the resolution of the story.

The results are impressive – just take a look at the following examples.

The Boat

The-boat2

This is a story in the traditional sense, predominantly written, heavily illustrated and enhanced with sound effects and moving imagery to make it cinematic. The website is an adaptation of the emotional short story ‘The Boat’ and aims to raise awareness around the plight of Australia’s Vietnamese population.

Get Beagle

This is how to sell a product through narrative. The crisis (subpar proposals) is subtle yet nagging, and as we scroll, we’re offered stylishly placed resolutions to ‘improve’ and ‘better’ our proposals.

Two Gunshots

two_gunshots

‘Two Gunshots’ turns a real-life murder inquiry into a written piece, complete with videos and photographic evidence, with the aim to put the investigation under scrutiny. This type of storytelling in web design is becoming more and more common, particularly in news and interview pieces.

Reshaping New York

reshaping_new_york

The New York Times prove that statistics are not boring with this immersive graphic. They also take advantage of pictures speaking a thousand words by placing ‘then’ and ‘now’ pictures side-by-side to demonstrate just how much New York changed over a twelve-year period for web visitors who’d prefer to skip the written excerpts.

What next?

Storytelling in web design isn’t easy and large teams are needed to get the job done.

First, you’ll need to sit down with your core team to determine what type of story your website should tell. Does it require a multi-dimensional narrative like ‘The Boat’ or is short and snappy product placement more appropriate, as Beagle have done?

Next, lay out your strategy. Part of this will involve creating a backstory for your website user, including facts about their age, interests, location and how busy they are. By understanding the personality of the person using your new website, you’ll be able to design and develop it for them, increasing your chances of connecting with them on that all-encompassing emotional level.

Then, there’s the plot building.

Christopher Booker, author of the highly regarded The Seven Basic Plots, surmises that most stories follow one of the following seven plots:

  • Overcoming the Monster
  • Rags to Riches
  • The Quest
  • Voyage and Return
  • Comedy
  • Tragedy
  • Rebirth

These storylines are powerful and recognised globally, and as storytelling in web design is still relatively young, staying within these parameters is likely to translate best online.

A carefully constructed, narrative-based website can take months to develop, so this certainly isn’t a quick sales fix. However, once complete, a website that tells a story can yield long-lasting results, as your product and company will be far more memorable than most.