Designing for Emotion

Designers also use this principle, called the baby-face bias, to their advantage. Can you think of any Web sites that use a cute mascot to create connections with their audience? There are boatloads of them. Twitter, StickyBits, Brizzly, shown in Figure 2.1, and MailChimp are just a few.

The takeaway here is not to make your Web site cuter. With a little consideration you’ll discover that behind every design principle is a connection to human nature and our emotional instincts. In fact, human nature is reflected in every aspect of design.

The World is Our Mirror

We humans project ourselves into so much of what we see. As we gaze at the world, we discover ourselves looking back. When we stare at the clouds, or inspect the grain of a gnarled piece of wood, inevitably we’ll construct the image of a face in our mind’s eye. We are accidental narcissists seeking that which we know best—ourselves.

This instinct is guided by our primordial desire for emotional connection with others. We are hardwired to seek emotion in human faces. For this reason, photos of human faces in a design can profoundly influence an audience.

We don’t have to see two eyes and a mouth to feel an emotional connection to a design. Sometimes we perceive human presence through abstract things such as proportion. Pythagoras and the ancient Greeks realized this when they discovered the golden ratio, a mathematical division of proportions found repeatedly in nature, including the human form. We’ve used this concept for thousands of years to create art, architecture, and designs that are universally perceived to be beautiful. Though our minds may not be conscious that the golden ratio is present in architecture such as the Parthenon or in a design like the iPod, our subconscious immediately sees a pattern of beauty that we know is also present in our own bodies. If you’ve ever read Robert Bringhurst’s brilliant book, The Elements of Typographic Style, you’ll know that print designers have used the golden ratio for centuries as the foundation of page layout.

Web designers have picked up on this concept too. When Doug Bowman and his design team at Twitter redesigned their site, [they employed] the golden ratio to structure [the] page layout, making it beautiful to the human eye, as shown in Figure 2.2.

Our definition of beauty originates in our own image. The human mind is exceptionally skilled at scanning objects and information to discover meaning in abstract forms. We can find traces of ourselves in most anything we see, and we like that.

Our ability to find signal and discern patterns in so much noise is a very important trait we use to navigate life, and as you might expect, this ability to recognize patterns greatly affects the way we design.

Contrast: Is It Good for Me or Bad for Me?

Beyond our ability to express emotion, we also share the instinct to search for patterns. The human mind is a beautifully engineered difference engine. Our brains constantly scan for patterns in our environment to form insights and keep us from harm.

Your senses alert you to food in your fridge that’s past its prime. No one had to teach you about the smell of spoiled milk—you simply recognize something isn’t right. Something’s different and your brain knows it.

We call that break in pattern contrast. Our brain’s vigilant scan for contrast drives our decision-making process. It helps us decide where we should sit in a classroom—is one seat more advantageous than another?—where we should eat dinner—will one restaurant have better food than another?—and even who we should marry—is one mate more attractive than another? We use contrast to answer one fundamental question: Is it good for me or bad for me?

We perceive contrast in a couple of ways:

• visual contrast—difference in shape, color, form, and so on
• cognitive contrast—difference in experiences or memories

Humans use visual contrast similarly. Habitual speeders—like me—stick close to other cars to avoid the notice of police. Speeding alone makes you an easy mark for lurking cops. (I can’t say I advocate this approach, though, as two speeding tickets sit on my desk as I write.)

Police issue speeding tickets to create cognitive contrast in our minds. They hope that the penalties we incur will deter us from repeating mistakes. I can humbly attest that their technique works. It’s dropped a few pounds from my lead foot.

Contrast is also a powerful design tool. It influences our users’ activity in simple and profound ways. Web sites like Tumblr, shown in Figure 2.3, that seek new account signups improve their conversion rates by eliminating all extraneous homepage content. The site simply introduces the product and calls the user to act. The high visual contrast in negative space against the large, central form makes it easy to understand what this site is about and what action Tumblr expects.

Page simplicity also helps potential customers to perform a basic cost-benefit analysis, a regular activity that our brains engage in after contrast scanning. The short time needed to fill out the form is a low cost to pay for the potentially large benefit of the service, making conversion highly likely.

Contrast is a powerful tool, but don’t overuse it, as our brains have limitations.

A Limited Processor

When you wield contrast effectively, as Tumblr does, interfaces become more usable too. As you increase the number of high-contrast elements on a page, you proportionally increase the time needed to perform a task, learn a system, and remember pathways. Adding stuff pushes the human brain to its limits. 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.

Hick’s Law is a design principle that conveys this concept. It states that the time it takes to make a decision increases with the number of alternatives. Tumblr is on to something with its dead simple home page. Though incredibly powerful, the human brain’s ability to quickly parse a great deal of information is limited. It’s much harder to direct a user to act if their brain has to filter noise. In that respect, we’re just like the hungry lioness struggling to pinpoint the right zebra to attack.

