23 April 2010
Emotional Interface Design: The Gateway to Passionate Users
We’re changing. Our relationships online and in real life are shifting as we become more public with our private lives. Online social networks have helped our real world social networks transcend time and space making it easy (and seemingly essential) to share the triumphs, tragedies, and trite moments of life. No longer do you simply tell your best friend that you’ve broken up with your boyfriend. It feels natural to many people to tell hundreds of Twitter followers, and Facebook friends.
No matter how you feel about the appropriateness of over sharing, the shift towards a public private life is changing our expectations of the relationships we create online. Remember the websites of the late 1990′s and early 2000′s that used formal language to create a professional, guarded persona and brand? The trend was towards the serious, because it seemed like you couldn’t land clients or entice new users if you weren’t stuffy.
Figure 1. Kenny Meyers uses humor in his portfolio to connect with his audience.
Oh how times have changed (figure 1). Today it’s typical for a web designer or developer to let her personality shine through on her websites. Many popular web apps are also tapping into emotional design techniques that are far from the stuffed-shirt approach of old. As users let their humanity show online, frontiers of communication are opening for web designers.
Usable = Edible
We’ve spent the last decade-plus striving to create usable web interfaces. It’s not always been easy to win over bosses and clients, but the value of user-centered design has made great strides. More often than not, we can count on it being baked into our professional process. But that’s a pretty low bar to shoot for.
When we go out to dinner at a fancy restaurant, we’re hoping for more than just an edible meal. We’re hoping for amazing taste and texture, clever presentation, and memorable ambiance. The pinnacle of a top culinary experience is extreme pleasure. Why don’t we shoot for the same target in web design?
Why do we settle for usable when we can have usable and pleasurable (figure 2 and 3)?
Figure 2: Basecamp is usable
Figure 3: Wufoo is usable and pleasurable
Wufoo is a business-focused app that goes beyond being usable. It was designed to be fun, because the task of creating forms to store data is inherently dry.
“The inspiration for our color palette did come from our competitors. It was really depressing to see so much software designed to remind people they’re making databases in a windowless office and so we immediately knew we wanted to go in the opposite direction. My goal was to design Wufoo to feel like something Fisher-Price would make. We were determined to make sure Wufoo was fun.” – Kevin Hale, Wufoo
As Hale indicates, they were thinking of the way users might feel when using their app, and designed an experience that ensured the user’s emotional needs are met.
Hello, Maslow
In 1943, Abraham Maslow proposed a theory of the hierarchy of human needs. He posited that humans have basic needs that must be met before other advanced needs can be addressed (figure 4). His theory states that humans flourish when the top tier of needs are fulfilled.
Figure 4: Maslow’s Hierarchy of Needs.
By mapping Maslow’s insights into human psychology over to interface design concepts, we can get a better understanding of the way our audience works (figure 5).
Figure 5: We can remap Malsow’s hierarchy of needs to the needs of our users.
The interfaces we design must first be functional – they need to solve a problem for us. Next, they need to be reliable – no fail whales please. Our interfaces need to be usable – easy to learn, easy to use, and easy to remember.
The piece we often overlook is the pleasure. It’s at the core of culinary arts, but we find it far too infrequently in the web apps and websites we use daily. Personality is the conspicuous difference between Basecamp and Wufoo (figures 1 and 2). Personality is the platform for emotion. It’s the framework we use to crack jokes, empathize, and connect with other humans. If we can bake emotion into the interfaces we design, we reap big benefits.
Emotion in Design
Babies create bonds with their parents through an interesting feedback loop. When they cry their parents respond by soothing them, which releases calming neurotransmitters in their brains. As this cycle repeats, the baby begins to trust that their parents will respond when they need them.
A similar feedback loop happens in interface design. Positive emotional stimuli can build a sense of trust and engagement with your users. People will forgive your site or application’s shortcomings, follow your lead, and sing your praises if you reward them with positive emotion.
Aral Balkan’s Twitter iPhone app – Feathers – deftly combines usability and emotional design to create a pleasurable user experience. As you type a tweet, a cute birdy mascot starts to fill with color to indicate how many characters you have left of the 140 maximum (figure 6). If you exceed 140 characters, the bird changes red to indicate your error (figure 7). While satisfying a basic usability heuristic to provide feedback about system status, Balkan has also created an interaction with which his audience can fall in love.
“I really *LOVE* the singing bird when you send a tweet. Twitter is fun all of a sudden!” – @thetalldesigner
Figure 6: As you type a tweet into Feathers for iPhone, the mascot fills to give feedback on message length.
“Confession: sometimes I make too long Feathers-tweets just to watch the bird turn red.” – @evbjone
Figure 7: If your tweet is too long, the Feathers bird turns red giving feedback in a fun way.
The feathers bird creates a powerful connection with users because it’s a point of empathy. As @thetalldesigner states above, he doesn’t just like this app, he loves it. It’s not an application that’s providing feedback, it’s a fun little friend with personality, and personality is the platform for human emotion.
“Before your application can create an emotional relationship with the user it must get the basics right. The emotional relationship, the delight, is what you layer on top of this base usability and technical competency.” – Aral Balkan, designer/developer of Feathers
TapBots are following similar principles to create wildly successful utility apps that track your weight and do simple unit conversion. That’s no small feat. How do you get excited about tracking your weight loss (or gain)? The answer—create points of emotional connection.
“We did want our users to have an emotional connection to our apps. Most people don’t have a love/joy for software like geeks do.” – Mark Jardine, TapBots Designer
Figure 8: TapBots apps use personification to create a cute robot personality that almost seems human.
The movie Wall-e was the inspiration for Weightbot and Convertbot.
“Our concept for the first 2 apps was selling our apps as if they were physical robots. That’s why the icons resemble the interface. We also gave the icons eyes to humanize them a bit. But we use this idea as a selling point and not to distract the user in the actual app. We want our apps to be used seriously, but also give the sense that they are more than just a piece of software.” – Mark Jardine, TapBots Designer
It comes as no surprise, with the great care and attention Jardine has put into the relationship Tapbots have to the people that use them, that the feedback they’ve received confirms the emotional connection they sought to create.
“ I adore the way their apps look and sound.” – John Gruber, Daringfireball.net
Treats & Discovery
Sometimes the emotional connection we make with our audience through design is less visible. There’s a magic about hearing a favorite song on the radio that playing it on your iPod just doesn’t have. The difference is the surprise discovery.
People love to discover treats in interfaces just as they do in real life. Perhaps you’ve been delighted to return to your hotel room to discover, “Oooh! A chocolate on my pillow!” The joy is more than the treat, it’s the discovery of the treat and the feeling that someone took the time to think of you.
Photojojo – a website for photography enthusiast – sprinkles treats throughout the shopping cart process. A little “learn more” balloon sits to the right of product images. When you click it, the ballon floats down to the product description (figure 9). The ballon solves a usability problem by making users aware of the detailed information that may not be visible through a small browser viewport. But the interaction is pure delight.
Figure 9: Photojojo rewards users with interaction treats as they browse their catalog and make purchases.
An empty shopping cart shows a sad face, but when a product is added, it turns that frown upside down. When entering your name during the checkout process, a little robot appears to welcome you as a new customer (figure 10).
Figure 10: A little robot greets new Photojojo customers as they complete the checkout process.
Treats and discovery are an important part of the design process in the user experience team that I lead at MailChimp. We’ve discovered that humor laced into copy, the personality of Freddie the MailChimp, and many easter eggs (figure 10) tucked into the workflow can transform an otherwise mundane task into an experience that people look forward to, and sometimes even miss.
“I didn’t even have to use @mailchimp today, but I still logged on – why? cause I <3 the @mailchimp chimp! he’s sooo witty…” – @hgalicia
Figure 11: When you preview your email in MailChimp, don’t stretch the browser window too wide or you’ll pop off the chimp’s arm.
The Risk of Emotion
As is true in real life, showing emotion in design has real risk. Some people won’t get it. Some people will even hate it. But that’s okay. Emotional response to your design is far better than indifference.
Showing personality in your app, website, or brand can be a very powerful way for your audience to identify and empathize with you. People want to connect with real people and too often we forget that businesses are just collections of people. So why not let that shine through?
Enjoy this article?
If you liked this article, feel free to re-tweet it to let others know. Thanks, we appreciate it :)
We love .net Magazine
We're big fans of .net so they've hooked us up with a rad deal: Save 45 percent on your subscription.
Anthony Garritano
# April 23, 2010 - 3:20 pm
This has to be the best article from Carsonified ever. I was halfway done with the article, and I’m going, “Who *is* this? This is a beast of an article!.”
Arthur, this has to be one of the most well put together articles I’ve read in a long time. Informative, sweet, and straight to the point. Notice I didn’t put length in there. I *didn’t care*. It was just so freakin’ awesome.
Great job, I hope to see more from you!
Aarron Walter
# April 23, 2010 - 5:20 pm
Thanks for the kind word, Anthony.
Jordan Moore
# April 23, 2010 - 3:27 pm
Just a heads up, the Basecamp screenshot is actually a Redmine screenshot.
Keir Whitaker
# April 23, 2010 - 4:14 pm
Thanks – corrected :)
Cook
# April 23, 2010 - 3:31 pm
a very well written article….really liked it
toni
# April 23, 2010 - 3:52 pm
Pure awesomeness!
Rich Angstadt
# April 23, 2010 - 4:02 pm
Great article. I think a lot of people confuse usable with pleasurable or at least they settle with a site that’s usable. It’s often just that little bit extra that goes a long way.
Steve
# April 23, 2010 - 4:05 pm
FYI – Figure 2 looks like Redmine (http://www.redmine.org) and not Basecamp.
Imad Mouaddine
# April 23, 2010 - 4:07 pm
Well done. Nice Article indeed.
Matt Henderson
# April 23, 2010 - 5:46 pm
Thanks for a *great* article, Aarron.
We recently redesigned our own site, and added an easter-egg that is displayed when one sends feedback using the contact form. I’ve been debating whether to keep it or not, but after reading this article, I’ve decided — it’s staying!
By the way, coincidentally, we just opened a MailChimp account, and are really enjoying the product. It was a nice surprise to, after reading this article, see that you’re behind the service.
Thanks again!
Kenny Meyers
# April 23, 2010 - 7:07 pm
Thank you so much for the props, Aarron.
For those interested the design of the first screenshot was done by the incredibly talented Matthew Anderson (http://matthew-anderson.net/).
Jon Reil
# April 23, 2010 - 8:05 pm
Worth every second of my time. It was very helpful to see the remake of Maslow’s Hierarchy in regards to web design. The visuals really helped tie the concept together in one quick glance. Great post and thank you for the much needed Friday afternoon inspiration.
AllDesignResources
# April 24, 2010 - 3:43 am
nice article, add to favorite and shared with friends.
Tyce Clee
# April 24, 2010 - 3:24 pm
Excellent article, informative and engaging. Cheers!
Natalia Ventre
# April 24, 2010 - 10:14 pm
I agree with the conclusion, Aaron, either you love these interfaces or hate them.
In the case of MailChimp, luckily there’s an option to turn off the monkey jokes (I’m a party pooper), but in other sites humor becomes noise.
Ksenia
# April 25, 2010 - 9:25 am
Great article :) I’m pleased to see that the days of too serious and dull apps and websites are over. I think life is (too often) grey enough. I don’t want more “grey” apps to remind me of it.
Daniel The Scheduling Wizard
# April 25, 2010 - 11:03 am
Wohoo, exactly what I was looking for!
You mostly showed examples that have to do with design, but the copy plays a big part of it too. Mailchimp does this very nicely, but hey, everything a monkey says is funny!
My absolute favorite is Innocent smoothies. Every word on their website and their drinks are just pure art. It’s like magic dust, sprinkled over a conversation with a friend. http://www.innocentdrinks.co.uk/
Kim Bach
# April 25, 2010 - 11:40 pm
I know that I’m a lousy designer, now I know, some of the reasons why, so thank you!
ps. Clippit and friends (Microsoft Office Assistant http://en.wikipedia.org/wiki/Office_Assistant) were “pleasurable” and EVERYONE (besides me :-)) hated them. One of the problems was that you, probably, don’t need things like that in a business office productivity suite, or maybe we just need a better implementation
Aarron Walter
# April 26, 2010 - 10:34 pm
People hated Microsoft Clippy for a good reason – he got in the way of the basic workflow. Rule number one when designing for emotion: emotional engagement can not interfere with the other core user needs (the app should be functional, reliable, and usable). The power of emotional design cuts both ways. If it’s done well you develop devout users and evangelists. If it’s done poorly like with Clippy, which interfered with basic workflow, it can enrage users who aren’t getting basic needs met.
Regis Kuckaertz
# April 26, 2010 - 8:52 am
I like the idea of using delighters in design, but they have a drawback: from surprises, they become expectations.
Don’t put a chocolate on the pillow and people will get deceived. Put the same chocolate every time and they’ll stop paying attention.
Have you ever had to deal with that? And if yes, do you have any recommendation?
Anyway, this article was a breath of fresh air, I enjoyed every word of it; thank you very much.
Aarron Walter
# April 26, 2010 - 10:28 pm
People tend to not overlook or under appreciate consistently placed treats. Case in point – Google’s evolving themed logo tailored to commemorate special days. Users may have expectations that Google will keep up the practice, but they’re not taking it for granted. If you are giving users a treat, most of the time they’ll love it, some of the time they’ll hate it, but rarely do they take it for granted.
Cason
# May 2, 2010 - 6:46 am
Google uses a new image every holiday. The treat is in the same place, but it’s always a new flavor.
Andy Gongea
# April 26, 2010 - 9:15 am
Great article, Aarron. Thanks for sharing it with us.
Cheers!
@Colley1962
# April 27, 2010 - 10:23 am
I am not a web designer, but I do tend to read quite a few blogs. And as I was reading your article, I was thinking of the blog designs that “drew me in” and made me want to come back. Until now, I never realized how much importance the aesthetics of a website can play into the success of that website. Thanks for the GREAT eye-opening article!
@Colley1962
# April 27, 2010 - 10:32 am
By the way, I’ve bookmarked this blog. And I certainly hope you, Aarron, begin submitting articles on a regular basis! I will be waiting!
Squiders Maidstone
# April 27, 2010 - 5:42 pm
nice reading, i immediately went on to mailchimp to test his arm, does that make me wrong?
Bradley Hebdon
# April 27, 2010 - 6:29 pm
Great article!
I do however question that pleasurable, usable, functional etc lie within a pyramid, as opposed to facets on the same plain.
sbuster
# April 27, 2010 - 8:43 pm
Excellent post friend deverdad that clear. I would like you to see this “Objetivs clear user interface” http://sbuster.co.cc/uncategorized/objetivos-claros-de-la-interface-de-usuario/
Rlmagyar
# April 27, 2010 - 10:20 pm
The problem with “Emotional” design is that everyone has their own definition of what is and is not included in emotions. It’s one thing to specify variable names, but quite another to define and measure these concepts using valid and reliable operational definitions. Introducing concepts like Mazlow’s Heirarchy of Needs adds a nice tweak of apparent “scientific validation” to the area which most often is enough to provide the uninformed masses with sufficient face validity for them to accept and “buy into” this whole new “science”. Richard Feynman warned us years ago of the dangers of devloping “Cargo Cult Sciences” but once again it appears that history is repeating itself.
Aarron Walter
# April 28, 2010 - 2:15 pm
You’re missing the point. The article is not trying to make emotion a science. It’s simply observing that humans need more than logic to feel satisfied.
Mark
# April 30, 2010 - 7:18 am
Ah Rimmy, it’s a lovely irony that an article about emotion provoked you to leave such an emotionless response.
Guess we’d better keep the door to the ‘science’ room closed in case the ‘uninformed masses’ come in and make a mess of all the equipment, eh?
Graham
# April 28, 2010 - 7:10 am
Fantastic article!
Thanks so much for sharing these points – it really did give room for a lot of thought.
Marc
# April 28, 2010 - 12:03 pm
thanks for sharing your thoughts!
This was my first article I read at carsonified and it definitely made me coming back.
This one is “a pretty high bar to shoot for” for all upcomming articles.
Keep it up,
Marc
CSS-Design
# April 28, 2010 - 1:12 pm
Emotions are always the best solution to get interaction and the best way to get emotions is the implementation of graphic elements like images, icons and or the “right color”.
Octavio Corral
# April 29, 2010 - 1:43 am
Great read! Just some advice to developers/designers, don’t even try this emotional response thing if you can’t get the ‘usable’ part down. Building a ‘usable’ app is hard enough as it is.
Adam Trachtenberg
# April 29, 2010 - 9:25 pm
If you like Maslow and the Web, you should check out the presentation from my former co-worker Rolf Skyberg: “Web2.0: Why we got here and what’s next” at http://bit.ly/drPZJK. (Don’t let the number of slides scare you, they are meant to be clicked through quickly…)
Felipe Spina
# April 30, 2010 - 4:45 pm
Awesome post :)
I am looking more info about Emotional Design and I am figuring it out as well.
I reckon that emotional connect is more important than new hypes or technological things, why the reason? simple, it’s thing sounds more naturally!
I share my presentation from design course, and i try to explain it, could you check it out:
http://www.slideshare.net/fspina/emotional-design-2636529
BTW, I agree everything in this post and help to open our mind.
Cheers
Shlomi Zigart
# May 4, 2010 - 8:34 am
Thank you Aarron Walter :)
Great article. Great timing.
I’m not such a fan of the forms sample…because the Wufoo isn’t such a kickoff
But the iPhone apps and the Maslow sample especially…is brilliant!!
Hopping to read more of your stuff.
Thanks again.
Kristie
# May 12, 2010 - 1:37 pm
Thanks Aarron. Really great article… and I was thinking throughout about the risk involved in inserting a little personality and fun, but you’re right – the benefit of reaching people that way far outweighs the cost of losing a few humourless ones along the way. Not only a good interface design tip, but maybe a life tip too??
Thanks again.
Tak
# May 13, 2010 - 5:51 am
Fantastic article. Thank you so much for sharing your insight.
James
# May 14, 2010 - 9:27 am
I’m glad you mentioned the risk factor… The Windows XP search puppy and the MS Office personified paperclip still give me homicidal nervous twitches…
Aarron Walter
# May 18, 2010 - 2:54 pm
Those concept break down because they compromise the strata below pleasure on the pyramid hierarchy mentioned in the article. Emotional engagement fails when it interferes with functionality, reliability, and usability.
prisca
# May 18, 2010 - 1:48 pm
Brilliant article ;) thanks so much for sharing!
Jason Zimdars
# May 18, 2010 - 2:21 pm
In the example of Basecamp and Wufoo, I think you’re confusing “pleasurable” with “friendly”. Don’t get me wrong, I love the way Wufoo’s writing and design set a fun tone — especially for a task that is typically pretty dry. It’s great. But I think that sells Wufoo a little short. What makes Wufoo and Basecamp and my Mac and tons of other great things pleasurable to use its that they make my work easier — they make me feel productive, good at what I’m doing. Wufoo’s cheerful tone differentiates the app from their competitors, but I have no doubt that it would be a pleasure to use even if the tone were more serious and straightforward. And no amount of friendly copy and visuals is going to make a poor app a pleasure.
Ross Johnson
# July 29, 2010 - 1:11 pm
I agree completely, nor would you want it to try and be “fun and pleasurable.” Going over the top on trying to be emotional would simply get in the way and make the tool that is supposed to help you, more difficult to use.
Robert Hsu
# July 29, 2010 - 6:49 am
A delightful article to read…
Robert
# July 29, 2010 - 11:14 am
I appreciate that it is important to make your web app/website enjoyable to use, but there are dangers about injecting too much personality: http://informationhighwayman.com/articles/web-design-sins-big-friendly-introduction-costing-clients/
Jason Fontana
# July 29, 2010 - 12:08 pm
I’d suggest the iPhone apps Egretlist and Awesome Note as examples of great design!
Ross Johnson
# July 29, 2010 - 1:10 pm
The restaurant metaphor really doesn’t make sense for the context of many websites. While yes, in the most simplistic form eating is a task that gives us nutrients to live — it is treated in most cultures as a form of relaxation, enjoyment and socialization.
However most users go to websites because they are looking to complete tasks and objectives, in which “emotional design” could simply get in the way. To use a real life metaphor, I wouldn’t want the post office to try and treat me the same way a restaurant does… let me get in, send my mail and get out.
Rock Langston
# August 7, 2010 - 8:50 pm
This is a heartening article. I’m hemming and hawing about my site: go for minimal and spare, or have fun with it so it looks and feels like me. This reminds me of why option #2 keeps winning out: emotion. I’m comfortable with it! Thanks for a great piece.
Mark McCorkell
# August 9, 2010 - 7:28 am
Great article, and really well written!
Blair Keen
# August 9, 2010 - 10:57 am
Interesting to read some of the comments about taking emotion/personality too far in the design of a website. Surely the only way to go is to work through a thorough UCD process, figure out how to enable user task completion effortlessly, then strive to create an environment which people refer to as ‘fun’, rather than be limited by your own views on convention?
Lach
# August 27, 2010 - 6:52 am
Truly excellent article, Aarron. The parallel with Maslow’s hierarchy is very cleaver to say the least. The first three levels map very well, and I can see how esteem can map to the pleasure principle in UX design. But rather than pleasure filling the top two tiers, perhaps there is another level beyond this yet (which would equate with self-actualisation). I suggest it may be a type of interface which were are only just beginning to get a glimpse of: no interface. I.e. agents that intuit what is desired rather than having to be told explicitly such as Pranav Mistry’s “SixthSense” technology (watch the video on TED).