Web Designing is All About Stirring Up the Right Emotions – 5 Emotions that Make a Website Work

The focus on aesthetics in website designing remains as is, but another element has been added to the mix, which is Emotion. A mixture of emotions and aesthetics helps you design user experiences that effectively capture the mood of the website and help deliver the website’s message effectively.

Web Designing is All About Stirring Up the Right Emotions – 5 Emotions that Make a Website Work

You might not have thought about it, but the reason why you like a particular website is because you are able to connect to it at an emotional level. Rational functionality and efficiency of the website is all well and good, but if you want to capture user attention, look no farther than emotional design. You want your website to be both usable and pretty, but what you also want is that it will be able to stir up the right emotions in the target users.

So, let’s take a look at five emotions that help build exceptional user experiences:

Humor

If a website makes you laugh, you immediately connect with it. As can be imagined, such websites are difficult to create as designers need to have a funny bone to create such websites. The problem also lies in the fact that there is a thin line between frivolity and humor and at times, there are websites that cross this line in an attempt to be humorous. Also, humor is largely subjective; I might find something funny, but I can’t expect my wife or my best friend to laugh at the same joke.

So, as a designer, you will need to generalize the humor and assign certain parameters to it. For e.g. it must be evident but not insult the intelligence of the user; it must be purposeful meaning it must make a point; humor should make your users feel at home; it shouldn’t be goofy and it must be the kind of humor that users can share with everybody. The last bit is very important.

Something else that you need to understand about bringing humor in your website is that it should never get in the way of the website’s work flow. Humor must involve, but not annoy. In order to create a website packed with humor, you will need to understand your users, and the way they think. For this, you will need to do a fair bit of research; you will also need to understand the context in which the website is going to be used.

The best way you can go about injecting a bit of humor in your site is by using a product centric funny phrase that people remember every time they see or use your product. Something else that you can do is that you can use images and an associated catch phrase that taken together create humor.

It’s important to remember that your website doesn’t need to be‘laugh out loudfunny’ in order to make an impression. All it needs to do is make its visitors smile and your job is done.

Let’s take a look at a few examples and see how they add an element of humor to their designs:

instantShift - People of WalMart

People of WalMart is a site that allows people to upload pictures, videos and stories about their WalMart visit. It’s funny but its design is not laugh out loud. The home page features images or videos, and also has a section called The Loop that offers links to the latest posts, with a short description. Every image used on the home page is funny. But, the overall design also exudes a bit of sophistication. It’s not crass; it just tells everybody it’s a humor site.

instantShift - Fat-Man Collective

Another of my favorites is Fat-Man Collective, a website that only uses content to make its point, and has a crazy illustration of a ‘fat man’ on all its pages. It’s just text and that one image of a fat man that injects all the humor in this site. It’s simple, straight forward and funny. The design, in spite of its simplicity, makes you want to go through the site.

Empathy

All great websites empathize with the needs and requirements of their target audience, especially their problems. Such websites are designed to say, “we are there when you need us most, why go anywhere else”. When you empathize with your target visitors, you are actually building trust and extending your credibility.

To bring a bit of empathy to your website design, you need to put yourself in the shoes of the user. Think about their state of mind when they are suffering from a particular problem. What have they lost while suffering from the problem, monetarily or otherwise? What are they looking for, from their solution providers? The answers to these questions will help you choose the right images, write the appropriate content and chart a user flow that empathizes with the needs of your target users.

Here are few website’s that I believe showcase empathy best:

instantShift - wikiHow

wikiHow needs no introduction. It’s a prime example of a site which empathizes with your problems and offers a solution for the same. It uses normal run of the mill text and images to showcase empathy, but the focus is on relevance. Forget about the popularity of this website for a moment, and imagine you have just come across it while browsing the internet. One glance at it and you will realize it’s a site that wants to help you. Tell me, that isn’t true. That’s what empathy is all about!

instantShift - Hellofood

Let’s take a look at a colorful example all the way from Nigeria. Hellofood instantly empathizes with people who want to order out. Such people are hungry and that’s the question it asks and answers at the same time through its Home Page. It makes an instant connection with anybody who is hungry. The image of the delicious look meal that forms the background of the Home Page doubles the impact of the website’s design.

instantShift - Empathy

This is an award winning website of St. Louis Children’s Hospital that showcases empathy in all its glory. Its images, content and various design elements come together in a nice little package. Together, they say in no uncertain terms that the hospital understands the concerns of parents and is the right choice for child care and treatment.

Passion

Bringing to your website design a sense of passion helps energize your website users. The tone of the voice you use on your website has a big role to play in bringing out this emotional quality. You will need to communicate with your users with urgency; give them time to make up their minds, but make sure that they don’t have a lot of it, make sure they understand that you mean what you say, tell them they are missing out on something really good, if they don’t make a buying decision from your site, keep things real time, do everything possible to bring in more energy and a sense of purpose to your website.