Tumblr recognizes that attention is a finite commodity. Every time we add content to an interface, it makes it harder for humans to identify patterns and contrasting elements. The result is more unpredictable user behavior, and lower information retention. (Remind your boss of that the next time you’re asked to shoehorn more stuff into your company’s home page.)

But contrast doesn’t just shape the way we see things: it also influences our ability to recognize abstract concepts like brands.

Brand Contrast

Just as Tumblr’s visual contrast helps direct user behavior, we can use cognitive contrast to shape audience perceptions. In fact, this is the primary goal of branding: to set your identity apart from your competitors’. When your brand clearly contrasts with others, your audience will easily identify it and remember it.

Web designer Ricardo Mestre gets the power of contrast. His Web site, shown in Figure 2.4, defies common Web design conventions.

Mestre’s design doesn’t follow a strict grid; it’s organic. The rich textures, unrefined edges, and layers of flat shapes make it feel more like elegant paper craft than a Web site. The purple monster that darts from behind a tree and the humorous copy create an emotional imprint on his audience, making his portfolio unforgettable. When you’re competing against Web designers, 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.

The Power of Aesthetics

Though their styles are on opposite ends of the spectrum, Tumblr’s and Mestre’s Web sites have one thing in common: they’re both aesthetically pleasing. Both use color, type, scale, whitespace, and layout deftly. Both are unmistakably well designed.

Design is too often wrongly taken for the indulgent frosting on a functional interface. Have you ever overheard a colleague declare, “It would be nice if we could have a sexy interface, but people care more about what the site does than how it looks”? Would this person show up to a job interview in their pajamas because people only care about what they can do and not how they look? If they did, I’d bet they’d discover that thinking is flawed.

Perceptions are critical. As we’ll see in the coming chapters, design influences emotional engagement and usability.

As Donald Norman, a pioneer in usability and human-computer interaction, points out in his book Emotional Design, beautiful design creates a positive emotional response in the brain, which actually improves our cognitive abilities.

Attractive things make people feel good, which in turn makes them think more creatively. How does that make something easier to use? Simple, by making it easier for people to find solutions to the problems they encounter.

Norman is describing the aesthetic-usability effect. Attractive things actually work better.

Many brands employ this principle, but none more so than Apple.

Apple’s interface design is famously refined, focused, aesthetically pleasing, and usable. Their clean, elegant design makes their products and software easy to use. Apple bakes the aesthetic-usability effect into everything they make, and it keeps their customers coming back.

But Apple fanaticism connects directly to their mastery of emotional design. When Steve Jobs concludes a product demo with “We think you’re going to love it,” he truly believes it. It’s no mistake that he uses the word love, as their design ethos demonstrates that Apple clearly understands human psychology and emotion.

In 2002, Apple filed a patent for a “Breathing Status LED Indicator.” Anyone who owns a Mac is familiar with the status light on the front of Apple laptops and desktops that gently pulses to indicate a sleep state. Apple designers considered the context in which this light would most often be seen—in a dark office, a bedroom, or a living room where the status light is one of the only light sources.

The status indicator’s pulse rate is very precise. It mimics the natural breathing rate of a human at rest: twelve to twenty breaths per minute. It works just like a gentle rhythmic pat on a baby’s back. It inspires a mood. Like the Parthenon’s golden proportions, a human might not correlate the light’s pulse rate to their breathing rate, but they can feel its calming effect. Apple could have simply designed the indicator to stay on during sleep state, and it would have achieved its goal. Instead, their solution communicates and soothes, encouraging humans to see themselves in the product they use.

A Foundation for Emotional Design

We’ve discovered some design principles and common traits of the human mind in this chapter, and they’ll resurface in chapters to come.

A quick look at evolutionary psychology showed us that much of how we see our world is predisposed at birth, a function of thousands of years of adapting to our environment and finding the best solutions for survival. The baby-face bias is one such example. Contrast also originates in our need to survive, but today we can use it to shape user behavior and make our brand stand out.

We learned that the human mind has limitations. When contrast is overused, we struggle to process our options, as Hick’s Law dictates. And, we discovered that aesthetics is more than just window dressing—it influences usability, as the aesthetic-usability principle illustrates.

This is who we are. We are born with firmware that guides us, and emotion is at the core of that code. Emotion is a fundamental part of who we are as humans, and it plays a foundational role in effective design.

While the human use of emotion to communicate and our reactions to certain situations are universal, designing for emotion still requires nuance and careful consideration. The personalities that sit atop our cognitive firmware make us much more unpredictable. As we’ll discover in the next chapter, personality is the platform for our broader emotional responses and the key to making a design more human. 

Discount for UXmatters Readers—Buy Designing for Emotion online from A Book Apart, using the discount code MATTER10, and save 10% off the retail price.