More Than Just Looks: Welcome to the Emotional Web Design Era

What would you say is the most important thing when building a website? A graphic designer will surely say it has to look gorgeous. The company’s CEO will definitely want it to sell. PHP or .NET developers will likely pick a site with good performance. Do you agree with one of them? How about all of them? Chances are you want those 3 things.

That makes sense. Who wouldn’t want a good-looking website that works well, it’s efficient, and converts? We all have come to expect those things as the peak any website should aspire to. Yet, for all the potential benefits such a model site could bring, it’s forgetting something that could be a key differentiator for any brand – emotion.

Today’s internet focuses on the more rational aspects of it all. If a website is functional and efficient, then all it’s good. Why fix anything if we now have some sort of template that we can base all of our website design on?

However, settling for our current internet might also mean we are losing the possibility to develop it to its full potential. And you know what’s the road towards that potential? Emotional web design.

What’s Emotional Web Design?

In his book “Emotional Design”, American researcher, professor, and author Donald Norman says that users see objects that are aesthetically pleasing as more effective. The reason? Beautiful things boost our creativity and increase our mental activity. In other words, well-designed products are more fun and engaging, so people are more willing to spend time using them.

Such a simple concept applies to pretty much everything around you. So, yes, it also applies to websites. That’s where the concept of emotional web design comes from: the process of creating a website with emotion in mind.

An “emotional website” (if you let me call it that) engages with its visitors on a deeper level. It establishes a connection that feels welcoming, warm, practically human. That’s the key factor in this design process – the human factor. Basically, websites should make its users feel like a person created them (contrary to those sites that feel like they were thrown together by a machine).

It seems nice, doesn’t it? However, what does emotional web design looks like? How the heck can you create an emotional website? Is there a way to explain it to your graphic and .NET development teams? Sure there is! But you’ll have to give them some background first.

The Foundations of Emotional Web Design

First and foremost, you have to define the pillars of your website. Why are you building it? Who is your target audience? What’s the message you want to send? Answering those questions will let you find the potential emotional connections in the center of it all. How can you expect to generate any emotions in your audience if you don’t know who they are?

How you respond to those 3 questions will help you lay down the blueprints for the website. After that, it’ll be the time to see where can you include emotional triggers in the site’s design. But, wait, aren’t we forgetting something? Yup. We have to define which elements can generate some kind of emotion. An alternative option is to simply approach the best web design company and let them handle this task for you.

Back to Norman’s book, then. In it, good ol’ Donald identified 3 levels that a designer can use to create emotion in a product. Let’s see how they apply to web design.

  • Visceral Level: the lowest level is whenever you react to something unconsciously. “Reaction” and “instinct” are the key concepts in this level, as it encompasses the emotions that appear as soon as you use the product for the first time. In short, it’s the first impression you get. On a website, it’s how your users would feel after visiting it for the first time. Ideally, you want them to feel captivated or amazed by colors, text, videos, animations, and so on.
  • Behavioral Level: the following level is about how something works. It’s all about the use here. That’s why designers working on this level need to focus on how understandable and usable a product actually is. On a website, this means you’ll have to define how your visitors will interact with it, from creating a visual route for their eyes to follow to determine where to place buttons, fields, menus, and the like.
  • Reflective Level: the highest level of them all is set on interpretations. This level is above the other 2 because it can overrule the emotions elicited by those levels. Thus, you can have a poor first impression and a regular understanding of how a product works, but finding yourself loving it after several uses. On a website, this means going beyond the visuals and the layout and into other aspects such as the cultural message, the meaning of what the website offers, its importance, etc.

So, combining the message you want to send with the purpose you want to achieve and the target audience you want to talk to will define the basis of your website. Then, with that knowledge, you should mix elements from the 3 levels to get a true emotional connection. Now that you know those basics, let’s dive into some considerations for emotional web design.

Integrating Emotions in Your Website’s Design

Any website combines a lot of pieces. There are images, videos, text, buttons, fields, windows, animations, and so on. All of them (and I mean ALL) play a certain part in emotional web design. You probably know that for some of them. For instance, you likely know that people associate colors with different meanings. Like blue is for loyalty and trust, and red is love and passion.

Other things that cause emotion you surely are familiar with are photos, shapes, and fonts. But there are other elements that aren’t as obvious that can make or break your emotional design. I’m talking about the following:

  • Tone: Everyone in the world has a unique tone. Even if it’s dull, people sound like themselves when they talk. Brands are no different. That’s why your website should truly reflect that. How you talk to your target audience conveys a lot more than what you think. From how you see yourself and your audience to what you expect them to do, the entire copy on your website has a tone – so you better keep an eye on it. You can be humorous, serious, informal, slangy, or whatever. You only have to make sure that your tone is intentional and matches your brand.
  • Humanization: Remember how I said earlier that people like websites that feel “human”? Well, here we are! People want to connect with other people, so your website better look as human as possible. On website design, that means using photos of real people that are as close as your target audience as possible. Real video testimonials or animations that look like your audience also help with humanization. What’s more – pictures of you and your staff also make your design more transparent and boost your trust.
  • Freshness: This is probably the most neglected aspect of them all. A nice looking website that works well and is understandable isn’t necessarily engaging. That may be because we already accustomed to certain types of sites so we’re looking for something new. Something fresh. Having sliders, a good video, a contact form, and some text might be enough to send a message but it’s not nearly enough to captivate anyone. The best websites today challenge how we interact and navigate them and connect with us through surprise, wonder, and uniqueness. That’s what emotional web design is all about.

Some Final Words

The paragraph above might be the most important one in this article. That’s because it tackles the essence of the problem in today’s internet. The era when functional and pretty websites reigned supreme is coming to an end. We are now seeing the rise of the Emotional Web Design era, where we expect new experiences that surprise and engage us.

That doesn’t mean you have to sacrifice functionality or performance over experience. You can create an amazing website that subverts the web as we know it and be immersive as hell but that people find too disorienting to use more than a couple of times.

In that sense, emotional web design builds on top of what you already know. Web designers as a whole have already figured the visceral and behavioral levels out. Yet, the reflective level still has a lot of room to grow. In that empty space, there’s a lot of possibilities that will challenge what we think a website can be. And it’s our task to make those possibilities a reality.

So, next time someone asks you “What do you want for your website?”, you can use the same old answer: good-looking, efficient, conversion-focused. Or you can add a new level of emotion and simply answer “I want something memorable.”