Sie sind auf Seite 1von 83

Designing around storytelling

The power of stories & how they can be used in UX design


by Anna Dahlstrm | @annadahlstrom
Breaking Borders, Reading 18 August 2015
www.flickr.com/photos/katerha/8435321969

Once upon a time


in a city called Lund...

xxxxwww.flickr.com/photos/ulfk/7976687420

There where
plenty of story time

www.flickr.com/photos/excomedia/sets/72157622519563566with/5233990438

We travelled
through those stories

www.flickr.com/photos/conorkeller/7860288604

We are as a species addicted to stories.


- The Storytelling Animal by Jonathan Gottschall

www.flickr.com/photos/namkeng/3209117837

Storytelling

Storytelling

Storytelling

If you cant tell it, you cant sell it.


- Peter Guber

www.flickr.com/photos/g-ratphotos/3404474275

Results repeatedly shows that our attitudes, fears,


hopes, and values are strongly influenced by story. In fact,
fiction seems to be more effective at changing beliefs than
writing that is specifically designed to persuade through
argument and evidence."
Entering fictional worlds radically alters the way
information is processed.
- FastCompany, Why storytelling is the ultimate weapon

www.flickr.com/photos/g-ratphotos/3404474275

Stories
as persuasion tools

Not just for messaging but also


an integral part of the design process

www.flickr.com/photos/saucef/7184615025

Storytelling is at the heart of everything


- Steve Levitt

www.flickr.com/photos/g-ratphotos/3404474275

Stories capture our imagination


& shows us something new

www.flickr.com/photos/carlosfpardo/6791950592

www.flickr.com/photos/declanjewell/2181100986

Now you see me.

Javier Perez via http://the-wonderist.com/2013/11/05/how-to-see-things-with-new-eyes

Now you dont.

Queenie Liaos Wengenn in Wonderland via www.boredpanda.org/wengenn-in-wonderland-sioin-queenie-liao

What do we want our users to see?

What is the story we want to tell?

Where do we want to take them?

I like to think of putting someone in a situation


where they can use the item, so they can really
imagine themselves doing it.
- Elle on how to write product copy for glimt.it

www.flickr.com/photos/carlosfpardo/6791950592

This copy makes me imagine actually sitting in


the garden with a Cosmopolitan and a great book.
- Elle on writing copy about a deck chair

www.flickr.com/photos/carlosfpardo/6791950592

Historically, stories have always been igniters


of action, moving people to do things.
- Peter Guber

www.flickr.com/photos/g-ratphotos/3404474275

Every story
takes us on a journey

Image via Shutterstock

Storytelling can
provide powerful call to actions

www.flickr.com/photos/piermario/4188959762

Stories have the ability to motivate,


change and create connections

Image via Shutterstock

What

makes for a good story?

The basic structure of a story

A beginning

A middle

The end

Dramaturgy
knowing how to apply & structure
elements to tell a story

How a story is told impacts


the human experience of its audience

Image via Shutterstock

Three act structure


PLOT POINT ONE

inciting
incident

PLOT POINT TWO

mid point

climax

confronts the main


character

tries to solve the problem but


dont yet have the skills

the dramatic question


is answered

Act one

Act two

Act three

Setup

Confrontation

Resolution

Three act structure - applied to UCD


PLOT POINT ONE
2. Starts to consider

inciting
incident

confronts the main


character

PLOT POINT TWO


4. Makes a decision

mid point

tries to solve the problem but


dont yet have the skills

1. Becomes aware

3. Looks further into it

Act one

Act two

Setup

Confrontation

climax

the dramatic question


is answered
5. Takes action
/ no action

Act three
Resolution

I asked my dad for


3 principles around good storytelling

www.flickr.com/photos/perolofforsberg/6691744587

01

Captures the imagination

If you can imagine yourself in a situation,


its infinitely scarier.
- Brad Falchuk

www.flickr.com/photos/g-ratphotos/3404474275

Users need to
be able to relate

www.flickr.com/photos/estherase/1292315618

We need to
understand who they are

www.flickr.com/photos/cannedtuna/4852756417

02

The dynamic of the story

What are the events


& people that tie it all together

www.flickr.com/photos/erin_ryan/2584551310

The ever important


red thread

www.flickr.com/photos/pulpolux/3692396234

03

An element of surprise

In general there should be a basic idea of where


the story is going, but not for every character. You
don't know who's going to die and who's going to start
becoming more important.
Big picture-wise, theres a basic idea, but you need
some surprises too. Its like driving from New York to
LA: you know youre going to get to LA, but theres 10
different routes you could take.
- Brad Falchuck

www.flickr.com/photos/g-ratphotos/3404474275

Include an element of
surprise & exploration

www.flickr.com/photos/conorkeller/4028043294

Let users
find their way around your content

www.flickr.com/photos/conorkeller/3879321839

Consider non-linear
& new forms of storytelling

Image via Shutterstock

NYT Snowfall - http://www.nytimes.com/projects/2012/snow-fall/

Image via Shutterstock

NYT Snowfall - http://www.nytimes.com/projects/2012/snow-fall/

NYT Snowfall - http://www.nytimes.com/projects/2012/snow-fall/

Medium -https://medium.com

