Emotional Storytelling in User Experience

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.

Transcript

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. Experience Motivation Emotion
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 The Gamer’s Brain ` 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 Vision 1 The Problem 2 The Inspiration 3 The Involvement 4 The Fascination 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 Inspiration The Involvement The Fascination
42. Introduction Resolution Product Story arc The Vision The Problem The Inspiration The Involvement The Fascination
44. Introduction Resolution Airbnb Example The Vision The Problem The Inspiration The Fascination The Involvement
45. Introduction Resolution The Vision The Problem The Inspiration The Involvement The Fascination Imagine a world without travel… Airbnb Example
46. Introduction Resolution The Vision The Problem The Inspiration The Involvement The Fascination Imagine a world without travel… If nobody left their home… Airbnb Example
47. Introduction Resolution The Vision The Problem The Inspiration The Involvement The Fascination 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 Inspiration The Involvement The Fascination 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 Inspiration The Involvement The Fascination 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. Cortisol Brain stimulation This activates our heart-rate and blood pressure which raises our awareness / creates distress
107. Oxytocin Brain stimulation This activates feelings of care and empathy. It can also encourage you to take action.
108. Cortisol Oxytocin Brain stimulation
109. Cortisol Oxytocin + 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 Offering Their Lives The Characters Our Reflection The Story 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