Presenter: Paul Norris, Sr. Product Designer, Substantial The human brain wants stories. Marketers use this. Advertisers use this. We should also use this in the way we design software, using psychology to create attachments that run deeper than just increasing engagement. Additionally, there's one huge software arena where this is done extremely well - video games. How can we use lessons from gaming to evoke emotional responses and understanding in our user experiences? In this talk I'll explore the psychological roots of emotion in user experiences, give examples and techniques used in product and game UI, and describe how all of us can use these ideas to create software experiences that move beyond the mechanical

1. Emotional Storytelling
in User Experience
Paul Norris
Sr. Product Designer
Substantial

2. Hi, I’m Paul. I’m a designer with a background in
games, interactive media, and products.

3. User Experience
Storytelling in
The human brain wants
stories.

4. The human brain wants stories.

5. Landscape
The

6. Marketing Pages

11. QUICK SIGN UPS
FEATURE
LISTS
SEO DOMINANCE
HUGE CTAS
TAGLINES
LOGO WALLS

14. Problem
The

15. The Formula

16. When our formulas become patterns, our designs end up being too
similar and predictable. It reduces the ability for our audience to be
surprised, making them less likely to be engaged.
The Formula

17. But When our audience is surprised and delighted, they will be
engaged, making them more likely to listen to what we have to
say.

18. Engagement
1. Motivation
2. Emotion
3. Experience
But When our audience is surprised and delighted, they will be
engaged, making them more likely to listen to what we have to
say.

19. We need find and connect with
our audiences in order to
motivate them.
1. Motivation

20. We need to reach their
thoughts, feelings, and
sensations .
2. Emotion

21. We need to design satisfying
experiences that inspire them to
take action.
3. Experience

22. If you overlook these 3 aspects, your audience
will overlook your product.
ExperienceMotivationEmotion

23. emotion cognition action + impulse
If we don’t pull at our audience’s emotions, they
aren’t motivated to care about what we have to
offer.

24. As humans we seek to feel satisfying emotions.
The more our audience resonate with our stories,
the more likely they are to engage.

25. Improve?
How can we

26. We can learn from games and immersive media (i.e. VR)

27. ≈
We can learn from storytelling

