Emotional Design
By: Erik Messaki
Tags: Marketing, Web Design, Visual Design, Design, Emotional Design

These days, emotional design is all the rage and the talk of the town. Paradoxically, though, many designers don’t have a clear idea of what it is. Some think it’s all about wowing the audience with effects, while others go for “cute” photos and illustrations. So they build a brokerage website and then attempt to make it “more emotional” with smiley faces and kittens. But the only emotion they’re likely to trigger is the customer’s rancor. Most of them create designs to elicit emotion in their fellow designers. “That looks awesome!” they say, approvingly. Oddly enough, the users don’t seem to share their excitement.

The more savvy designers have read Don Norman’s book, then tried to apply the new knowledge in practice and also failed. So what’s the problem?

Let’s be honest here. Not everyone has actually finished the book. But many saw this pyramid, which led to a lot of confusion.

What is wrong with it? It’s an equivalent of Maslow’s pyramid for design. But humans have no fundamental need for design; no one’s going to die after seeing an ugly, barely functioning website.

Looking at this diagram, it’s tempting to think that first you need to take care of functionality, followed by reliability and usability, and then create the icing on the cake by making the design emotional.

It doesn’t work that way, people. It’s too late. Emotions are not the icing on the cake. They’re the flavor of the cake. If you’re looking to create a particular flavor, you’ll prepare the ingredients in advance, won’t you? You can change the color palette in the process, but if you need animation or gamification to trigger an emotional response, it’s something you must consider at the outset.

Emotional design is born at the design concept stage based on market research.

No emotional design can be efficient without market analysis, without an understanding the project’s goals and objectives, without knowing your audience and user profiles. The emotions you want your design to broadcast have to be decided upon at the very beginning. Even if the idea is in its embryonic stage. The emo-embryo will grow and develop throughout the work and discussion process, and by the time you get to creating the design it will have an easy birth.

Understanding this is half the success!

Now here’s the other half.

1. Getting to know your target audience

You can’t trigger an emotional response if you don’t know who you’re dealing with. Learn as much as you can about your users. You need to picture them as if they were your friends and family. Use buyer personas to better understand their needs and visual preferences. What is emotionally appealing to this particular target group? What kind of design works for them? Buyer persona templates are very useful, e.g. demand metric.

You can find some tips here:

Web Design With the Focus on the Target Audience

Personality-Oriented Design

2. Determining emotions

You need to have a clear understanding of the emotions you want to appeal to. To be sure, excitement is always a must for any design. Esthetically pleasing, functional, user-friendly — obviously, your design is already all that. All you need now is to add some emotions — but which exactly?

A good idea is to write a list. For example, in designing the abovementioned brokerage website you can have reliability, calm, trust, a relaxing general impression but focus on important details.

But what to do if the customer isn’t sure what emotions they need? Study the subject carefully, immerse yourself in it. Check the competitors’ websites, try to analyze the design with an eye to emotions and user contact points. This is where you can use Norman’s method, described below.

3. Defining the concept

This is about the general design concept. We already know who our users are and what they should feel when they interact with our product. Now let’s take a look at our list and come up with a mental image rather than a fully-fledged design. An essential part of this is color.

Let’s take the brokerage website as an example. Say our target customers are men aged between 25 and 65, mostly conservative, cautious, organized, occasionally impulsive. There’s no need to nudge them along with vivid design and distract them from the business at hand: all these people need is concentration, a plain working background, and no frills. Animation? God forbid. Gamification? Not this time. What works in this case is a subdued blue or green color palette and a couple of contrasting fonts. You’ll need some real customer reviews with pictures, maybe a calendar.

This is the “mental image” of our future design. Now we know where we’re headed.

4. Picking the color solution

Color triggers an immediate, intuitive emotional response, which is why it is so important to choose the right one.

primary color

You can use Robert Plutchik’s Wheel of Emotions as a guide to choose the primary color. The farther from the center and the less vivid the color is, the less intensive the emotions.

You shouldn’t take Plutchik’s diagram literally. Please understand that a green background is not enough to make your design trustworthy, and a lilac one won’t be automatically boring. The illustration below shows how contrast works: our attention is drawn to the highlight, which is what makes boring things exciting and sad things joyful.

