Image tricks to make users feel rather than think

Guest Blogger

A picture is worth a thousand words… We’ve all heard that one before, right? In web design, images are as important – if not more important – than your actual copy.

While there’s no doubting what clear writing can bring to an idea, images have the ability to bypass the high-level, analytical brain and speak straight to us on an emotional level. Do we need another goofy cat Youtube video to prove that imagery can turn normal, intelligent discerning humans into giggling, retweeting fools?

There are three types of readers your site encounters:

  • The Reader: An individual that reads every line
  • The Scanner: An individual who “scans” or “skims” through your content to find the interesting bits
  • The Bottom Feeder: An individual who reads the first few sentences and then cuts to the summary paragraphs

Do bear in mind, the same user could take on any of these roles, possibly even within the same browsing session. However, the majority of readers fall under the scanner category. That makes it even more important to make emotionally impactful choices in regards to your visual content.

Regardless of what type of readers you encounter, there is one thing that you must always remember – you’re dealing with humans, and humans are influenced by emotional triggers.

Film cues

movie

I find that the easiest way to explain and illustrate examples and techniques is to use common links. In this article I’m going to be borrowing from the world of film.

Most of us have films we relate to. We laughed or cried, we cheered for a hero, and we feared for a character’s safety. Each film used a clever combination of image and sound to manipulate the way we felt. And we probably loved it.

Aside from entertaining us and creating a visual masterpiece with a strong story, directors aim to trigger some form of emotional reaction — and if you reacted, even for a second, then they did their job.

This should be the way your approach your website imagery choices. Trigger an emotion and capture your audience.

Logic doesn’t dictate emotion

frog

Let’s take a photo of a smiling face and animated body language. There’s every chance that your three-year-old niece could tell you that the smiling person is happy.

While our logical brain can justify why the image might communicate happiness, it isn’t part of the process that evokes the emotion for the viewer. Often our gut reaction to an image comes first, and our logical brain is given the task of explaining our reasoning later.

In the above two images, the left image may be more scientifically useful in understanding precisely what a frog is – but it’s probably the right image that we engage with. This is why, as designers, we should always favor emphasizing “feelings over logic”. It’s more impactful and will do a better job making your visitors connect.

To help, we can employ some subtle techniques of adjusting the frame, manipulating the color and focal points we can craft the emotional message, in the same way we might craft written copy.

Key techniques

While there are numerous ways to generate and evoke emotion the easiest and quickest results come from appropriate framing and lighting. These two methods help create atmosphere.

Consider the hard-hitting moments in film. The parts where you are really made to feel. These are crafted thanks to the work of the cinematographer.

Below I’ll show you examples of how both framing and lighting choices can motivate the emotions needed for your site. Note that each image has gone undergone a very quick 5 minute edit to work as examples.

Framing

Framing is an important aspect whether you’re making movies or shooting photos. The proper angle and distance from the lens are just those small little changes that can create a “wow” effect for your viewers.

Let’s look at the two examples below to see how a good crop or tighter frame can change the overall mood of an image.

Example 1

happy

At first glance this image is of a good quality and has captured emotion. Upon second glance and if you are looking to place this on your website, say for the header/slider the image is fairly neutral.

Yes, the people appear happy but that’s because logic is telling you “smiling means happy”. Crowd shots are tricky when eliciting emotions.

If this image was for a charity organization website and accompanied with the text “Better Life, Better Care” and a donation button you would want to motivate people to actually donate to create a better life to the recipients.

Creating a tighter shot on particular faces can easily affect this.

happy2

Here you see I focused on those truly happy faces in the crowd. By creating focus I have helped isolate those feelings of happiness. Compared to the original you are more likely to smile and consider donating than if prompted with the original image.

Example 2

bike

The process of framing for emotional impact can be used even when you have one person in your photo. Remember that humans like looking at other humans. We are born with the software for reading faces and we see faces in everything from clouds to tree bark to car bonnets.

Just like before we have a smiling face but we really can make it a lot more impactful than it already is.

Consider if this image was for a site that wanted to promote active and healthy living for women. While there is nothing wrong with the shot we can amp it up by focusing on the woman’s face more.

