The fundamentals of storytelling in UX

By Bill Widmer | October 26, 2016
Image
The fundamentals of storytelling in UX

When was the last time you visited a website and really felt drawn into their story and brand? I mean, you really connected with what the company was all about, and their story led you to take action.

For me, it was experiencing Medium for the first time. If you haven’t heard, Medium is a platform built by Evan Williams (@Ev), co-founder of Twitter, that allows anyone to read and write content with almost zero learning curve.

Medium’s storytelling drew me in and caused me to become a regular contributor and consumer of their content. I now promote Medium pretty frequently, sharing the things I read and write.

medium

Why does storytelling matter in UX?

Storytelling matters for a lot of reasons. GrooveHQ increased the number of people to reach the bottom of their blog posts by 300% by focusing on telling compelling stories. But if that’s not enough to tickle your fancy, there’s more...  

  • Stories provide clarity and memorability. Stories are 22 times more memorable than plain facts.
  • Stories help you form a bond with your readers. People are not logical creatures; we engage more with emotions. This is good for B2C and B2B organizations because your reader is always a human, regardless of their profession.
  • Stories entertain. Typically, you have just 10-20 seconds before a user decides to leave for good. Interestingly, the longer they stay beyond that, the more likely they are to stay even longer (see chart below). An entertaining story can keep them from leaving during that crucial window.

nng chart

Credit: Nielsen Norman Group  

  • Stories capture attention. With the average human attention span dwindling to less than that of a goldfish, stories are a way to break people free of distractions, draw them in, and get them to pay attention to you.
  • Stories inspire to action. This is the most powerful aspect of storytelling. Have you ever read a book, watched a video, or listened to someone speak, and were inspired to action because of the stories they told? You know what I’m talking about—those times when words, coupled with the obvious emotions behind them, sent shivers down your spine and gave you goosebumps. That is the true power of storytelling.

In fact, let me tell you a story:

I recently read the book by Tony Robbins called Money: Master the Game. Tony told stories of people who lost their entire retirement fund, meaning they could no longer retire after 40 or more years of working toward it!

These stories, mixed with stories of ordinary people who could retire on a modest salary, inspired me to open an investment account and start saving for my “retirement” (which I’m not sure will ever happen, but at least I’ll have the money to do so if I choose!)

In essence, stories connect your audience to your brand, allowing you to create lasting and meaningful change in their lives.

The fundamentals of storytelling in UX

I hope by now I’ve convinced you of the importance of storytelling. Now it’s time to talk about what you came for: the fundamentals of storytelling in UX and web design.

Relevant

Your content, from your design to your copy, must captivate your visitors. If it’s not relevant to their lives, they have no reason to stick around.

Structured

Your story must be created with a structure in mind. There should be an obvious beginning, middle, and end. This could mean an introduction, an explainer video, and a call to action.

Backed by reason

You need to know why you’re telling this story. What do you want your audience to take away? Is it a worthwhile message?

Simple

Are you cutting out any unnecessary extras? No matter how good a sentence, picture, or page may be, if it doesn’t add value to the overall message, you must be willing to remove it. In writing and UX design, less is often more.

Authentic

Is your story true to you? If you’re putting up a facade, or writing something that doesn’t resonate with yourself or your brand, your users will be able to tell. The story you build through UX should check off all these boxes. There are practical steps to accomplishing that goal.

How to use storytelling in your UX

Theory is great and all, but we’re business people. We want to know the down and dirty “what’s working and how do I implement it?” advice. So I’ll give you just that.

There are a million ways to tell a story. When I asked the last time you were moved by a story, I didn’t just mention a book - I said read, watched, or listened. Storytelling is a multi-faceted experience, meaning you can combine stimuli to weave together a story stronger than the sum of its parts.

The last time you watched a good video or movie, there were colors, words, sounds, music, faces, people, and a million other subtle things influencing your feelings about the video. You can do the same thing with UX.

Some of these facets of UX include:

Type of language used, including words and sentence structure

It’s much easier to tell an engaging and appealing story with words. Doing so with just pictures is possible, but not easy. Luckily, UX includes more than just pictures.

Are you going to be a standout and use profanities? Or is your style more calm and collected? Will you use words like “elegant” and “classy” or “elitist” and “critical”?

Will your sentences be short and conversational, or will you write long, complex, scientific, data-driven research articles meant only for a very specific audience able to understand your sophisticated wording and terms? (Did you follow all that?)

Knowing your brand’s story and personality will help you answer these questions.

You need to figure out what that story is in order to figure out how to tell it.

Tempo and pace

Will you quickly move from one subject to another, with a lot going on? Or will your style be more relaxed, slowly allowing your visitors to take it all in at their own pace?

Voice and tone–formal vs. casual

What do you want the overall feel of the UX to be? Formal, casual, or something in-between?

This will depend on the type of relationship you want your customers to have with your brand, and you’ll want it to be consistent across different touchpoints.

Gamification

Gamification is the process of taking your website and adding game elements to it. Progress bars, reward points programs, and actual games on your website are all examples of gamification.

progress bar

Gamification progress bar

Gamification works well to enhance your story because it engages visitors in a way passive design simply can’t do. It triggers a cycle of a cue, a routine, and a reward.

Cue, routine, reward

For example, Dropbox’s use of gamification is in large part the key to their huge success. They gave mini tasks like installing the program, sharing a folder, and inviting friends. They even used copy saying “The seven quests”.

The cue was this popup, the routine was checking off small, easy tasks, and the reward was increased space to store your files.

Get started. You're 3 steps away from a 250 MB bonus.

Image credit: Dropbox

Interactive design elements

One of the best—and boldest—ways to tell your story is through interactive elements in your design.

One of my favorite examples of companies who do this well is Humaan. Their about page has two cool features that stick out:

1. When you hover over an employee, it tells you more about them and shows their social links.

Pictures of 8 Humaan employees with a bio of Leo Karolczak

2. At the bottom of the page, it calculates some cool stats to show you that give you behind-the-scenes of their brand’s story.

Some things you may not (need to) know about us. 09 Combined total feline ownership. 148 Git commits this week. 04 Continents our clients currently span. Etc.

By allowing users to see behind the scenes of your company, you’re creating a more personal experience. People want to know the faces behind the brand.

Conclusion

Storytelling in UX is not easy. If it were, everyone would be doing it.

But it does work. The quicker you capture the user’s attention, the longer they’ll stay on your page and the more they’ll engage with your content. The more they engage with your content, the higher the chance they’ll buy.

Storytelling done well means a bigger bottom line.

It’s all about the user. Every image you share, every word you write, every design element you create all leads back to the user. So, come up with your brand’s story, use the tactics mentioned above, and check your end product against the fundamentals of storytelling to create the ultimate user experience.

Good luck, and have fun!

Resources

5 Rules of Storytelling

Pixar’s 22 Rules of Storytelling

How to Engage and Persuade People Through Storytelling

The Blogger’s Guide to Storytelling

Better UX With Storytelling

Insights that drive innovation

Get our best human insight resources delivered right to your inbox every month. As a bonus, we'll send you our latest industry report: When business is human, insights drive innovation.

About the author(s)
Bill Widmer

Bill Widmer is a content marketing expert and freelance writer. He’s also the author of The Building Blocks of Content Marketing, a free eBook to help business owners understand what it takes to grow a successful blog.