Medium -https://medium.com

Into the Arctic - http://www.thefwa.com/shortlist/into-the-arctic-greenpeace

Into the Arctic - http://www.thefwa.com/shortlist/into-the-arctic-greenpeace

How

do we go about it?

It starts with this


PLOT POINT ONE
2. Starts to consider

inciting
incident

confronts the main


character

PLOT POINT TWO


4. Makes a decision

mid point

tries to solve the problem but


dont yet have the skills

1. Becomes aware

3. Looks further into it

Act one

Act two

Setup

Confrontation

climax

the dramatic question


is answered
5. Takes action
/ no action

Act three
Resolution

Identify the product lifecycle & its stages


Awareness
PLOT POINT ONE
2. Starts to consider

inciting
incident

confronts the main


character

Consideration

Post..

PLOT POINT TWO


4. Makes a decision

mid point

tries to solve the problem but


dont yet have the skills

1. Becomes aware

3. Looks further into it

Act one

Act two

Setup

Purchase

Confrontation

climax

the dramatic question


is answered
5. Takes action
/ no action

Act three
Resolution

Map the experience


PLOT POINT ONE
2. Starts to consider

inciting
incident

confronts the main


character

Consideration

Purchase

Post..

PLOT POINT TWO


4. Makes a decision

mid point

tries to solve the problem but


dont yet have the skills

1. Becomes aware

3. Looks further into it

Act one

Act two

climax

the dramatic question


is answered
5. Takes action
/ no action

Hygiene

Feel good

Delight

Awareness

Setup

Confrontation

Act three
Resolution

Identify where
the biggest barriers may be

Image via Shutterstock

Look at where
you want to delight them

www.flickr.com/photos/31878512@N06/4945216951/in/photostream

Plan for multiple


entry & exit points

www.flickr.com/photos/danieldslee/6913766642

Define content, functional & interaction


elements to addresses the needs

www.flickr.com/photos/angietorres/4564135455

Ensure there is
a good balance

www.flickr.com/photos/17207222@N02/5601758478

When doing this


PLOT POINT ONE
2. Starts to consider

inciting
incident

confronts the main


character

Consideration

Purchase

Post..

PLOT POINT TWO


4. Makes a decision

mid point

tries to solve the problem but


dont yet have the skills

1. Becomes aware

3. Looks further into it

Act one

Act two

climax

the dramatic question


is answered
5. Takes action
/ no action

Hygiene

Feel good

Delight

Awareness

Setup

Confrontation

Act three
Resolution

Feel good

Delight

avoid ending up with this


PLOT POINT ONE
2. Starts to consider

confronts the main


character

Hygiene

1. Becomes aware

PLOT POINT TWO


4. Makes a decision

mid point

tries to solve the problem but


dont yet have the skills
3. Looks further into it

climax

the dramatic question


is answered
5. Takes action
/ no action

inciting
incident
Act one
Setup

Act two

Confrontation

Act three
Resolution

We cannot be at
the top all the time

www.flickr.com/photos/alexnormand/5992512756

PLOT POINT ONE


2. Starts to consider

inciting
incident

confronts the main


character

PLOT POINT TWO


4. Makes a decision

mid point

tries to solve the problem but


dont yet have the skills

1. Becomes aware

3. Looks further into it

Act one

Act two

climax

the dramatic question


is answered
5. Takes action
/ no action

Hygiene

Feel good

Delight

More realistic

Setup

Confrontation

Act three
Resolution

Work with experience goals & life cycles

Hygiene

Feel good

Delight

The site
knows me
& what I
want

Awareness

Consideration

Purchase

Post purchase

Delivering
the right content at the right time

We need to know:
What we want to say
What we want our users to do

Users
are different

www.robotshop.com/blog/where-is-wall-e-1391

Identify

content & functionality for each main user

Look at how to tailor views based on


who the user is & their behaviour

Image via Shutterstock

Context

& prior knowledge plays a key role

Tailor messaging
& tone of voice

www.flickr.com/photos/pgoyette/168076182

Consider location
& cultural differences

www.flickr.com/photos/scary_mary/5700384580

Visit intent is likely to vary between these two


segments. For example, new visitors are less likely to
trust your brand and understand the key benefits to
shopping with you.
- Econsultancy

www.flickr.com/photos/g-ratphotos/3404474275

Make use of different ways


to capture & engage the user

www.flickr.com/photos/snugglepup/5225953124

Tell a continuos story


with delights along the way

www.maxfactor.co.uk

Consider & adapt


your message across touch points

Ensure the message


is considered & delivered across devices

www.flickr.com/photos/visualpunch/7351572896

Content needs to be choreographed to


ensure the intended message is preserved on any
device and at any width
- Trent Walton

www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/

Whatever we create & whoever it is for,


we want people to do something

www.flickr.com/photos/jox1989/5143301136

It all start with


Once upon a time...

www.flickr.com/photos/snugglepup/3317051065

Or maybe
Once upon a design...

www.flickr.com/photos/snugglepup/3317051065

Thank you. Questions?


@annadahlstrom @glimtit
www.annadahlstrom.com
www.flickr.com/photos/katerha/8435321969

Das könnte Ihnen auch gefallen