Note: While reading a book whenever I come across something interesting, I highlight it on my Kindle. Later I turn those highlights into a blogpost. It is not a complete summary of the book. These are my notes which I intend to go back to later. Let’s start!
Aim for: Functional Reliable Usable Pleasurable
Why don’t we aim for a similar target in web design? We’ve been designing usable interfaces, which is like a chef cooking edible food. Certainly we all want to eat edible foods with nutritional value, but we also crave favor. Why do we settle for us- able when we can make interfaces both usable and pleasurable?
Kevin Hale, the user experience design lead and co-founder of Wufoo, considered the emotional state of Wufoo users when conceptualising the design. “The inspiration for our color palette came 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.” In his mind, Kevin had an emotional portrait of the people he was designing for. They’re “people in a windowless office,” probably under the thumb of a boss who needs them to collect information. They’re on deadline and uninspired by their day- to-day work. With a clear personality in the application that says it’s okay to have a little fun at work, he’s delivering warmth to thousands of cold, gray cubicles. That’s something people won’t forget, and for good reason.
There’s a very practical reason that emotion and memory are so closely coupled—it keeps us alive. We would be doomed to repeat negative experiences and wouldn’t be able to consciously repeat positive experiences if we had no memory of them.
A similar feedback loop happens in interface design. Positive emotional stimuli can be disarming. It builds engagement with your users, which can make the design experience feel like a chat with a friend or a trusted confidant. Although the fun design and language in Wufoo’s interface may seem like window dressing, it’s actually a clever brain hack. It’s a powerful way to build a positive memory, which increases the chance that Wufoo’s users will continue to use and trust the application
When you start your next design project, keep this principle in mind: people will forgive shortcomings, follow your lead, and sing your praises if you reward them with positive emotion.
To engage your audience emotionally, you must let your brand’s personality show. In the examples we’ve seen in Wufoo and Betabrand, personality is unmistakable. When you present your brand’s personality clearly, your audience can relate to it as if it were just another human. It creates empathy and helps your audience see a better version of themselves. Humans want to connect with real people. We forget that businesses are just collections of people—so why not let that shine through?
If your website were a person, who would it be? Is it serious, buttoned up, all business, yet trustworthy and capable? Is it a wise-cracking buddy that makes even mundane tasks fun? Following a structure similar to a user persona, you can flesh out your design’s personality by creating a design persona. Personality can manifest itself in an interface through visual design, copy, and interactions. A design persona describes how to channel personality in each of these areas and helps the web team to construct a uni ed and consistent result. The goal is to construct a personality portrait every bit as clear as those Justin Long and John Hodgman convey in the “Get a Mac” ads.
Brand name: the name of your company or service. Overview: a short overview of your brand’s personality. What makes your brand personality unique? Personality image: this is an actual image of a person that em- bodies the traits you wish to include in your brand. this makes the personality less abstract. Pick a famous person, or a person with whom your team is familiar. if your brand has a mascot or representative that already embodies the personality, use that instead. Describe the attributes of the mascot that communicate the brand’s personality. Brand traits: list five to seven traits that best describe your brand along with a trait that you want to avoid. this helps those de- signing and writing for this design persona to create a consistent personality while avoiding the traits that would take your brand in the wrong direction. Personality map: We can map personalities on an X / y axis. the X axis represents the degree to which the personality is unfriendly or friendly; the y axis shows the degree of submissiveness or dominance. Voice: if your brand could talk, how would it speak? What would it say? Would it speak with a folksy vernacular or a re ned, erudite clip? Describe the specific aspects of your brand’s voice and how it might change in various communication situations. People change their language and tone to t the situation, and so should your brand’s voice. Copy examples: Provide examples of copy that might be used in different situations in your interface. this helps writers understand how your design persona should communicate. Visual lexicon: if you are a designer creating this document for yourself and/or a design team, you can create a visual lexicon in your design persona that includes an overview of the colors, typography, and visual style that conveys your brand’s personality. you can be general about these concepts, or include a mood board. Engagement methods: Describe the emotional engagement methods you might use in your interface to support the design persona and create a memorable experience. We’ll learn more about these in the next chapter.
Brand name: mailChimp Overview: Freddie Von Chimpenheimer iV is the face of mailChimp and the embodiment of the brand personality (fig 3.5). Freddie’s stout frame communicates the power of the application, and his on-the-go posture lets people know this brand means business. Freddie always has a kind smile that welcomes users and makes them feel at home. the cartoon style communicates that mailChimp offers a fun and informal experience. yes, he’s a cartoon ape, but somehow Freddie can still be cool. He likes to crack witty jokes, but when the situation is serious, the funny business stops. mailChimp often surprises users with a fun easter egg, or a link to a gut-busting youtube video. Fun is around every corner, but never in the way of the workflow. Brand traits: Fun, but not childish. Funny, but not goofy. Powerful, but not complicated. Hip, but not alienating. Easy, but not simplistic. trustworthy, but not stodgy. informal, but not sloppy.
Voice: mailChimp’s voice is familiar, friendly, and—above all— human. the personalities of the people behind the brand shine through honestly. the voice of mailChimp cracks jokes (ones you can share with your mama), tells stories, and communicates with the folksy tone that you might use with an old friend.
mailChimp uses contractions like “don’t” instead of “do not” be- cause that’s how real humans speak to one another. mailChimp uses sound effects like, “hmmmmm….” to make it sound like you’re thinking hard, or “Blech, that’s awful!” to communicate empathy. lowercase form and button text reinforce the brand’s informality. Copy examples: Success message: “High ves! your list has been imported.” Error message: “oops, looks like you forgot to enter an email address.” Critical failure: “one of our servers is temporarily down. our engineers are already on the case and will have it back online shortly. thanks for your patience.” Visual lexicon: Color: mailChimp’s bright yet slightly desaturated color palette conveys a sense of fun and humor. the colors feel refined—not romper room-y. mailChimp is fun, but it’s also powerful. Typography: mailChimp is easy-going, effecient, and easy to use, and its typography reflects it. simple, sans-serif headings and body copy vary appropriately in scale, weight, and color to communicate information hierarchy, making mailChimp feel like a familiar, comfortable cardigan that is both functional and beloved. General style notes: interface elements are at and simple, keeping things easy to understand and unintimidating. soft, subtle textures may appear in places to warm up the space and make it feel human. Freddie should be used sparingly, and only to interject a bit of humor. Freddie never gives application feedback, stats, or helps with a task.
Engagement methods: Surprise and delight: themed login screens commemorate holidays, cultural events, or a beloved individual. Easter eggs create unexpected moments of humor that may convey nostalgia or reference kitschy pop culture. Anticipation: Freddie’s random funny greetings at the top of each main page create anticipation for the next page to load. these greetings never provide information or feedback. they are a fun layer that never interferes with functionality or usability.
Have you ever noticed that hearing your favorite song on the radio seems so much more enjoyable than when you play it yourself? Surprise amplifies our emotional response. When we anticipate a moment, the emotional response is diluted across time. A moment of surprise compresses emotion into a split second, making our reaction more intense, and creating a strong imprint on our memory.
Photojojo revamped the typical shopping cart interaction pat- tern by creating a clever moment of surprise that makes their customers want to keep shopping.
Atop each Photojojo product page perches a shopping cart with a real personality. He’s gray and sullen, though at first we don’t know why (fig 4.1). The mystery is solved when the customer clicks the “add to cart” button, sending an item arcing across the page into the cart. The poor soul promptly turns green and smiles in delight. As it turns out, he’s only happy when he’s got a belly full of the products you want to buy
This same surprise and delight pattern happens elsewhere on product pages. A mysterious lever sits between the “add to cart” button and the main product image. It wards o user meddling with the label “Do Not Pull.” It’s odd and surprising to see anything on a web page telling us not to interact with it. Only the most disciplined shoppers can resist such temptation. Those that pull the lever are startled as an orange, muppet-like arm descends onto the page, yanking it upward to reveal the product description, which lies below the proverbial page fold
Wufoo is skilled at creating emotionally engaging interactions inside their web application, but they also deliver surprises to their users’ mailboxes (the old school kind of mailbox). Though hundreds of thousands of people use their app, the guys that run Wufoo pen personal letters by hand to each of their customers thanking them for their loyalty.
Anticipation is what game designers call an open system. Games designed with an open structure, like The Sims, allow users to wander and shape game play on their own terms. Open systems encourage people to use their imagination to create a personalized experience. Video games that use a closed system, like Super Mario Brothers, narrowly direct game play, forcing the user to move in a specific direction on a de ned mission. The contrast between open and closed systems is what leads us so often to perceive that reading the book is better than seeing the movie. Books require our imagination to tell the story, but movies do all the imagining for us.
In early 2010, the folks at Twitter were working on a major re- design dubbed simply “New Twitter.”
Early recipients of New Twitter bragged to their followers that they’d won the Twitter lottery, tagging their tweets with #NewTwitter, which created an easy-to-follow conversation around the redesign.
The limited access created a velvet rope effect that had a powerful emotional influence. Users who were granted early access felt a sense of exclusivity and elevated status, which was heightened when they tweeted about it and received longing @replies from their followers. The anticipation, exclusivity, and elevation in status for New Twitter users shaped perceptions of the new design.
Priming happens when a person is exposed to a stimulus that in turn shapes their response to another stimulus. For example, we saw this with Photojojo’s humorous site interactions, which improve their conversion rate by layering positive interactions on the pathway to purchase. These moments of surprise and delight prime user perceptions, making the site more relatable and easier to trust.
By releasing a screenshot on Dribbble, New Twitter built anticipation and suspense, which primed a successful launch. Limited access made early invitees feel special, priming their perception of the redesigned interface. That in turn encouraged exclusive tweets priming the perceptions of those who had yet to gain access. It was a brilliantly effective chain of positive priming events.
Priming works by activating parts of your memory with an initial stimulus so that when a second stimulus follows, your brain is more likely to build associations.
Remember Mr. Clippy, the cartoon assistant in Microsoft Office from 1997 to 2003? He inspired uncontained vitriol from users because of his poor timing. While writing a letter in Word, Clippy would slide onto the screen and ask, “It looks like you’re writing a letter. Would you like help?” The general response people had was, “Get the hell out of my way you bloody pain in my backside.” (That’s the polite version.) Blocking a busy user’s work ow is always a bad idea.
Clippy was our anti-inspiration. We wanted to achieve the opposite of what he did in Microsoft Office. We never wanted Freddie to provide feedback about the app, deliver stats, or tell you when something has gone wrong. He’s not there to help. He’s simply a layer of fun that enhances a usable work ow, and above all, he has to stay out of the way of our busy users. Because his greetings are randomized, there’s a little surprise awaiting users around every corner of the app. Freddie was, in fact, a cheerleader for the user, tempting them forward with a new joke on the next page. We found that just as good design improves how users perceive interface usability. Varying greetings on each page kept a cheerful momentum in the work ow that helped people overcome obstacles and accomplish their goals. When rewards like the funny little greetings arrive on a regular schedule, with varying degrees of delight, it inspires curiosity in people to see what the next reward will be. Maybe the next one will be really great? I’ve got to go see! This is a psychological phenomenon called variable rewards. We recognize it as the driving force behind slot machines. Popular deal sites like Groupon (http:// groupon.com) and Scoutmob (http://scoutmob.com/) use variable rewards, too. Every morning, email subscribers open their inbox wondering what great discount awaits them. Sometimes it’s awesome, sometimes it’s not. The uncertainty of the rewards coming on a regular schedule keeps people excited, as they anticipate what might come next. Freddie’s ever-changing jokes hold the same power. The uncertainty of what the next joke will be uses the power of variable rewards to encourage users on to the next step in their work ow, a wonderful outcome we hadn’t anticipated.
We realized how effective priming was when we saw a shift in the tone customers used when speaking with our support team. People channel their inner Freddie, cracking jokes and using banana puns. The priming effect is that “MailChimp is funny, so when I talk to MailChimp, I should be funny too.” Of course, our customer service team prefers to work with a customer who is in a good mood and has a sense of humor over a sourpuss waiting to take out their frustrations on an unwitting support expert. The greetings’ priming effect doesn’t just bene t customers: it benefits us, as well. We can more easily help people troubleshoot problems when they are in a positive frame of mind, shortening the average support cycle. Freddie’s greetings brighten the day not just for our customers, but for us, too.
There are common strategies we can use to design for emotional engagement. Surprise, delight, anticipation, elevating perceived status, and limiting access to elicit a feeling of exclusivity can all be effective in getting your audience to fall in love with your brand. But your tactics must be appropriate for your audience and brand experience. There is no formula for emotional design, only principles of psychology and human nature to guide you.
Dropbox has a novel approach to getting their audience in- vested immediately on sign up. They’ve created a game with a handsome reward awaiting those who complete it. When a new customer logs into Dropbox, they’re presented with six simple tasks.
To win more storage space, users must take a tour, install Dropbox on their computer, put files in their Dropbox folder, install the software on other machines, share folders with friends, and then tell others about the service. A meter indicating task completion and progress toward the 250MB storage space re- ward accompanies the tasks. It feels like a game to the user, but Dropbox is decreasing the chance of account abandonment by educating people on how to use the system, and its value to their digital life. Once your files are in Dropbox, and you’ve shared them with friends, the cost of canceling is higher than continuing to use the service. Call it bribery, call it game theory. The result is the same.
In July 2006, a storage failure struck Flickr, the popular photo sharing service. Though photos were safe and no data was lost, thousands of enthusiastic users were inconvenienced as their favorite photo site took a temporary nap (roughly three hours). Tensions ran high as engineers worked to bring the site back online. Inquiries from concerned users poured in. During the crisis, the Flickr team had a stroke of genius. Thinking like a veteran parent trying to keep an antsy kid occupied while waiting for food in a restaurant, they applied the art of redirection and ran a coloring contest. They posted a message that explained the outage, asked users to print the page, and do something creative with it to win a free, one-year Flickr Pro account. Rather than brooding over their missing photo library, users brainstormed ways to win the prize. Hundreds of entries were submitted—some of which were very clever. Though the site was down and many were inconvenienced, Flickr users remember the fun they had participating in the coloring contest, and for some, how great it was to win a free year of Pro service.
All’s well that ends well, but there are lessons we can learn from Flickr’s experience as we confront our own errors and struggle to suppress customer mutiny. Confronting the negative emotions that arise in situations like this is important, and the experience you’ve designed around your site just might save you.
Flickr worked through the stressful situation by communicating calmly and honestly with their users. Let’s take a closer look at how Flickr handled the event to learn how emotional design shaped user reactions.
Speed through the generic stuff, but take the time you need to perfect the few things that you’re most proud of. Remember that customers don’t engage with functionality. They engage with experiences. They are moved not by features but rather by their experience of using your product. Moving a mile a minute is great, so long as you slow down when you’re crafting something that will ultimately become your competitive advantage.