Images and Empathy tell stories on your website

What's the story behind this image?

Using umpathy on your website.

So you’re on Youtube watching one of those videos where somebody has a minor accident like for instance coming off their bike while performing a stunt, stubbing their toe or for the men, having some form of impact in their lower regions. You can see the drama playing out and even before the incident occurs you can almost feel their pain. You will move to soothe or protect the same part of your body that the on screen victims injured even though you feel no pain.

Or maybe (on Youtube again) you’re watching videos of babies laughing hysterically, for no reason, and you find yourself laughing. You’re watching as a third party but your mind tells you that what ever it is, it is hysterical.

What do the two situations have in common? They both invoke a strong emotion which mirrors the emotions of others. And if that emotion is strong enough, your body actually believes that you are feeling what they feel. We call this empathy.

Empathy in short is when you can understand some other person’s condition or situation from their point of view.

Now although empathy triggers very real emotion, empathy itself isn’t an emotion but more the binding agent or connection that we feel with another person that we can relate to. This relation or kinship is normally based on your memories of a similar situation where you know the out come (pleasure or pain). Because you know what it felt like for you back then, you’re able to draw on those feelings again when you see a similar situation. Let’s call it a linking of the minds.

This isn’t just restricted to video or moving images, photos are also very effective at linking the minds of the viewer. An image of a baby laughing could invoke a smile or even a laugh from yourself. The grimace on someone’s face as they stub their toe will cause you to wince. The emotion displayed by the other person can be readily transmitted to you in a split second allowing you understand what they are feeling. And the main transmission medium is through facial expressions.

Now I’m not an expert in facial expressions and what they mean (I will leave that title to Paul Ekman at But.., one thing I will say is that a smile, a frown, a grimace, they all go a long way to project emotion, and our subconscious is very good at interpreting these projections and giving you (as a viewer) a sense of what you should be feeling.

So how can we use this empathy (or linking of the minds) in our webdesigns?

Do you remember what it was like when you were child, just before the Christmas holiday season. That time when it seemed like every single advert was geared towards selling toys. And every toy was a must have. Every single toy looked awesome, and to top it off, there was some kid playing with it and having the most amazing time. You could feel their excitement, you could almost imagine it was you playing with that toy and being the envy of your friends. Straight afterwards, you would make plans on how to convince your parents to buy it for you. Sound familiar?

Let’s look at a typical car advert.

At some point in the advert there will be a scene where the car is being driven and the driver will have a satisfied look on their face. And to top it off, the driver is shown to be more awesome because they drive that vehicle. If you’re in the market for a new car, it’s the kind of thing that makes you say hmmm.

So what do these two examples have in common? They both use empathy to convey excitement for and along side a product, and they portray an emotion (awesomeness, satisfaction, happiness, etc.) that can be transferred to the viewer leaving them feeling the same way. This feeling could be both positive or negative, and it forms an empathic connection that stays with you after the advert has ended.

Now this is important because if it leaves an emotional impression, you are more likely to be able to remember it than if it was just text in a book or on a screen. And because it is also associated with a product, that product will acquire some of that emotion transmitting ability and you as a viewer will experience that emotion for the product (normally a good emotion).

For example:

Hungry boy looking at dinner
A young boy licking his lips while staring at Sunday dinner. (The emotion is anticipation and hunger).


Cold girl in snow
A woman standing in the snow rubbing and blowing on her hands with a frown on her face. (The emotion, she is not happy being cold).


Happy Man driving his car
The smile on a man’s face whilst driving a new car. (The emotion, “I like driving this car”)

So let’s get to the design. First of all, can we all agree that websites with images, 9 times out of 10 are more appealing to the eye. Can we do that? Cool. Secondly, can we agree that we are drawn to images more than walls of text (especially if that text isn’t formatted well). Now forget about directing the viewer’s gaze, white space and contrast, for now just think about the feelings that you want to portray.

In the example of the young boy licking his lips while staring at Sunday dinner, if you could just see the Sunday dinner you may think “That look’s nice” or “The potatoes look a little over done” or a million other thoughts. But put a face alongside it with hunger in their eyes, and you are more likely to start thinking about the satisfaction from eating it. You will compare it to similar meals and if the experience was good then you will start to yearn for that experience again. You imagine what it would feel like to eat it, and because your are thinking about eating your mouth gets ready to receive. You mouth starts to water, you lick your lips, and for a moment you feel a little more hungry than before.

When you next go shopping you see the product on the shelves and you remember how you felt when you saw the advert, hungry. You are now more likely to purchase the product because you now have a hunger for it.

See how that works?

So the simple act of adding a real person who is showing emotion into the mix helps you to associate the product with a readily accessible feeling. A feeling that will be remembered and possibly acted upon. But there’s also another very important thing happening here. The image starts to tell a story.

Now we have to be a little careful here because the story has to be congruent or inline with the the subject matter.

When I talk about telling a story, what I actually mean is the hidden dialogue that the image presents. In the example with the woman standing in the snow rubbing and blowing on her hands with a frown on her face, if she was actually smiling instead, the message the viewer gets will be different, she actually likes being cold. This may take some of the power away from the scene if you were actually selling something that kept you warm, like a boiler. What about if the third example where the smile on a man’s face whilst driving a new car was actually a frown. Would you think that he enjoyed driving that model of car?

What we have to do is ensure that the emotion of the text matches the emotion of the image, and that the perceived story combined is in alignment to the point where the viewer doesn’t have to think about why the image is there, but more “Ah.., that’s how I will feel when I get this product”. Because in the end, we have to remember that most people will ask in some way shape of form “What’s in it for me”?

So in short, the addition of a face displaying the emotion you want to portray along side an object, will help to trigger emotion and drive a story home that is easy to remember when you later see that object on it’s own. This works best when there is an empathic connection (or linking of the minds) that have shared similar experiences in the past.

What's the story behind this image?Now leave a comment about the story in the next picture. Happy blogging.