Chapter 2. Design for Humans – Designing for Emotion

Chapter 2. Design for Humans

We humans are complex beings and can be difficult to design for. We all have distinct personalities, emotional baggage, and unique dispositions, so how can we design something that appeals to such wide-ranging perspectives?

Beneath disparate personalities and perspectives lie universal psychological principles common to all people. These principles are invaluable tools in our quest to design for emotion. In this chapter, we’ll explore the psychological firmware we share and establish a foundation on which we can build emotional design strategies.

That Which Unites Us

If there is one trait common to all humans, it is that we all emote. In The Expression of the Emotions in Man and Animal, Charles Darwin observed:

The same state of mind is expressed throughout the world with remarkable uniformity; and this fact is in itself interesting as evidence of the close similarity in bodily structure and mental disposition of all the races of mankind. (http://bkaprt.com/dfe2/02-01/)

What Darwin suggests is that we have a common emotional lexicon guiding us through life. We don’t develop emotions by watching others. We’re born ready to express pain, joy, surprise, anger, and other emotions. Emotion is an essential survival tool. It’s how we communicate our needs to our caregivers, and later in life, it’s how we build beneficial relationships. Though we develop verbal language as we mature, emotion is our native tongue from the moment we enter this world. It is the lingua franca of humanity.

Human Nature and Design: Baby-Face Bias

We can learn a lot about design and how to communicate effectively with our audience by studying evolutionary psychology. As humans have evolved physically, so too have our brains, to naturally select the most advantageous instincts and behaviors that will keep our species alive. We call these instincts “human nature.” They’re the Rosetta Stone that offers insight into why we behave the way we do. Let’s look at a familiar instinct and see how it may inform our design work.

If you’re not a parent, you might wonder why people would want to subject themselves to sleepless nights, poopy diapers, and constant caregiving while relinquishing the freedoms and delights of adulthood. On paper, it sounds pretty bad. But in reality, it’s pure magic for reasons that are hard to explain.

Shortly before I began writing the first edition of this book, I became a parent for the first time. Since then, my second son was born. Holy cow, is it hard work! But those magical moments—watching them read for the first time, a surprise hug tackle, or just a smile—make me forget that I’m running on three hours of sleep and someone didn’t get their pee-pee in the potty (again). All I feel is overwhelming love, and it’s totally worth it.

Evolution has given us baby goggles that help us look past the downsides of parenting and trigger waves of positive emotions when we see a little one’s face. 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 hardwired to love babies.

I know it sounds kind of absurd, but scientists believe we evolved to love babies’ faces to prevent us from killing them. Cuteness is a baby’s first line of defense. As the late evolutionary biologist Stephen Jay Gould explains in his essay “A Biological Homage to Mickey Mouse” (http://bkaprt.com/dfe2/02-02/, PDF), cartoonists have exploited this principle for decades, creating characters with large heads, small bodies, and enlarged eyes that endear them to us.

Designers also use this principle, called the baby-face bias, to their advantage. Can you think of any websites that use a cute mascot to create connections with their audience? There are boatloads of them; GitHub, Duolingo (Fig 2.1), and Mailchimp are just a few.

Fig 2.1: Duolingo uses the baby-face bias principle to endear their brand to their customers.

The takeaway here is not to make your website cuter. With a little consideration, you’ll discover that behind every design principle is a connection to human nature and our emotional instincts.

The World Is Our Mirror

We project ourselves onto so much of what we see. For example, when we stare at the clouds or inspect the grain of a gnarled piece of wood, we inevitably 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 an emotional connection with others. For this reason, including photos of human faces in your designs can profoundly influence your 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 (http://bkaprt.com/dfe2/02-03/), a mathematical division of proportions found repeatedly in nature, including the human form (http://bkaprt.com/dfe2/02-04/).

We’ve used the golden ratio for thousands of years to create art, architecture, and designs that are universally perceived to be beautiful. Though we may not consciously understand that it’s present in an architectural structure like the Parthenon or a product like the original iPod, our subconscious immediately sees a pattern of beauty that we know is also present in our 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 for page layout.

Web designers have picked up on this too. You’ll find the golden ratio in the layout of Google’s home page and its logo (Fig 2.2).

Fig 2.2: The layout proportions of one of the most visited pages on the web, Google’s home page, are defined by the golden ratio.

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 beautifully engineered to find differences wherever we look. Our brains constantly scan for patterns in our environment to form insights and keep us from harm.

I experienced this phenomenon recently, as I walked down a pathway on my property at twilight. In a fraction of a second, my brain registered a squiggly line across a circular stone, and I instantly felt a spike of fear. I focused my flashlight on the form to investigate. A young, venomous copperhead stared up at me, poised to strike. I stepped back to steady my beating heart and couldn’t help but marvel at how fast my brainstem fired to save me, even before my cerebral cortex could rphotoegister what I was seeing. It saved me a trip to the emergency room, maybe worse.

We call this break in pattern—strange squiggly line on a circular stone—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, etc.
  • Cognitive contrast: Difference in experiences or memories

Zebras’ patterned hides act as visual contrast to help them blend in with a herd so that stalking lions can’t pick them off. When all individuals are high contrast, none stand out.

Humans use visual contrast similarly. Habitual speeders (like me) stick close to other cars to avoid being noticed by 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 and has lightened my lead foot.

We can use the power of contrast to great effect in design to make important things stand out. You Need a Budget (YNAB for short)(youneedabudget.com), a personal finance app, uses contrast to direct people’s attention to problem areas in their budget.

To manage a budget effectively, you have to know how your money is allocated and when you’ve overspent. YNAB highlights spending categories that are fully funded with a high contrast green. When you’ve overspent, they highlight the category in red to let you know you’ve got a problem to address (Fig 2.3). Move money from a category with extra money to cover your overspending, and the red goes away. Financial crisis averted. YNAB’s use of contrast makes it easy to understand a complicated budget at a glance.

Fig 2.3: Contrast plays a critical role in YNAB’s UI to draw attention to overspending.

Remember to consider accessibility as you explore contrast in your designs. The YNAB design team identified hues of red and green that are still discernable to their color-blind users. There are many free online tools that can help you check your work.

Contrast is a powerful tool—but we must take care not to overuse it, as our brains have limitations.

A Limited Processor

Have you ever been to a party where everyone is shouting to speak to the person next to them? As the volume increases, everyone must shout louder to be heard, but that makes it even harder for everyone in the room to have a conversation.

Design works in the same way. 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. If everything screams for your user’s attention, nothing is heard.

Notifications can sometimes make our phones feel like a noisy party. They use the principle of contrast to break our focus with a buzz, on-screen message, or red badges. It’s welcome when something urgent requires our attention, but often software designers use notifications irresponsibly, or worse, to manipulate us.

Ecommerce apps that interrupt our lives to tell us, “It’s time to shop!” or weather apps that notify us of, “Breaking news! Oldest snow patch in the UK survives!” are using the power of contrast to manipulate people to drive sales and traffic.

It’s easy to miss the messages that are actually important in all that noise. Sure, we can turn down the noise in notification settings, but I question the integrity of those who exploit design principles to take advantage of users.

As Mike Monteiro pointed out in his open-sourced essay, “A Designer’s Code of Ethics”:

By choosing to be a designer you are choosing to impact the people who come in contact with your work, you can either help or hurt them with your actions. The effect of what you put into the fabric of society should always be a key consideration in your work.” Mike’s code is worth a careful read (http://bkaprt.com/dfe2/02-05/).

Designers will always be pushed by clients and managers to drive business results. But when those requests cross an ethical line or harm users, it’s our duty to dissent.

We need to understand how the human mind works to push back effectively. Clients often ask to add more stuff to a page—more navigation items, more products, more promotional content. But the more we add, the more we impair the processing power of our customers’ brains.

Hick’s Law (http://bkaprt.com/dfe2/02-06/) is a design principle that states that the time it takes to make a decision increases with the number of alternatives available. 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 find the right zebra to attack.

Every time we add content to an interface or layer on more notifications, it makes it harder for people to identify patterns and contrasting elements. The result is more unpredictable user behavior, poor conversion rates, and lower information retention. (Remind your boss of that the next time you’re asked to shoehorn more stuff into your company’s homepage.)

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

Brand Contrast

Branding is all about contrast. When it’s done well, it distinguishes a company from competitors, helps drive the growth of the business, and creates a powerful competitive advantage.

As we’ll soon see in Chapter 3, brands like Volkswagen, Apple, and Harley-Davidson have used brand contrast to build successful businesses that transcend generations. Their unique brand personas resonate with their customers, inspiring brand loyalty.

Sara Blakely, founder of the successful shapewear brand Spanx, also used brand contrast to differentiate her company amidst a well-established market.

When Blakely started Spanx, the women’s undergarment section of department stores was crowded with beige, white, and grey packaging featuring homogeneous models, all with a build that society would deem thin. The competition was both boring and out of touch with the customer. Blakely saw an opportunity for her fledgling business to succeed by doing things differently than the competition.

She designed bright red packaging that stood out in a sea of neutral colors with the tagline, “Don’t worry. We’ve got your butt covered!” It made her brand feel familiar and personal, like she was talking to a close friend at dinner.

Instead of beige packaging with slim models, Spanx packaging featured fun cartoon images of women of various demographics and body types wearing the product.

Most shapewear packaging uses a cardboard insert to uphold the product’s form. Where the competition typically made this cardboard disposable, Spanx saw it as an opportunity to make customers smile by adorning it with cartoons inspired by Bazooka bubblegum. The comics humorously showed the flaws in the competition and how Spanx is a far better product. Inspired, some Spanx customers even pinned them up on cubical walls at work or hung them on the fridge.

Traditionally shapewear is meant to be super-discreet, but the tone of Spanx branding made it something to celebrate and a way to challenge body shame culture. Blakley tapped into powerful emotions that helped her build a brand that grew by word-of-mouth.

Spanx used contrast to do something very difficult: They broke into a well-established market and captured the attention and loyalty of customers. Even if you don’t use shapewear, you likely know them as a category leader.

Contrast directs our audience’s attention to what’s important (a warning from YNAB that you’ve overspent) and what’s unique (a brand that’s unlike the others). Once we’ve captured that attention, we can use the powers of design to create a powerful emotional response.

The Power of Aesthetics

Too often, people see design as the indulgent frosting on a functional interface. Have you ever heard a colleague say, “It would be nice if we could have a slick 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, they’d discover that thinking is flawed.

Perception is critical. In the coming chapters, I’ll show you how 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 (http://bkaprt.com/dfe2/02-07/). 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 hardware and software easy to use—though some, Norman among them, argue Apple has lost its way recently (http://bkaprt.com/dfe2/02-08/). Apple bakes the aesthetic-usability effect into everything they make, and it keeps their customers coming back.

Apple fanaticism connects directly to their mastery of emotional design. When the late Steve Jobs concluded one of his famous product demos with what became almost a catchphrase, “We think you’re going to love it,” he truly believed it. It’s no mistake that he used 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 owned a Mac in this era will remember the status light on the front of Apple laptops and desktops that gently pulsed 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 was very precise. It mimicked the natural breathing rate of a human at rest: twelve to twenty breaths per minute. Like the Parthenon’s golden proportions, people might not have made the connection between the light’s pulse rate and their breathing rate, but they could feel its calming effect.

Apple could have simply designed the indicator to stay on during the computer’s sleep state, and it would have achieved its goal. Instead, their solution was functional and soothing, encouraging their customers to see themselves in the product they used.

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.