Emotion does not follow from any one parameter, it is always a comprehensive approach.

color combinations

There are different methods of choosing color combinations. The most efficient are the complementary, the triad, the split complementary, and the analogous color schemes.

5. Finding emotional contact points

Emotion means more than pleasure and excitement.

A designer needs points of emotional contact with the user.

This is where Don Norman’s cavalry comes to the rescue. User contact points are found on three emotional levels:

visceral — appearance, perception at first glance;

— appearance, perception at first glance; behavioral — pleasure of user experience;

— pleasure of user experience; reflexive — conscious attitude to the product, “trying it on” (picturing yourself as the owner), general impression of the product.

Our task is to achieve emotional contact through visuals and microinteractions on every level. Web designers who don’t know their users create wrong contact points or none at all.

Visceral design appeals to the user’s intuition. Beautiful things are perceived intuitively. A designer needs to know what is emotionally appealing to their target audience, what they consider beautiful. The wow factor works at the visceral level.

User-friendliness is also a feature of visceral design. When things are instantly understandable, the user feels gratified. If people don’t understand anything, they feel stupid. This is a very negative emotion!

Behavioral design is about convenience, functionality, microinteractions, and feedback. This is essentially applied emotional experience and the pleasure it brings.

Behavioral design also has to be simple and understandable, but in practice rather than at first glance.

The principle of creating contact points is the same: you have to understand which web design tool is the most attractive to your target audience.

If your website’s goals are user engagement, dynamic user experience, learning, communication, loyalty, you need to choose the appropriate tools and visualization. If your aim is to relax the users and distract them from negative thoughts, gamification and animation will work well. In our brokerage example, we decided against them. But if our core audience was not conservative but young and excitable, we would need gamification.

Look for tools that will give your users a positive applied experience. These are the emotions born out of actions, in practice.

Reflexive design works by triggering associations, memories, special feelings. This is not the visceral level anymore: it’s about perceptions based on personal experiences, culture, and mentality. Reflexive emotional interaction determines the long-term impression of the product. The user understands what he or she likes and why, what advantages they receive, how the product affects their self-esteem and mood. They want to use the product at all costs.

The reflexive emotional level is about craving, desire, the conscious need to own the product.

This is the most difficult level. And it is where designers are the most likely to get confused and make mistakes. Basically, it’s the master class level. To trigger reflexive emotions, it’s not enough to be a designer. You need to be an educated person with a sufficient degree of culture and empathy. Empathy means resonating with other people’s feelings and being able to feel compassion.

An example: a 20-year-old has spent three years working as a designer, totally immersed in his job. He’s given a task to create feelings of calm and hope in elderly people at an old folks’ home. What does he know about it? It’s great if he has a beloved grandmother. It would help him to put himself in her place, although there’s no guarantee he’ll be able to do it. But not everyone has a grandma. And some people just cannot put themselves in someone else’s shoes, regardless of age. Not everyone is empathetic.

To create a good design for a grandmother, you don’t need to be her age. To raise a businessman’s self-esteem, you don’t need to enroll in a business academy. Don’t be discouraged if the interests of your target group are obscure and don’t resonate with you. Learn all you can about them. Try to put yourself in their place. The more you immerse yourself into their world, the closer, more relatable and more likable they will become.

6. Finding emotional images

This follows naturally from 5 above. Once you know the concerns of your target group, you will effortlessly pick the right visuals. It will be much easier to find photos or draw illustrations if you know exactly what you need.

An important point: to generate the desire to use your product and enjoy it, you need to create an image of a happy owner.

A good example is our case with Clover. The “happy owner” is holding a credit card in his hand, thus making it tangible and objectifiable, claiming ownership of it. The user imagines him- or herself in the owner’s place, picturing themselves as cardholders.

To learn more about creating emotional images, read this:

Increase Conversion with Help of Images

7. Finding yourself

Everyone is capable of empathy, and we can and should develop it. Good designers are open-minded. They read books (and not only design manuals), watch movies, travel, socialize with others, think and reflect, develop their minds and emotions. Designers have their strong suit: their imagination and visualization skills. Add to this being empathetic toward your users, and you will always find a way to touch their hearts.