Emotional DesignHow to create & encourage emotional connections using design A talk by: Christina A. Brodbeck, Co-Founder of theicebreak, an app for couples. @jellyfishbloom
First, A Little Story to Start Things Off So, the other day I was in Starbucks and this woman’s cell phone started to ring and play a very loud ring tone… ♪♫♬♩♪♭♮♫
And the ring tone was Celine Dion It was “My Heart Will Go Own” from Titanic (yes, really) Some people groaned Some people were visibly chuckling My friend said “Really, Celine Dion?” Some people (like me) were reminded of happy memories (it so happens my first ever “real date” was watching Titanic)
Your product is a Celine Dion ring tone Everyone who interacts with it has some sort of an emotional reaction to it
Part I: How to create theemotional response you want
Emotional Design is not a new idea It’s just that traditionally we cared more about “does it work” than “does it connect.” But you need to care about both. In 2005 Donald Norman wrote a book called “Emotional Design” and he talked about a theory….that all good designs appeal to users on 3 levels: visceral, behavioral, and reflective You need to think about all 3 levels!
Visceral: Your gut reaction Not based on reason Influenced by: texture, sound, look-and-feel
Behavioral: How you interact with it For example -- Is it usable? Influenced by: effectiveness, how it functions
Reflective: What it means to you For example – Does it trigger memories? Influenced by: self image, nostalgia
Since we’re in Chicago…Take a minute…and think of one of yourfavorite “Chicago” brands or products
For me: Vienna Beef Hot Dogs I’m from Chicago, and live in California. I miss them. Really hard to get in San Francisco. Reflective: Brings back great memories of high school. Visceral: The texture. Harder casing than most hog dogs. Behavioral: Very effective. Fills me up & tasty.
How to Step 1: Personify Your Design & Brand Try this personification exercise. Answer these questions and collage it: …Your product walks into a bar Q. Are they male or female? What age are they? Q. What are they wearing? What shoes, pants, dress? Q. What’s their pickup line to “close” or “sell” someone? Q. 3 words that someone at the bar would use to describe them? This exercise establishes what emotions you want your product to evoke.
How to Step 2: Figure Out Your CoreDemographic & Design for Them Like Celine Dion, your product isn’t going to appeal to everyone, but find out who it does appeal to. Does your design & brand resonate with them? Test it with various groups of people. If not, who does it resonate with? You need to be willing to change your assumptions.
Real World Example: theicebreak In our initial closed beta of 80 people we found that theicebreak was resonating most with non-techies and non-early adopters. It was appealing to people with more traditional values. So we decided to design for them.Success: Today 81% of our users are from outside of CA and NY…places where generally people are more traditional.
Color Choice Pick a palette that appeals to your demographic and their geographic location Red: love, anger, passion, emergency, importance Orange: happiness, joy, youth, warning Yellow: optimisim, intelligence, positivity Green: money, sterile, safety, harmony Blue: peace, calm, trust, dependability, cold, aloof Purple: creativity, luxury, sophistication, seriousness Black: elegance, professionalism, sadness White: Cleanliness, dependability, trust, innocence
Tone & Language Language: You want to talk with your users not to you users Conversational speech makes users feel relaxed, at ease, and natural Small doses of humor makes people feel comfortable (like Freddie the Mailchimp mascot)
Design a Personal Relationship with Your Users Give it a personal touch Sign outgoing emails from the founder, ceo, or team (example: Pinterest) Highlight your team and their personalities as features on your blog, site, or app Highlight and feature users on your blog, site, or app
Turn Negative Experiences Into Positive Ones Intercept what could be perceived as bad and spin it as good Example: Hootsuite. When not updating/syncing Hootsuite shows their mascot owl being asleep. Instead of wondering why it’s not updating, users are given information and an action they can take via a cute owl
Tell a Relatable Story, Not Just the Facts Package facts and data so the user gets a result they can relate to instead of just a bunch of random information Tell them what the data means, and how it applies to their lives Examples: Weight loss sites. (Instead of just showing them a chart with the pounds lost, tell them “Congrats! You’ve lost 30 pounds. Just 10 more to go”)
Make it Familiar Use familiar icons and terms people already have a connection with Example: iPhone phone icon Makes people feel comfortable, relaxed, and brings back memories
Use “Aspirational” Photographs Sell users their dream. Use photos to spark emotions of what they aspire to want or be, but don’t have The fashion industry knows this well. Example: Vayable – travel site Large photo on the front page of a travel experience you would love to go on someday
Part II: How to design productswhere users tell you how they feelYour product = user’s emotions.(Difference – Part I: You tell themhow to feel. Part II: They tell youhow they feel)
We’ve Moved into The Emotional Web Trend: The Internet has moved beyond tools for functional need, and instead into tools for self-actualization and esteem Maslow’s Hierarchy of Needs Facebook Linkedin Amazon
Give Users Tools to Be Creative Let users show you how they feel through creation and curation This gives you insight into their emotions Examples: Instagram (filters), Viddy (music, filters), Stupeflix (editing tools), Pinterest (Curation)
Use Time-Relevant Prompts This way you can find out how someone is feeling at a precise moment, which generates more data for you. Examples: Karma – smart days, Facebook – friend got married say congratulations, just-in-time feedback popups
Use Minimal UI Make the UI more about the user than the product. Your UI should fade into the background. Let the user stand out. This way you find out what’s important to them and how they feel about things, by what the user showcases. Examples: Evernote Clearly – what they highlight, Pinterest – what’s on their board
Make them Feel Safe & Secure In safe spaces, people give more freely of their emotions. Then they will tell you how they feel. Example: theicebreak (intimate data = anonymous identities, which encourage honest answers)Success: 74% of users say theicebreak has helped their relationship. Overall happiness of our users has increased by 10%