28. “In games, knowledge of cognitive science is critical to the success
of UX. You use emotional states to guide your players through
an experience. Music, sound effects, art direction, controls
mechanics are all tools to support the underlying story that motivates
a player to continue.”
- Celia Hodent
`
We can learn from the psychology of storytelling

29. “In games, knowledge of cognitive science is critical to the success
of UX. You use emotional states to guide your players through
an experience. Music, sound effects, art direction, and control
mechanics are all tools to support the underlying story that motivates
a player to continue.”
- Celia Hodent
The Gamer’s Brain

30. Storytelling
Strategies for

31. 1. Story Arcs
2. Game Interfaces
3. Product Interfaces
Strategies

32. 1. Story Arcs
2. Game Interfaces
3. Product Interfaces
Strategies

33. “We help the audience direct the way they feel about
something. It's our job direct the audience’s feelings.
The story is the emotional journey, you make up the world
and the world becomes your plot.”
- Francis Glebas
Disney Film Director
(The Lion King, Aladdin, Pocahontas)

34. Introduction Resolution
≈
Stage 1
Stage 2
Stage 3
Stage 4
Stage 5
😲
🤔

35. The 5 Stages
The
1
The
2
The
3
The
4
The
5

36. 1. The Vision
What is your idea?

37. 2. The Problem
What is their current problem?

38. 3. The Inspiration
What can they learn?

39. 4. The Involvement
What choices must your
audience make?

40. 5. The Fascination
The outcome and satisfying
effect at the end.

41. Craft your story
The
Vision
The
Problem
The
Inspiratio
n
The
Involvement
The
Fascinatio
n

42. Introduction Resolution
Product Story arc
The
Vision
The
Problem
The
Inspiratio
n
The
Involvement
The
Fascinatio
n

44. Introduction Resolution
Airbnb Example
The
Vision
The
Problem
The
Inspiratio
n
The
Fascinatio
n
The
Involvement

45. Introduction Resolution
The
Vision
The
Problem
The
Inspiratio
n
The
Involvement
The
Fascinatio
n
Imagine a world
without travel…
Airbnb Example

46. Introduction Resolution
The
Vision
The
Problem
The
Inspiratio
n
The
Involvement
The
Fascinatio
n
Imagine a world
without travel…
If nobody left their
home…
Airbnb Example

47. Introduction Resolution
The
Vision
The
Problem
The
Inspiratio
n
The
Involvement
The
Fascinatio
n
Imagine a world
without travel…
There would be:
no human exploration.
no knowledge seeking.
no countries.
If nobody left their
home…
Airbnb Example

48. Introduction Resolution
The
Vision
The
Problem
The
Inspiratio
n
The
Involvement
The
Fascinatio
n
Imagine a world
without travel…
There would be:
no human exploration.
no knowledge seeking.
no countries.
So, we urge you…
(donate with us)
If nobody left their
home…
Airbnb Example

49. Introduction Resolution
The
Vision
The
Problem
The
Inspiratio
n
The
Involvement
The
Fascinatio
n
Imagine a world
without travel…
If nobody left their
home…
There would be:
no human exploration.
no knowledge seeking.
no countries.
Keep. Traveling.
Forward.
- Airbnb.
So, we urge you…
(donate with us)
Airbnb Example

51. We want our audience audience to see our stories as
aspirational. They choose to invest in your story,
because they believe it will positively effect them.

52. Disney’s Story Arc
The
Wrong
The
Wish
The
Worst
The
Wonder
Introduction Resolution

53. The
Wrong
The
Wish
The
Worst
The
Wonder
Introduction Resolution

54. The
Wrong
The
Wish
The
Worst
The
Wonder
Aladdin wants to
be a prince

55. The
Wrong
Resolution
Aladdin gets tricked
by Jafar

56. The
Wrong
The
Wish
Introduction
Aladdin’s dream comes
true, becomes a prince
(temporarily).
A moment of
good…

57. The
Worst
Aladdin is exposed as not a
real prince, Jafar takes
control

58. Things develop and conflict
happens….

59. The
Wrong
The
Worst
The
Wonder
Aladdin overcomes the
odds, defeats Jafar and
rescues his friends.

60. Aladdin’s Story Arc
The
Wrong
The
Wish
The
Worst
The
Wonder
Introduction Resolution
Aladdin gets tricked
by Jafar
Aladdin’s dream comes true
(temporarily), becomes a
prince
Aladdin is exposed as not a
real prince, Jafar takes
control
Aladdin wants to
be a prince
Aladdin overcomes the
odds, defeats Jafar and
rescues his friends.

61. Each of these stages drove emotional
engagement and investment in our ideas.
Positive motivation can cause us to take action.

62. We use stories to breakaway from the
conventional structures of products that focus
on task driven conversions. Stories help create
human connections.

63. 1. Story Arcs
2. Game Interfaces
3. Product Interfaces
Strategies

64. How do we present these storylines as
immersive experiences that satisfy our senses?

65. Diegesis storytelling

66. Diegesis storytelling
A fictional storytelling technique where the narrator presents
the actions and thoughts of the characters to the audience.
Details about the world, and each character’s experiences are
revealed through the narrative.

67. `
Diegesis storytelling in games.
Players & Characters Diegetic Designs

68. DIEGETIC
UI that lives in the
story’s game world
Diegesis storytelling in games.

69. DIEGETIC
NON-
DIEGETIC
UI that lives in the
story’s game world
UI that lives outside
the story’s game
world
Diegesis storytelling in games.

