Creating designs that appeal on an emotional level
Henry Ford, the founder of the Ford Motor Company, once said:
Any customer can have a car painted any color that he wants so long as it is black.
If a car is efficient and reliable, why would anyone want a different color right? Ford Model T, produced in 1908–1927, was offered in black only for a long period of time. It was a huge success but over time the company began losing its market share to General Motors and Chrysler. Their cars were fresher, with more innovative designs and a wide range of models. When the newer Model A was launched in 1927, Ford abandoned their principle and offered four different colors to keep up with the competitors.
Let’s be honest, humans do not always make decisions based purely on logic. Sometimes we buy things not because we conducted a thorough analysis, but because we just like how something looks and feels. Humans are emotional creatures, and designers should take this into account.
What is emotional design?
In his book called Emotional Design, Donald Norman describes the concept according to which we perceive things around us on three levels:
Visceral — our initial impressions about how the object looks and feels are formed on this level, and it usually takes a split second.
Behavioral — this is where we analyze what functions the object performs, how effective it is, and how easy it is to use it.
Reflective — after using an object for some time, we start reflecting on its purpose, the idea it expresses, and how it changes the way we perceive ourselves.
What does it mean for designers?
In 1995 two designers at the Hitachi Design Center conducted research and found out that users perceive aesthetically pleasing design as more usable. This doesn’t seem fair, but this is a fact that cannot be ignored.
There’s a multitude of products and services to choose from, so if users don’t form a positive first impression of your product, they may simply close the browser tab. And they will never know how much effort you made conducting usability tests and polishing key user flows.
On the contrary, the successful strategy may look like this
- Grab people’s attention in the first couple of seconds — that’s the visceral level.
- Let them explore your website and find out it actually works well—that’s behavioral level.
- They are likely to return to use it again because you helped them solve their problem or even changed their life for the better— that’s reflective level.
Elements of emotional design
Now let’s talk about certain tools to evoke specific emotions in our users.
Geometric shapes have different attributes, which means the way they look and the way they interact with objects and space around them can affect what emotions the viewer can experience. Have you ever noticed how sports brands use diagonal lines to make their composition more dynamic? Or how a circle placed behind a person instantly gives them more visual weight and attracts attention? By carefully implementing geometric forms in our layout, we can create certain emotions.
While working at the MIT Media Lab, Philippa Mothersill designed a tool that can create 3D shapes that are associated with certain emotions. Here is the video which explains how she used the existing research materials to map various geometric forms to human emotions that are evoked by them:
Color is the next property that can create a certain emotional aspect of your design. It may seem the perception of color is highly subjective and also depends on cultural background, but there are universal principles. For example, red is used for traffic lights and error states because of its intensive influence on the viewer. Or let’s take purple — there’s even a joke that all AI-related websites are purple, but why is that? Because purple is perceived as something magical and mysterious.
Typefaces also have their own character. If you don’t believe it, check this video out:
How we perceive typefaces largely depends on the period in history they were introduced in, their type (serif vs sans-serif, grotesque vs humanistic vs geometric, etc.), and the conventional context of use.
How we applied the concept of emotional design on the savED project
I was part of a team working on a website for savED, a charity fund that restores Ukrainian schools damaged during the Russo-Ukrainian War. Our goal was to attract individual donors to the website, help them find all the necessary information, and build trust with the fund.
We started by establishing a brand voice to figure out how to communicate with our audience. We certainly didn’t want to scare people or to make them shocked — people already know war is bad. What we aimed for was the feeling of optimism, the desire to overcome the problem against all odds.
We had pictures of Ukrainian schools that were destroyed or heavily damaged. To convey the idea of optimism and faith, we added illustrations of small plants and flowers on top of these photos to act as a metaphor for growth, revival, and the will to live.
Our color palette consisted of bright saturated colors that expressed the idea of childhood and playfulness. Also, such a high contrast allowed us to work with depth and make certain objects stand out more thus drawing more attention to them. But we still had to apply colors thoughtfully. For example, black was totally fine for text, but we did not use it as a background — combined with the photos we had, it was too intense and created a tragic atmosphere.
By combining all of the ingredients we described above, we crafted the distinct look and feel of the website just as we intended.
But as we discussed before, emotions alone are not enough to make people use your product. Our idea was to let people connect with savED emotionally, and then provide rational reasoning: detailed descriptions of every program, quotes from eyewitnesses, cost estimations, monthly reports, etc.
Testing emotional reaction
But how do we analyze something so subtle as a person’s subjective reaction to our design? This is how Don Norman put it in his book:
Because visceral design is about initial reactions, it can be studied quite simply by putting people in front of a design and waiting for reactions.
When we conducted usability testing sessions, the first thing we asked people to do was to look through the homepage and say what they thought the website was about.
The most insightful part was to compare what they said with what they did because very often these are different things. Sometimes people would just skip some sections of the webpage but then say these sections were important for them. We also asked about people’s overall impressions to see if they matched our initial idea, and were glad to find out it did in most of the cases.
Summary
The concept of emotional design gives us valuable insight into how people perceive digital products and what influences their impressions on every level: visceral, behavioral, and reflective.
By carefully choosing colors, typefaces, layouts, and imagery that match the company’s identity and its brand voice, we can create positive experiences for our users. Combined with the functionality, usability, and overall value, it can be a game-changer and a foundation for the product’s success.
