Good Storytelling Makes Great UX (it’s science!)

In early 2013 I explored storytelling in UX in my first ever conference talk: What’s in a Story. At the time I talked about educational content. I found it interesting that so many people seemed to think shorter articles were better, when in my experience the length had little to do with engagement and optimization.

When writing the talk I was struck by a quote from Conversion Rate Experts: “In reality, you cannot have a page that’s too long—only one that’s too boring.”

Since then my experiences with storytelling have grown. What’s more, storytelling has become a buzz word! Marketing organizations like HubSpot, business publications like Forbes, and even the Interaction Design Foundation reference storytelling as a necessary skill. Which leads me to ask three questions:

  1. What do we mean when we say “our brains like stories”?
  2. How do you tell a good story?
  3. How can storytelling improve UX?

1. Cognitive science: our brains like stories

In his international best seller Thinking, Fast and Slow, Daniel Kahneman explores how our brains react to words.

[…]look at the following words:

Bananas Vomit

[…] There was no particular reason to do so, but your mind automatically assumed a temporal sequence and a causal connection between the words bananas and vomit forming a sketchy scenario in which bananas caused the sickness. As a result, you are experience a temporary aversion to bananas (don’t worry, it will pass).

Daniel Kahneman, Thinking Fast and Slow (ch. 4, The Associative Machine)

Associative coherence

Kahneman calls this reaction “associative coherence”. In other words, the human brain wants to make sense of things, and so it takes two items, sees them near one another, and creates a story that makes sense. This type of brain activity explains why:

  • Trust is higher for attractive websites. Attractiveness is a positive thing, as is trust. Our brains therefore associate the two.
  • UX researchers need to be careful not to “prime” participants. If you ask a participant what was easy in an app, they are more likely to assume the app was easy. A more neutral question doesn’t flag the same associations.
  • Smiling actually makes people feel happier. Our brain associates smiles and happiness, whichever comes first.

Cognitive ease

Kahneman goes on to explain how associative coherence is a way of telling stories. When things make sense they feel familiar and effortless. They feel easy, creating what Kahneman refers to as “cognitive ease”. This cognitive ease also explains things like:

  • Why first impressions stick with us. The story gets built to make sense of the first impression!
  • Why bias is so pernicious. If you were raised in a society that told you other races were “dangerous” your brain will continue to try to make that story true.
  • What makes specific examples in marketing copy or help text work better than vague phrases. Reading “when you’re walking your dog” helps someone envision a situation, where “when you need it” does not.

So our brains are built to create stories. But what makes a story good, and how does that affect UX?

2. Story Genius: how to tell a good story

To create a good story, we turn from Kahneman to another book: Story Genius, by Lisa Cron. Cron’s book is a literal how-to for aspiring writers. One thing I love about her book is that she defines what makes a good story – and she starts by calling out “What kindergarten got (and still gets) very very wrong.”

• What if Jane was walking along the beach and she found a bottle with a message in it? Write a story about what would happen next…
• What if Freddy woke up and discovered that there’s a castle in his backyard? He hears a strange sound coming from inside, and then…
• What if Martha walks into class and finds a great big sparkly box on her desk? She opens it and inside she finds….

[…] The problem is, these surprises don’t lead anywhere, because they lack the essential element we were talking about earlier: context.

[…]Because so what if Freddy discovers a castle, or Martha finds a big box on her desk or Jane finds a message in a bottle? Unless we know why these things would matter to Freddy, Martha, or Jane, they’re just a bunch of unusual things that happen, even if they do break a well-known external pattern. Not only don’t they suggest an actual story, they don’t suggest anything at all, other than the reaction: Wow, that’s weird!

Lisa Cron, Story Genius

In other words, our brains might build a story out of “vomit / banana” but without context on why it matters, it’s not a very interesting story. For a story to be interesting, it needs context.

3. Storytelling in UX: how storytelling makes UX better

Luckily, Story Genius also explains how to make a story personal and contextual. Early on Cron references Jonathan Gottschall’s book The Storytelling Animal. From Gottschall, Cron pulls the idea that a reader is a participant in the story.

