Image Tricks to Make Users Feel Rather Than Think

The power of pictures: cleverly use pictures in web design to arouse emotional resonance

We have all heard the saying "A picture is better than a thousand words." In web design, the importance of pictures even exceeds the content of the text itself. Although precise words can clearly express ideas, images can bypass advanced analysis areas of the brain and directly reach our emotional level.

Your website will encounter three types of visitors:

• Reader: People who read everything word by word.
• Browse scanners: Quickly browse content and find the people who are interested.
• Summary Reader: People who only read the first few sentences and summarize the paragraphs.

Remember that the same user may play any of these three roles in the same browsing session. Most readers fall into the category of “Browse Scanners”, which makes the choice of emotional impact in visual content even more important. No matter what type of readers you meet, one thing you must remember: you are facing people, and people are affected by emotional triggers.

References to movie skills

I found the easiest way to explain and illustrate examples and techniques is to use common associations. In this article, I will draw on some tips from the film field.

Most people have seen movies that they empathize with. We laugh or cry for it, cheer for the hero, and worry about the safety of the character. Each movie cleverly combines images and sound to manipulate our feelings. And we may really like this feeling.

In addition to entertaining us and creating visual masterpieces with strong storylines, the director’s goal is to elicit some form of emotional reaction—if you react in a moment, they do their job.

You should select the website's pictures in the same way. Inspire emotions and capture your audience.

Logic cannot dominate everything

Let's take a photo of a smiling face, and vivid body language. Your three-year-old niece is likely to tell you that the smiling person is happy.

While our brains can explain why this image conveys happiness, it is not part of the process that triggers the audience's emotions. Our “intuitive” response to images often precedes logical thinking, and our logical brain is then responsible for explaining our reasoning.

In the two pictures below, the picture on the left may be more scientifically helpful to understand what the frog is. But we are more likely to interact with the picture on the right.

Two accurate frog pictures - but which one is more attractive to you?

This is why as designers, we should always prioritize “emotion over logic”. It is more impactful and can better “resonate” with visitors.

To do this, we can use some subtle techniques to adjust the picture, manipulate the color and focus, thereby shaping emotional information, just like we create text content.

Key Tips: Composition and Light

While there are many ways to generate and evoke emotions, the easiest and quickest way is to properly composition and light. Both methods help create an atmosphere.

Think about those impressive moments in the movie, those moments that really make you feel. These are the results of photographers’ hard work.

Below I will show how composition and light selection inspire the emotions required for the website. Note that each image has been edited very quickly for 5 minutes as an example.

Composition

Composition is an important aspect in both making movies and taking photos. The right angle and lens distance are the small changes that can create a "wow" effect for the audience.

Let's look at the two examples below to see how a good crop or a more compact composition can change the overall mood of an image.

Example 1

Source: https://www.php.cn/link/a1f69f6000f7a8b5883b7134fcf8d558}}

At first glance, this picture is of good quality and captures emotions. But after a closer look, if you want to put it on your website, like as a header/slider, this image is pretty neutral.

Yes, people look happy, but that's because logic tells you that "smiling means happiness." When it comes to stimulating emotions, group photos are tricky.

If this image is used on a charitable organization's website and is accompanied by the text of "Better Life, Better Care" and the donation button, you want to inspire people to really donate and create a better life for the recipients. .

A more compact shot of specific faces can easily affect this.

Here, I'm focusing on those really happy faces in the crowd. By creating focus, I helped isolate those happy emotions. You are more likely to smile and consider donating than being prompted by the original image.

Example 2

Source: https://www.php.cn/link/6346db6a68f632318af0c2a474b9eb34}}

Even if you have only one person in your photo, you can use composition to create an emotional impact. Remember, humans like to see other people. We are born with the ability to read facial expressions, and we can see faces in everything from clouds, bark to car hoods.

Just like before, we have a smiley face, but we can make it more impactful than we are now.

Suppose this image is used on a website that wants to promote a positive and healthy life for women. While there is nothing wrong with this photo, we can enhance it by focusing more on the woman’s face.

By emphasizing her face more than her actual activities, we can inspire the thinking process from “Oh, she looks happy” to “Wow, that might be my joy while staying healthy.” Not to mention we have direct eye contact, which is always a useful tip for you to use in your website pictures.

Now use it with a well-designed call to action (CTA) that may prompt you to “know more” and emotional hints are more likely to happen.

Light

Light is an extremely important asset both inside and outside the image. We humans use light every day not only for seeing, but also as visual stimuli. Real estate agents deliberately open windows of the house they display to create a relaxed and pleasant atmosphere. Restaurants manipulate the amount and type of light to enhance the dining experience.

Of course, the movie does the same. Blue light can be used to inspire dark moods and tones, while warm light can depict relaxing atmospheres or high energy.

Let's take a look at our lighting examples.

Example 1

While the picture above seems to be a sensual shot, we can improve the effect. Based on the surrounding text content, the context of this image is easily seen as contemplative, or even neutral. By merely manipulating the light of this photo, we can create a slightly more solemn feeling. This always needs to be subtle.

By darkening the shadows and adding cool tones, we build a clearer emotion than the original image.

As mentioned earlier, you can create a feeling by changing the lights. This means you can create the feeling of love as easily as you create a feeling of sadness.

Example 2

We have some aspects of the pictures here that you will automatically judge as positive. We have this colorful background, and a couple kissing in the front and center.

If you want to use this image for couples websites, you need to make some adjustments to the lights to create a more "easy" and "loving" feeling.

By opening our images with light, what we get is not only brighter, but also gives you a naive, carefree feeling rather than the stronger shadows and saturated colors in the original photo.

Composition and light are used in combination

Now that you have seen how composition and light work alone, let's see how the combination of these two techniques will produce.

Before

Source: https://www.php.cn/link/ea3e4ebf79464bc783e063d7182bc3fd}}

After

Quick Tips

• Avoid group photos. If necessary, create a pull-focus or pan lens to generate interest in a specific area.
• The contrast used in the image should be proportional to the background of the website to avoid disconnection.
• If your image looks like a "neutral area", try adjusting the crop.
• Try to choose pictures that show humans or animals. This will help inspire positive emotions and interests, not objects.
• When choosing an object to shoot, be sure to create interesting angles.
• Choose one amazing picture instead of five good ones.
• If your image is in the article, make sure it has text or title behind it to motivate readers to keep scrolling.

When cropping/composing images, you may need to apply a blur effect to create focus.

Conclusion

As you can see, with a little tweak, you can easily inspire emotions no matter what type of picture you are using. By making some considerations about the way visitors want to feel, you can easily guide them in that direction with a simple psychological trigger rather than a logical stimulator.

I hope this article will inspire you to try to test composition and light yourself.

(The FAQ part should be added here, the content is similar to the original FAQ part, but the language expression needs to be adjusted and polished to avoid duplication and keep it concise and clear.)

The above is the detailed content of Image Tricks to Make Users Feel Rather Than Think. For more information, please follow other related articles on the PHP Chinese website!