You’re Not Emotional: Emotions and Website design

Posted on May 31, 2014 at 4:35 pm

How does this website make you are feeling?

On the skin, it could seem that reading an editorial on a web site is an emotionless experience, but science tells us that we use emotions to notify our understanding. So, yes, you’re experiencing an emotion straight away, but what could it’s? Let’s get back to that query on the end of the object, with enhanced understanding.

What is Emotion?

In his book, Your Brain: The Missing Manual, Matthew MacDonald describes emotion because the “brain’s auto-programmed response to certain stimuli.” He carefully distinguishes it from feeling. Feelings are the style we interpret emotion. Whereas, emotion is immediate, unconscious, and visceral, feeling, nevertheless, is processed and conscious.

Why is Emotion Important In Design?

“I’ve learned that folks will forget what you said, people will forget what you probably did, but people won’t ever forget the way you made them feel.”
-Maya Angelou

Emotion has the facility to foster an enduring relationship along with your visitors. In the event you can elicit an emotional response from a visitor, he’ll remember the experience long after everything else has faded.

Take a glance at these websites:

You start off with a wonderfully lovely view of Paris-but nothing we’ve haven’t all seen before. What makes you sit up straight and take notice is the animation effect. It’s simply beautiful and surprising. Although you are able to not remember everything about this site, you’ll certainly remember the sensation of surprise as you scrolled down for the 1st time.

No music, just flight. Who doesn’t love travelling through clouds without leaving your seat? This almost seamless video evokes excitement and anticipation-you’re heading somewhere, you simply don’t know where. I can’t inform you how long I’ve stared at this video (it might be embarrassing). The takeaway is this site stirred my emotions, held my attention, and left an enduring impression.

Before They

I dare you to drag up this website and never scroll through. Stunning, high-resolution images and intuitive design tell a narrative that appeals on your emotions.

A recent study on patients tormented by hippocampus damage, which include Alzheimer’s disease, shows that emotions linger even after memories fade. Although a visitor won’t remember everything you’ve said, they’ll remember the sensation. That feeling will make them return persistently.
The point of all design is to interact viewers. Engendering positive emotions may end up in longer visits, higher engagement, and more excitement about your product.

Important Components of Emotional Design

Many people depend on text to form emotional bonds with their visitors, but text alone just isn’t enough to create emotion.

Even on a domain like Zen Habits, that is famously minimalist, it’s emotional appeal doesn’t derive solely from text. As a reader, you’re feeling at peace, or zen, at the site as it was designed in the sort of way as to awaken that emotion within you. There’s no sidebar. There’s no images. But, there’s white space, and plenty of it. It feels pure, authentic, and truthful.
As you may tell in Leo Babuata’s design, font type, size, and spacing could make an impact in your emotions. On Zen Habits, the design is intentionally breathable and open. Nothing is cluttered. His typography supports the design but additionally tells the similar story.

What does your font say?

Fonts is usually friendly, serious, smart, and unfortunate. Fonts could be separated into loads of different categories, but for the aim of this text, we’ll discuss the four major categories: Serif (has embellishments at the ends of letters); Sans Serif (without serifs, or embellishments at the ends of letters); Script; and ornamental.

Serif fonts convey traditionalism and respect. Think  Times New Roman:


Sans serif fonts are decidedly more modern. Think Calibri:


Script is sophisticated and will be conservative. Think Pacifico:


Decorative is whimsical and inventive. Think Impact Label:

impact label
(images courtesy of Wikipedia Images and FontSquirrel)

Which emotion are you hoping to elicit to your design? If you would like respect out of your visitors, elect fonts like New Times Roman or Garamond. On the way to them to view you as creative, try a font that pushes the envelope, like New Facebook or Base 05.

Fonts should echo your design intention. Fonts, like love interests, shouldn’t ever be randomly chosen in keeping with looks. They must manage to further your emotional story.

What about colors?

Color is, undoubtedly, the most effective solutions for introducing and extending emotional response in your website design. Science has proven again and again that humans equate colors to emotions. Why do you think McDonald’s logo yellow and red? It elicits hunger and optimism.
When a user first visitors your website, they get an impression of who you might be, and create a technique during which to narrate to you. Colors, fonts, and other visual design choices automatically set the scene-they’re just like the clothes of an internet site.

For example, in the event you visit Wikipedia, you can find by the blue and grey color scheme that it’s dependable and reliable. You are able to surmise by the font choice and size that it’s serious and smart. And you may also tell by the photographs that it doesn’t pay for stock. I’m joking, sometimes Wikipedia has great images, but imagery isn’t the focus point of Wikipedia. The guts of Wikipedia, and all websites, is the content. i myself wouldn’t need to sit next to Wikipedia at a celebration. Imagine how boring that may be. But, Wikipedia will be an amazing friend to text. (More about that, later.)

Another example is Yelp, which uses blue and red primarily. What do those colors say together with what we understand about Yelp? It’s looking to be trustworthy and to seize your attention. Red definitely pulls the attention to the important thing feature of Yelp-the reviews. Although red could make you hungrier when you’re interested by food, it would also grab your attention even if you’re not hungry.


Some websites are green and blue. One example is TripAdvisor, which uses these colors to convey a feeling of relaxation (you’re going on vacation, of course), and trust (you’re reading actual reviews from other users).
Have you spotted the rage? Blue will likely be utilized in website design to speak trust and dependability.

Let’s look at how colors engage our emotions:

  • Yellow: Happy, Optimistic, Clarity,
  • Orange: Friendly, but adore it or hate it
  • Red: Exciting, Youthful, Urgent, Attention Grabbing
  • Purple: Creative, Imaginative, Uplifting
  • Blue: Trustworthy, Dependable, Secure
  • Green: Peaceful, Growth, Relaxing
  • Gray: Balance, Neutral, Reliable, Intelligent
  • Black: Luxurious, Powerful, Authoritative

A lot folks choose colors because they compliment one another, or simply because they’re pretty, but when you pick the incorrect color, it is able to send out a mixed emotional message for your visitor. For instance, most online e-commerce businesses, like PayPal, Stripe, and Authorize.Net prominently use blue of their designs, and avoid the colour red- that’s exciting but not necessarily secure. At the flipside, there are financial sites like Bank of America that uses red prominently. Bank of America uses red exclusively to sell products, however it does balance the sense of urgency created by red with healthy doses of blue (security) and grey (reliability).

Referring back in your color choices, are you able to see how your design is exciting those emotions?

What about content?

Posted in Web Design