Functional MRI (fMRI) studies reveal that when we’re reading a story, our brain activity isn’t that of an observer, but of a participant.

Jonathan Gottschall, The Storytelling Animal

Now we have three strong facts to guide us:

  1. The human brain is meant to tell stories.
  2. Without context, that story will be boring.
  3. But if the story feels personal and has context, the person reading will feel they are part of that very story.

And here we have the core of UX: creating an experience that puts the person in the center. Let’s put it into practice.

Examples of storytelling in UX

Now let’s look at specific guidelines to create three strategies, each with a focus on inclusive, engaging story telling.

  1. Crafting a marketing/branding content strategy
  2. Building a product used experience
  3. Developing a voice

#1: Crafting a marketing content strategy

First, let’s talk about marketing and branding. This is probably the most common situation to hear about “storytelling”. Some people think about storytelling as a way to grab attention. You see the commercial, it makes you laugh, so you buy the product. (And occasionally that’s true.)

But real storytelling creates a place where the end-user is the hero of the story. To start content marketers need to consider the persona’s needs and wants. Then they need to write a story (or stories) to allow the end-user (persona) to grow from where they were before through a “what if” situation, with the product helping them complete the story.

Think of the Bounty commercial, Lottery. The premise is simple: what if a middle class couple had just won the lotto, and a drink spilled and threatened to destroy the ticket?

The story is solid because the emotions are relatable, the context is specific, and as Lisa Cron promises, that makes the next step in the story obvious: the couple would jump for a paper towel to save the day.

Subaru’s re-branding to appeal to lesbian couples in the 1990s is another great example of storytelling. The branding team didn’t just build a value proposition. They took the value proposition (“Subaru fit [lesbians] active, low-key lifestyle” and created a story. Using associative coherence they used tag lines with double meanings, like “Get Out. And Stay Out” and “It’s Not a Choice. It’s the Way We’re Built” which “could refer to all Subarus coming with all-wheel drive—or LGBTQ identity.”

Subaru’s “Get out and stay out” advertisement created associative coherence without ever saying the acronym “LGBTQ”

#2: Building a product user experience

Now let’s look at product UX. Often design teams focus on “building flows” or “simplifying experiences.” Yet even with those goals many teams incorporate elements of storytelling.

Information architecture is one way in which UX tells a story. By having a feed as the home screen of the app, Facebook creates a story where the member is part of a community. Etsy designs a story where the user is walking into an incredible store filled with homemade items. Another way to think of this storytelling in UX is “mental models“.

When Carrie Hane explains domain modeling as a way to understand IA, she often says to start with the person or user. User research provides the context, and the domain modeling becomes another way of creating associative coherence. When the story is specific and created with context, the structure of the product becomes clear.

  • Sample What If: What if a person couldn’t afford a fancy dress?
  • What if with context: What if a person who has always shopped for clothing in person suddenly needed a fancy dress for an important wedding but couldn’t afford to buy it?
  • IA ramifications: Rent the Runway organizes the site by event type.
Rent the Runway’s IA reinforces the story of a person who needs an outfit for a specific event.

#3: Developing a voice

Lastly, the voice of the product or organization should be created with a story in mind. Often teams think of the voice in terms of what it needs to do, such as:

  • Convey branding
  • Exist in email marketing and social media
  • Work for user flows
  • Successfully onboard customers

Here too, “what if” has benefits. After all, the voice is ultimately building an associative coherence. The voice allows a company to evoke something. It might be evoking a personal guru, or an encouraging track coach, or a nerdy friend – without ever saying those exact words.

Peleton never says the words “coach” or “training for a race” and yet their story is clear.

Write your own stories

How do these great experiences, IAs, and voices get created? For some people it may be luck. For others it may be enough money and time to test with the right audience until it sticks. But cognitive science points to three steps.

  1. Review the research to understand where the target audience is starting from
  2. Create a “what if” based on that context
  3. Identify the words that tell the story, and use them to create an “associative coherence”

Our brains like stories. We’re built to create them. So use storytelling in UX. Build a story that stars your audience, and help them connect to your product.

facebookShare on Facebook
TwitterTweet
FollowFollow us

Leave a Reply

Your email address will not be published. Required fields are marked *