Downloaded 39 times
Uploaded byBuilt In Chicago
Emotional Design
This document discusses how to design products and services that create emotional connections with users. It argues that good design appeals to users on a visceral, behavioral and reflective level. It provides tips for understanding a core demographic and incorporating elements like color, language, imagery and storytelling that resonate on an emotional level. Additionally, it suggests giving users tools for self-expression and minimal interfaces that facilitate opening up about feelings over time. The goal is to design interactions where users freely share how a product makes them feel.
More Related Content
Emotional Design
- 1. Emotional Design How tocreate & encourage emotional connections using design A talk by: Christina A. Brodbeck, Co-Founder of theicebreak, an app for couples. @jellyfishbloom
- 2. First, A LittleStory 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… ♪♫♬♩♪♭♮♫
- 3. And the ringtone 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)
- 4. Your product isa Celine Dion ring tone Everyone who interacts with it has some sort of an emotional reaction to it
- 5. Part I: Howto create the emotional response you want
- 6. Emotional Design isnot 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!
- 7. Visceral: Your gutreaction Not based on reason Influenced by: texture, sound, look-and-feel
- 8. Behavioral: How youinteract with it For example -- Is it usable? Influenced by: effectiveness, how it functions
- 9. Reflective: What itmeans to you For example – Does it trigger memories? Influenced by: self image, nostalgia
- 10. Since we’re inChicago… Take a minute…and think of one of your favorite “Chicago” brands or products
- 11. For me: ViennaBeef 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.
- 12. How to Step1: 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.
- 13. How to Step2: Figure Out Your Core Demographic & 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.
- 14. 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.
- 15. Color Choice Picka 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
- 16. 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)
- 17. Design a PersonalRelationship 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
- 18. Turn Negative ExperiencesInto 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
- 19. Tell a RelatableStory, 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”)
- 20. 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
- 21. 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
- 22. Part II: Howto design products where users tell you how they feel Your product = user’s emotions. (Difference – Part I: You tell them how to feel. Part II: They tell you how they feel)
- 23. We’ve Moved intoThe 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
- 24. Give Users Toolsto 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)
- 25. 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
- 26. 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
- 27. Make them FeelSafe & 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%