Emotional Interface Design: The Gateway to Passionate Users
By Aarron Walter
23 April 2010 | Category: Design
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?
Follow @thinkvitamin on Twitter Please check out Treehouse