70. DIEGETIC
NON-
DIEGETIC
`
SPATIAL META
Informative &
representational UI
UI that lives in the
story’s game world
UI that lives outside
the story’s game
world
Diegesis storytelling in games.

72. Diegetic

73. Diegetic

74. The player & characters see this
Diegetic

75. Non-Diegetic

76. Spatial & Meta

77. Spatial & Meta

78. Mixed

79. VR interfaces

80. VR interfaces

81. VR interfaces

82. VR interfaces

83. VR interfaces

84. Our audience desires to feel satisfied when
interacting with our designs.
This increases their attentiveness, and general
feelings of happiness.

85. They will react to these experiences in 3 ways…

86. INHERENT
Subconscious dislike / liking of things. Our
initial reactions to experiences.
They will react to these experiences in 3 ways…

87. INHERENT
REFLECTIVE
Subconscious dislike / liking of things. Our
initial reactions to experiences.
How it reflects to our broader life
experiences
They will react to these experiences in 3 ways…

88. INHERENT
BEHAVIORAL
REFLECTIVE
Subconscious dislike / liking of things. Our
initial reactions to experiences.
Our combined, collective experience
How it reflects to our broader life
experiences
- Don Norman
Emotional Design: People and Things
They will react to these experiences in 3 ways…

89. 1. Story Arcs
2. Game Interfaces
3. Product Interfaces
Strategies

90. Let’s look at some concepts that merge
both product design and storytelling.

91. Conversation
Bots
Creates story
relationships as
a way to learn

92. Immersive
Visual
Language
Characters that
live within the
story’s narrative
world

93. Immersive
Visual
Language
Characters that
live within the
story’s narrative
world

94. Immersive
storytelling on
the web

97. We use the web, products and design to
connect with people. Stories showcase our
designs when we aren’t there to show them
ourselves.

98. - Curt Cloninger
A List Apart
“The web is not a global network of connected
computers. The web is a global network of
connected people. And storytelling is still the most
effective way to emotionally impact people.”

99. Strategies
1. Story Arcs
2. Game Interfaces
3. Product Interfaces

100. 1. Story Arcs
Emotion + Motivation +
Engagement

101. 2. Game Interfaces
Experiences that feel satisfying

102. We connect people with stories via the web
3. Product Interfaces

103. Of Storytelling
Emotional impacts

104. When we are engaged, our minds are motivated to
help us determine the correct behavioral responses
to our experience.

105. Brain stimulation

106. Cortiso
l
Brain stimulation
This activates our heart-rate and
blood pressure which raises our
awareness / creates distress

107. Oxytoci
n
Brain stimulation
This activates feelings of care
and empathy. It can also
encourage you to take action.

108. Cortiso
l
Oxytoci
n
Brain stimulation

109. Cortiso
l
Oxytoci
n
+
Brain stimulation

110. Brain stimulation
Stories stimulate our neural coupling, where the same regions of the
brain can be activated from the teller to the listener. In other words,
empathy is not just a nice word, it is something physical and
biological in our brains and body chemistry.
- Dr. Uri Hanson
Neuroscientist and researcher at Princeton University
Empathy

111. Your
Their
The
Our
The
Our Brain

112. Sensitivity
It’s critical to be genuine. Believable context has
significant impact on persuasiveness.
When you’re inauthentic, it can have an averse effect
on the story and delivery.

113. Being genuine and empathetic creates trust.
When we do that, our audience is more attentive,
and more likely to listen.

114. Resolution
The

115. Conclusion
1. Storytelling captures our audience’s attention
Takeaways

116. 2. We can learn from other mediums (like games) to better tell our
stories.
Takeaways

117. 3. Emotion + motivation + experience enables our audiences to be
engaged with us (if they can resonate with it).
Takeaways

118. Takeaways
3. Emotion + motivation + experience enables our audiences to be
engaged with us (if they can resonate with it).
1. Storytelling captures our audience’s attention
2. We can learn from other mediums (like games) to better tell our
stories.

119. How can we change the landscape?

120. Instead of this…

121. Put a story into your design.

122. Explore new ideas

123. Know that how you say something is just as
important as what you are saying.

124. Make it fun. Your audience will be invested
when they are visually stimulated.

125. Thanks
Now go create some stories!
norris@substantial.com @botluap
get in touch tweet me
jobs@substantial.com
We are hiring!

126. Experience Themes: An Element of Story
Applied to Design
Cindy Chastain
References
Emotional Design: People and things
Don Norman
Moving Forward Ad Campaign
AirBnb
Wikipedia Cognitive Bias Codex
The Cognitive Bias Codex
The Sparring Mind Articles
The Sparring Mind
The Gamer's Brain Research
Celia Hodent
This is Your Brain on Communication
Dr. Uri Hanson
A List Apart
Curt Cloninger
In the blink of an eye: Study
MIT Data Processing