bike2

With a tighter emphasis on her face than on her actual activity, we can motivate the thought process starting from “oh, she looks to happy” to “wow, that could be me enjoying myself while being fit”. Not to mention we have direct eye contact which is always a helpful technique to use within your site’s images.

Now pair that with a well designed Call To Action (CTA) that perhaps prompts you to “learn more” and the emotional cue is more likely to happen.

Lighting

Lighting is an extremely important asset in and outside of images. We as humans use lighting on a daily basis not only to see but as visual stimulants. Real estate agents purposely open the windows of houses they show to create an enjoyable and welcoming atmosphere. Restaurants manipulate the amount and type of lighting to enhance the dining experience.

Film of course does this as well. Blue lighting can be used to motivate somber moods and tones while warmer lighting can depict carefree atmospheres or high energy.

Let’s take a look at our lighting examples.

Example 1

boy

While our image above does seem to be an emotive shot, we can heighten the effect. Depending on what the text copy is around it the context of this image could be easily seen as contemplative or even neutral.

By manipulating just the lighting of this particular photo we can create a slightly more solemn feel. This always needs to be subtle.

boy2

By darkening shadows and adding cooler tones we have established a more definitive emotion than the original image.

Like noted before you can achieve feelings by changing your lighting. This means you can create feelings of love just as easily as feelings of sadness.

couple

Our image here has some aspects that you would automatically decide as positive. We have this colorful backdrop and a couple kissing at the forefront and in the center.

If you wanted to use this image for a site for couples then there needs to be some adjustments to the lighting to give you a more “lighter” and “loving” feeling.

couple2

By opening up our image with light we have something that is not only brighter but gives you a sort of innocent, carefree feeling as opposed to the harsher shadows and saturated colors in the original photo.

Framing and lighting together

Now that you have seen how framing and lighting work separately, here is what a difference that using both techniques together can get you.

Before

kids

After

kids2

Quick tips

  1. Avoid going for crowd shots. If you must create a pull or rack focus to generate interest in one specific area.
  2. The amount of contrast used in your images should be proportionate to the site’s background to not create disconnect.
  3. If your image appears to fall into “neutral ground” try adjusting your crop.
  4. Try to go for images that show either humans or animals. This will help motivate positive emotion and interest opposed to objects.
  5. When opting for object shots make sure to create interesting angles.
  6. Go for that one amazing image instead of five good images.
  7. If your image is within your article make sure that it is followed by text or captions to motivate readers to continue scrolling.
  8. When cropping/framing your images you may need to apply a blur effect to create focus.

Conclusion

As you can see, a little tweaking on your part can really evoke emotion no matter what type of image you’re using. With a little consideration about how you want your visitors to feel, you can very easily guide them by simple psychological triggers as opposed to logical stimulants.

What tricks do you use to make your images more compelling? Share them in the comments!

This article was originally written by Gabrielle Gosha and published on Sitepoint.

The author

Guest Blogger
Guest Blogger

99designs loves to share design how-to's directly from design professionals themselves. Reach out to share your thoughts, ask questions, or thank these experts for their awe-inspiring tips!

Related articles

6 practical hacks for taking creative photos with your smartphone

6 practical hacks for taking creative photos with your smartphone

It’s 2016 and artistic photography is no longer limited to high-end, costly DSLR cameras. Most smartphones are now equipped with high-quality cameras, and while they still have a long way to go before they can truly compete with professional cameras, they can definitely get the job done. Your smartphone is very often the most convenient…

Why images might be ruining your website

Why images might be ruining your website

Fun fact of the day: the human brain processes imagery 60,000 times faster than text. Despite this, we’re still seeing lots of professional sites whose only image content is their header and ads. Visual spectacles like Tumblr and Pinterest are simply taking advantage of how the human brain works, making them not only extremely popular but…

4 tips to get you started in business card design

4 tips to get you started in business card design

If your niche is business card design, or you would like it to be, then this is the article for you. There are many factors to keep in mind before starting the design process and deciding on things like typeface and color. Here are 4 important tips that will help you get started with a…

Current Design Contests

Designers, check out these contests so you can start building your career.
0%