The choice of your website’s image should be exciting, interesting and actionable. If your site is offering website design services, then you must make visitors think, you are passionate about website designing. The use of actionable content, call to action images and the right color combination will help give your website design just the right amount of passion to make a great impression.

Here are some websites that are all about passion and make their point exceedingly well:

instantShift - Nike Vision

Nike Vision is a website that showcases eyewear from Nike. It’s a site that exudes passion, through the right choice of images. Each page has an image that is exciting and makes you want to purchase the eyewear. These images are the site’s most important design element and make the site what it is. They display a one-of-a-kind passion for sports and the right eyewear.

instantShift - Red Bull

How’s that for a supremely passionate image on your Home Page, that’s the Red Bull website for you! It’s good on the eyes, very upfront about what it wants to portray (passion, energy, and power) and it does so in the best manner possible.

Envy

I am sure there are people who will dispute this fact, but envy in large part drives our need to achieve something in life. You look at somebody’s mansion and say, man that’s a great house – There is bit of appreciation there and a lot of envy. It is this envy that will see you making an effort to build the house of your dreams.

Now, juxtapose this thinking to websites. You see something on a website, you see an image of somebody using a particular product, and you also notice that the person is enjoying using that product, result – you want it. Whether you will actually go ahead and buy it is another thing altogether, but at least the thought has been allowed to germinate in your mind. This is why bringing about a feeling of envy in website designing is a great idea.

Your website’s design has to do a balancing act between envy and desire. First, show images that make your visitors want to buy a product or use particular service, and then you show somebody else benefitting from the use of that product. This creates envy. A mix of envy and desire is the perfect emotion that helps you sell your products or services.

Some websites that bring out the envy in you:

instantShift - Ten little monkeys

Ten little monkeys is a site crafted to create a feeling of envy amongst parents. “I want my kids to look that smart”, “I want my kids to be that well dressed”, “I want my kids to have fun”, that’s the feeling brought about with the images used on the site. The use of catchphrases and engaging content that’s short and to the point makes things even more interesting. Also note the use of high resolution call-to-action images. The design definitely makes you want to buy the clothes on offer, for your kids.

instantShift - theFamous Cookies

I love cookies and so do you, but one look at theFamous Cookies Home Page and you will want to eat that drool worthy cookie, that has pride of place on it. The intelligent mix of content and delicious imagery sparks envy and desire. You are envious of anybody eating those cookies on the website!

Sympathy

Have you gone through a charity website or a website that’s asking for donations?They use images that elicit immediate sympathy so much so that you are immediately thinking about helping out. In order to make sales, such websites instill a deep feeling of sadness in their target audience. After all you won’t feel like contributing to the cause if all they show are happy faces, having fun. Even their content is configured to make you feel sad and some of these sites are so good that there is a catch in your throat when you are going through them.

So, sympathy sells. The next time, you are designing a website, don’t forget that.

Here are some websites that are selling a cause that you will become immediately sympathetic to:

instantShift - Care

Cross you heart and tell me you don’t feel like making a donation when you visit Care. That’s because the website design exudes sympathy through the right images, their proper placement and perfectly worded content. Each face, each design element, makes you feel sympathetic to the cause.

instantShift - The World Wildlife Fund

The World Wildlife Fund website is both stunning and humbling. Some amazing images and related catchphrases bringing to light the problems facing the wildlife, make for what at times is an interesting and at other times a gut wrenching read. It induces immediate sympathy for the wild animals through its majestic images and a simple straightforward narration of the problems faced by them.

End Words

Contemporary website design is a coming together of aesthetics and emotions. The design must look good, and get the necessary emotion out of the visitors. For this to happen, you will first need to identify the emotion that you want to get out of your visitors and work towards it.

Like it? Share it.

7 Comments

  1. Some great examples how to translate emotions into webdesign, thanks!

  2. I have always believed that emotion is probably the #1 criteria in getting your visitor to read on.
    If you can connect instantly with his emotions at the point when he is on your site your chances of converting him into a follower or a client are greatly improved.
    Images of course are an important part of stirring emotion.
    Nice post
    Lawrence

  3. I must admit I’d never thought of the use of empathy with regards to sites like WikiHow or the restaurant sites, but that is a very good point. Those pages tell us it’s OK to be confused (or hungry, etc) someone else has been there, too. I like that perspective.

  4. These are some really great examples of websites that show emotion. My favorite is the one with the Skateboarder. The action of the photos shows a lot of passion. Great articles, keep them coming!

  5. Very interesting examples. Of the feelings ennumerated above I usually gravitate to websites that channel passion and/or humor. Humor, as you said, gets tricky and difficult to handle but an answer to that could be to run a few a/b test in order to find out whether what’s funny to you is also funny for the users (and if they convert).

  6. Your share box brakes the layout on mobile view

  7. beautifully designed websites, name and the effect of sites results the same. i really love the WWF design. thanks for compiling and sharing.

Leave a Comment Yourself

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>