Exploring the Impact of Emotion in Web Design

For us designers it is sometimes a hard pill to swallow, but our beautiful work is useless if they do not serve the goals of our clients. And for every client, the first order of things to do is to attract visitors to their websites and products.

Times of aggressive digital marketing (ads, banners, and pop-ups) are gone. Today’s web users, even millennials and seniors, expect their browsing experience to be “clean” and aesthetically pleasing. Look at how much the search volume for ad blocking software has increased over the last five years.

With ad blockers installed on every other device, we all have to disband with the simple go to options and look for ways to advertise and sell products, services or ideas with more sophisticated instruments.

One such instrument is known as Design for Emotion – a psychological approach to design, that aims to invoke the intended user with emotions, and anchor the visitors to your website’s objective.

For example, if we were to design a website to promote a soft drink, we could do it in two ways:

1. Put the product and brand on the forefront.
2. Put the product and brand in the fitting emotional entourage.

Imagine visiting a site and viewing an image (or video clip) of young people playing volleyball on a sunny beach. Even if you are not a big volleyball fan, the emotion of how much fun these people are having would instantly resonate with you. And then, when one of the people refreshes with a cold drink, you can’t help but feel an itch of thirst in the back of your throat as well.

The aim of the image or video was not to promote beach volleyball but to sell the soda brand. However, it did not just hit you like a train but was brought to you gradually and unobtrusively, through the emotion of fun and spirit of the game.

Levels of Emotional Comprehension

Designers have studied the emotional impact of websites since the early days of Web 2.0 when complex animations and lightweight clips gradually took over the virtual space. “Designing for Emotion“, a book published by Aaron Walter in 2005, quickly became a bestseller and a tabletop guide for many web designers of today’s generation, including myself.

In his book, Walter identifies the three stages of emotional engagement of a typical website visitor, they are Impressed, Intrigued and Involved.

1. Visceral Level: “Impressed”

The first impression is always subconscious and is interpreted by our brain automatically, regardless of reasonable judgment. When we visit a website, we instantly give it either a “thumbs up,” or a “thumbs down.”

And based on that initial estimation, we will continue to positively perceive all content on that site. So, it should come as no surprise that a good visceral design must only invoke the “thumbs up” reaction.

2. Behavioral Level: “Intrigued”

If something looks cool at first sight, our brain tries to analyze what it is and how it works. This triggers our behavioral patterns, and we begin to get emotionally excited about something we like. So, the second step of emotional design would be to make your design inviting for further investigation.

When the visitor is intrigued, they won’t be able to resist scrolling down, following the link, or even clicking a call to action.

3. Reflective level: “Involved”

This is the highest level of our cognitive thought processes. This is when we analyze and make logical judgments about the things we are seeing. The website user is drawn to this level by the previous two, and at this point, all the cards must be put on the table by showing what the product is, and why it’s useful for the user.

In their head, the user will understand the site’s intention to sell the product, but due to the positive emotion they have experienced, this intention will not be perceived as hostile.

So, as you can see, design for emotion aims to invoke a chain of psychological reactions. Firstly, hook the user with the wow-effect, then make them eager to explore further, and lastly, bring them to an understanding of what exactly the fuss is all about.

Now, let’s take a look at what tools contribute to creating emotionally engaging visual designs.

Components of Emotional Design

We will look at the three obvious inbounds which every designer uses to create visuals for a product or brand, and try to analyze them from the perspective of designing for emotion.

1. The Brand Book

If we are aiming to sell the brand with emotion, we have to first study the rulebook of that particular brand. A good brand book or style guide will contain color schemes, fonts, grid alignment principles, do’s and don’ts of advertising space placement, and so much more.

You have to presume that the brand identity already has some built-in emotional sense. Many designers will take that sense and expand it to the whole site. In the end, they will have one big mega-logo instead of just a website.

A better approach is to extract the brand essence from the book, but put it between the lines, rather than at the forefront. Leave the logo in the top left where it belongs, and devote the rest of the space to things you want the users to associate the brand with.

2. Colors

On a general level we all know what the colors represent. Red is danger, aggression; blue stands for calmness; and green for permission, freedom, nature. When designing for emotion, color tones are much more important than raw colors. Making the tone darker or lighter can drive the intended emotion in various directions.

Below is a short video that features the discography of Ben Lukas Boysen, but without any sound. All emotions are portrayed with colors. Without hearing the music, we still get a subconscious emotional feeling for every song.

Also, you must keep in mind the cultural peculiarities of each color. In Japan, white is the color of grief, and to people of the Middle East, yellow is often seen as disgusting. Here is an interesting and informative piece on what the colors represent in various cultures.

3. Entourage

Emotions are much easier to invoke by the entourage than the brand itself. The brand has to be put into the environment or circumstances, in which it is likely to be appreciated the most by the viewer.

One of the best examples is a refreshment on a hot day. We rarely consume soft drinks just by desire of heart. But on a sunny day, during a vacation, when laying on the beach or hanging by the pool, what can be better than a cold drink with thirst-quenching bubbles?

“Emotional design turns casual users into fanatics, ready to tell others about their positive experience,” concludes Aaron Walter, one of the founding fathers of emotional design.

Conclusion

Truly, every website is all about the experience – visual, sensual, informational or simply fun. If the website you create provides one of these experiences, then you can be assured that it will make visitors want to come back again and again. And regular visitors to your client’s website is the best way to invoke the most appreciated of all emotions – client satisfaction.