Highlights and notes
People only voluntarily recommend that which is truly delightful. If we want to achieve long-term remarkability, we need to build in long-term delight.
There’s plenty of opportunity to build fast and cheap sites with no reverence for craft or the relationship we build with our audience. We could create new projects with stock photography, boilerplate templates, and one-size-fits-all copy. We could reduce our industry to a commodities race, like those who manufactured the industrial revolution. There is a market for that kind of work. Or we could follow a different path, one paved by the artists, designers, and architects of the Arts and Crafts movement, who believed that preserving the human touch and showing ourselves in our work isn’t optional. It’s essential.
For a user’s needs to be met, an interface must be:
- Functional
- Reliable
- Usable
[When these are met, we can add Pleasurable]
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 flavor. Why do we settle for usable when we can make interfaces both usable and pleasurable?
Emotional experiences make a profound imprint on our long-term memory.
Emotionally charged events persist much longer in our memories and are recalled with greater accuracy than neutral memories.
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.
People will forgive shortcomings, follow your lead, and sing your praises if you reward them with positive emotion.
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.
Baby-Face Bias: The proportions of a baby’s face—large eyes, small nose, pronounced forehead—are a pattern our brains recognize as very special. Faces that have such proportions are perceived as innocent, trustworthy, cute, and lovable. We’re hard wired to love babies.
Can you think of any websites that use a cute mascot to create connections with their audience? There are boatloads of them. Twitter, StickyBits, Brizzly, and MailChimp are just a few.
Be subtle with your use of emotional design elements. Have you ever been to a party where everyone is yelling to speak to the person next to them? As the volume increases, everyone must speak louder to be heard, but that makes it even harder to have a conversation. Design works in the same way. If everything yells for your viewer’s attention, nothing is heard.
Cognitive contrast is essential. Great design that uses cognitive and visual contrast not only makes you stand out, it can also influence the way people use your interface.
Great design that uses cognitive and visual contrast not only makes you stand out, it can also influence the way people use your interface.
Personality is the platform for emotion
Design Personas
Create a design persona to define and adhere to a personality for your website/app.
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.
Your design persona should be visible to remind the team of the type of relationship you want to build with your audience. The design persona should guide anyone that crafts a pixel, a paragraph, or a process on your website.
Download a design persona template and the MailChimp example at http://aarronwalter.com/design-personas.
Tapbots: Unlike other iPhone apps, the interfaces seem like little human robots. One robot in particular inspired Tapbots app designer Mark Jardine to design personality into the user interface: “The whole UI concept was really inspired by the movie, WALL•E.Our concept for the first two apps was to design them as if they were physical robots.”
The Tapbots apps feel like lovable little robots ready to do your number-crunching dirty work.
We want our apps to be used seriously, but also give the sense that they are more than just a piece of software. We want our users to have an emotional connection to our apps.
— Mark Jardine, Designer at Tapbots
Carbonmade, a clever little web app that helps people design elegant portfolios, expresses their personality throughout their site, combining the earnestness of Jimmy Stewart with Eddie Izzard’s exploding, goofy charm. Octopi and unicorns frolic in their fantastical homepage landscape—atypical for a conversion-focused site.
Keeping things informal and bonkers makes it all the easier to get folks to click at sign-up button. There’s a taper to the silliness though. We lay it on pretty thick in our marketing site, dial it back a bit in our admin tools, and remove it all together on the product. It’s like a giant, flashy, goofy piece of candy on the outside, with a Swiss-engineered, straight-laced nougaty center!
— Dave Gorum, Designer at Carbonmade
When it comes to emotional design, we need to tailor the personality to the content and audience.
Keep in mind that when you emphasize personality in the user experience, some people won’t like it. That’s okay, though. Personalities clash, and in the case of businesses, it can actually be a good thing. If people don’t understand your personality, chances are they’re not the right customer for you, and you’re actually saving yourself future customer-relations problems.
If we stop thinking of the interfaces we design as dumb control panels, and think of them as the people our target audience wants to interact with, we can craft emotionally engaging experiences that make a lasting impression.
Just as our personalities shift with the context of communication in real life, they must shift in the projects we design. There’s no one-size-fits-all solution.
Introducing surprise into an interface can break a behavior pattern and force the brain to reassess the situation.
Surprise and Delight
Introducing surprise into an interface can break a behavior pattern and force the brain to reassess the situation.
Photojojo’s novel shopping cart design surprises first-time visitors because it’s unlike any they’ve seen, focusing attention on the delightful interaction that follows when they add an item to the cart. Users want to experience that moment of delight again, so they’ll add more items to the cart. That’s exactly what Photojojo wants customers to do.
Aside from being the right thing to do, surprising people with kindness and individual attention can help a business achieve success.
Anticipation
Twitter used anticipation’s emotional power to prime user perceptions of a pending redesign. By foreshadowing the design, then slowly rolling it out to their customers, they created a frenzy of positive conversation and emotional engagement that made it one of the most successful redesigns on the modern web.
By contrast, Twitter’s rival, Facebook, has had much less success in releasing interface revisions, because they force users to change on Facebook’s schedule. When you’re in a hurry and visit Facebook to briefly catch up with a friend, changes in the interface leave you feeling like someone has moved your cheese. By giving users a link to switch back to the old interface, Twitter allowed their users to feel in control. It’s an open-system approach to a tricky situation that prepares people to embrace change.
Priming
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.
Variable Rewards
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.
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 workflow, a wonderful outcome we hadn’t anticipated.
–
There is no formula for emotional design, only principles of psychology and human nature to guide you.
There will be times where you get it wrong, but that’s okay. You can adjust to correct your course. Start small with simple interaction patterns that use some of these ideas, and see how your audience reacts.
Not all brand personalities afford the liberal use of humor. There are times where we need to appeal to different emotions that inspire confidence and trust in our audience.
Antonio Damasio, Professor of Neuroscience at the University of Southern California, has studied people who have injured the areas of the brain responsible for emotion. Basic decisions vex them. Deciding when to schedule a doctor’s appointment triggers a circuitous internal debate on the merits of the various options. Similarly, choosing a restaurant for lunch proves impossible, as evaluating pros and cons never ends. Where there are many options of similar or equal merit, there’s nothing to push these people’s thought processes into a final decision. Without the tie-breaking vote the emotional gut response provides, they cannot decide.
As designers, we’re in a unique position to help users follow their gut instincts. Using common design tools like layout, color, line, typography, and contrast, we can help people more easily consume information and make a decision driven by instinct more than reason.
To convince skeptics to act, you don’t have to make a brilliant case, you just have to offer more benefit than cost so people’s gut reaction to your design falls in your favor.
Example: Mint
Putorti designed Mint to stand out not only from primary competitors like Quicken and TurboTax, but also from other apps on the web.
Then, web app designers were leery of overusing images to create gradient effects or to render a font that wasn’t available to all users. Speed was the primary focus, and texture, illustrations, and typographic exploration were uncommon in web apps. But Putorti wasn’t carrying these preconceptions when he designed Mint. In Mint you’ll notice a sense of light in the interface that’s created by glows, extensive gradients, and shadows.
The care and consideration apparent in the design gives users the impression that equal attention is paid behind the scenes where Mint manages security and privacy. Sure, Mint makes it clear that your information is securely guarded, but rather than having to constantly reiterate the point in the copy, the design says it more effectively.
In the end, users’ gut reactions were that Mint seemed secure enough and the attractive charts and graphs held enough value that they were willing to take the risk and sign up.
Example: Dropbox
People really aren’t as lazy as we like to think they are. They’re just looking for the path of least resistance to their destination.
Dropbox used gamification to encourage people to learn the platform.
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 reward 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.
Great content delivered in an emotionally engaging manner is like kryptonite for apathy.
Read Erin Kissane’s book The Elements of Content Strategy if content creation is a stumbling point for you.
Tips on implementing
If after implementing this book’s ideas and recommendations your audience is still apathetic toward your site, ask yourself these questions:
- Is the personality I’ve created for my brand authentic and well matched to the profile of my audience?
- Is my brand personality too similar to those of my competitors?
- Is my content well written and relevant to my audience’s needs and interests?
- Do the emotional design methods I’m using interfere with the base layers of the user’s hierarchy of needs (making the site less functional, reliable, usable)?
You may have a hard time answering these questions honestly, in which case you might conduct simple user research and usability tests to evaluate your assumptions.
Usability testing tips
You might ask things like:
- Describe your initial reactions to the website.
- How does the website make you feel?
- If this website were a person, who would it be and why?
- Would you recommend this site to a friend? Why or why not?
- Are there site sections or features that are more important to you than others? Less important? Why?
Building a reserve of goodwill
Emotional engagement before and even during a major event can help mitigate the risk of losing your audience.
when you create a compelling experience, your audience will often forget about the inconveniences they’ve encountered over time and just remember the good things about your brand. So long as the good outweighs the bad, you win. That’s why you must accrue goodwill as an insurance policy for the problems that are certain to occur.
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.
Flickr worked through the stressful situation by communicating calmly and honestly with their users.
When people are deeply stressed by an outage or a mistake you’ve made, you must explain what happened swiftly, honestly, and clearly. Give people the facts of the event, communicate that you’re doing your best to resolve things, then update users regularly, even if not much has changed.
The forgiveness we earn through careful emotional design can prevent considerable losses in customers and revenues, which is alone a compelling enough reason to incorporate it into our design process.
Showing emotion in design, as in life, is risky. Some people won’t get it. Some people will even hate it. But that’s okay. An emotional response to your design is far better than indifference.
Success stories
When Blue Sky launched their new website, they felt confident it would help their business, but didn’t anticipate the results they saw. The new website increased the number of monthly proposal requests by 15%. The average revenue earned from each client grew by 15%. They saw a 65% increase in clients each month, and a staggering 85% increase in total revenues. Their conversion rate climbed from an already good 25% to 36%.
Blue Sky Resumes changed nothing else about their marketing. Their improved conversion rates and increased revenues are all because of a redesign that made emotional design a priority.
Convincing Your Boss
Instead of making a case by saying, “I think it would be great if we…,” you can reference your design persona document and say, “Our brand personality is this…, and by doing this…we’ll stand out from competitors while building a much better connection with our customers.” Connect your ideas to business goals and avoid opinion-based arguments. You’ll make a strong case that will be harder to dismiss.
Rather than trying to revolutionize everything on the site at once, pick one key metric you’d like to improve, such as average time on the site, or the number of sales inquiries. Tweak the interface using principles of emotional design, then use something like Google Site Optimizer to test the changes against the original design. If your target metric improves, you have a rock solid case to present to your boss for implementing emotional design in other places in the site. You can’t argue with numbers.