Don’t Lose the Plot: How to Use Storytelling in UX Design

Feb 7, 2018 2:49 pm

Don’t Lose the Plot: How to Use Storytelling in UX Design



What’s your favourite book, film or tv show? Do you know why you like it so much? You probably remember it quite well. Since our time in the caves, we have been captivating attention and evoking responses through the telling of stories both fact and fiction. They are embedded into our culture and society; whether it is a classic novel, a news article or gossip between friends, storytelling in its simplest form is the sharing of information via cause and effect – and we are wired to think in this way. Research has found that storytelling activates multiple senses in our brains and the resulting flurry of emotions makes us understand the information more, retain it for longer and have a more enjoyable experience.

Traditionally when we think of storytelling and UX design, we think of personas, storyboarding, scenarios and customer journey maps; the purpose of these exercises is to inform the design of a product by understanding what the user will need and want. However, storytelling can find a place in many other areas. This article sets out to look specifically at how story can complement the design and be intertwined into the fabric of a digital product. Storytelling can affect a design through elements such as interactivity, customisation, structure, language and context; we’ll be focusing on the latter two which we believe can be quickly applied to most designs. If stories are so memorable and able to create such strong, positive, emotional responses, shouldn’t they be front and centre in a user-centred approach?

Language

We don’t think it’s necessary to discuss how powerful words can be on our perception, but it’s worth noting how the slightest difference can make a big impact; in this case, simply addressing the user through the words ‘you’ and ‘your’ makes them an active character in your story. This direct engagement shifts the user from an emotionally passive experience to a personal one that feels as if it’s built just for them. By making them a character, they have more involvement as they’re challenged to respond – they may even feel obliged to continue with your journey. Establishing a relationship between the user and your site allows them to connect fully and enhances their interest – which could have a positive impact on conversion and other KPIs.

The effect of language has been highlighted in our research, where we’ve noticed how items labelled personally with ‘My…’ have resonated positively with users. An example of this in use is shown by BMW, who engage the user by making them a character within the story; as they answer personal questions the outcome of the story changes. This is reinforced with labels such as ‘My passengers’, that provide a personal touch and help build a relationship between them and their new BMW.


On The Hunt For The Cheshire Cat, the designers aim to engage the users in a story on the website, so they will go on to buy tickets for a self-directed walking tour from the National Portrait Gallery. The language used is direct and challenging; instead of just describing the walking tour, they immerse the user as a character in the story. Without having bought a ticket yet, the user is already getting swept up in a vision of themselves navigating the streets of London, solving riddles and racing the clock.

Language changes don’t have to be monumental, just small and simple such as:

  • ‘Go To Basket’ vs. ‘Go To Your/My Basket’
  • ‘Pay Now’ vs. ‘I’d Like To Pay’
  • ‘Shop Now’ vs ‘Start Your Shop’

A step further here would be to expand these calls to action and your supporting text with language that is conversational; content is easier to understand when presented this way and creates immediate rapport with the user.

We’ve seen through our discussions with users that language can have a negative impact on their perception and usage of the site. Thinking of one example, the site in question was concerned with a serious topic, but users felt the language was too cold and wanted to feel more reassured in their actions – something that could be achieved through direct or conversational language. Evernote illustrates a good example of doing this. Here they build rapport by greeting the user with a number of statements ‘Remember Everything.’ ‘Get organised.’ ‘Succeed together.’ – concluding with ‘Meet Evernote, your second brain’. The conversational and direct language used throughout the page establish the user as a character and creates a positive relationship.

Context

Language covers the ‘who’ in the story, so context then covers the ‘what’, ‘where’ and ‘when’. Context changes the way we process information which ultimately influences our understanding of it. In UX, it creates a vision for the user; this could be an understanding of the end destination or validation of how to get there and what will help them on the way. Going through a journey with an informed idea of ‘what’, ‘where’ and ‘how’ will massively impact how users react to and remember their journey. Therefore, it’s easy to see how significant context can be in UX when aiming to build a positive experience

Context can be provided in two ways: on-site awareness and product awareness. On-site awareness is about presenting the user with a story of where they’re going to go and what they might have to do, or, if they’re in the middle of a journey, it’s telling them where they’ve been and what they’ve achieved so far. Product awareness is more about showing how your product or service is used in their lives, building an idea of what the user can expect; as soon as you show them what they can do, they start to imagine stories and scenarios in their mind.

Look at how BMW create context through both product and on-site awareness; a breadcrumb feature provides a clear outline of the journey, informing the user what stage they are at whilst a set of visuals provides a scenario (such as how their car will look on their driveway). Alongside the direct language, there’s a clear character, goal and journey all mapped out.

On The Hunt For The Cheshire Cat, users are immersed in a 3D world where content is discovered through scrolling. A progression bar gives context, allowing the user to understand where they are in the site journey.

In another example, Paypal uses both on-site and product awareness to create context. Images of different screens with supporting text outline a goal for users to achieve with information of the journey they take to get there. They present a story through the ways in which Paypal can fit in users’ lives or businesses supported by personal addressing and instructional language that inspires them to take action.

Much like Paypal, Evernote also provides context through a range of examples of their product’s uses. Several, articles are included at the bottom of the page which give more in-depth cases or guides on how to use Evernote – clicking into these give further examples of context via product awareness as well as conversational language.

You can provide the context in slightly different ways, but what do they give the user? Awareness and familiarity, therefore, reassurance and control.

Providing a clear understanding of the process ensures users are comfortable enough to make confident decisions, which is crucial for building a great experience. Context should be prevalent throughout the stages of your site but the homepage is the front cover of your book, the hub of navigation, so arguably the most important place for it to be; make them feel like it is their journey, rather than a predefined one.

Takeaway

In this article, we hope we’ve convinced you how important storytelling is to us as humans and using story elements is a great way to enhance the user experience. Some of the examples we’ve shared use interactivity and engaging imagery which we appreciate cannot fit easily into most designs; so we’ve identified some low-key story elements that could be implemented on any design to have an immediate effect. Hopefully, this article has brought about some awareness of the power of story and sparked a few ideas about where you can use it in your product. As mentioned previously, we believe storytelling can fit comfortably into many areas of UX and so we’ll be further exploring its capabilities in the near future.


We hope you’ve enjoyed this article by Jake Kitching and Craig Williams. If you want to read more, why not sign up for our regular newsletter bringing you interesting articles from the UX and our latest articles on research and UX design.