How Photos Can Improve User Experience: Tips and Examples

Our brains process images faster than text. No wonder photos and images play such a crucial role in any web interface. Manipulate the visual components, and you influence the viewers. Here are 8 ways you can leverage images to improve UX on your website.

Grab Attention

Thanks to YouTube and the Internet as a whole, we have short attention spans. This means you have mere seconds to interest your audience. This is why so many websites, especially news outlets use clickbait like never before.

Now, you don’t have to make Buzzfeed out of your website. There’s no reason to give readers clickbait when they’re already on the page.

However, what if they’re looking for a product and browse through multiple tabs? You have to capture their attention with something above the fold. Happy faces and motion are the top two things that catch our eye. Here’s how GoPro handled motion on their homepage.

Also, you can use humor for clickbait. Things that make us laugh or create intrigue attract our attention.

Funny photocollages, like this one made by Photo Creator user, can add humor and positive vibes to a webpage.

Visual Storytelling

Video is not the only way you can tell visual stories. Use images to tell a story. Whether it’s one image that serves as an example or a series of images that create a narrative, let it supplement the text.

The thing is, people are so used to visual storytelling that this makes it easier to receive information from your website. With everyone being in a rush, the faster you convey your message, the better.

Look how GoPro made use of animation to tell a story about their cameras in three simple images.

Save lengthy descriptions and technical specifications for those who want to read them. A homepage is a place for messages you can understand in one second.

Evoke Emotion

In the ideal world, people buy things based on weeks of research and weighing all the pros and cons of a purchase. In reality, our purchases are driven mainly by emotions.

This study proved that visual imagery with faces that express happiness stimulates the behavioral approach system. It is a system that regulates our drive to go towards something we desire.

What this means is that showing pictures in which people emote on your websites makes visitors more likely to do what you want them to do.

That’s not the only way to evoke emotion, however. Look how RockHer combines two things that are associated with positive emotion, wedding proposal, and Instagram likes. A bizarre couple, but it works.

Show What Looks Real

Would you ever believe a website that places a weird stock photo on their website? Do you ever see a picture of corporate employees with beaming smiles and ask yourself why?

It’s not just you. The VWO research says that common and hackneyed stock photos reduce conversions. They did an A/B test on one of their clients’ website to prove that. Conversions increased in the variant with a photo taken in the company’s office.

Their ultimate advice is to use genuine photos and forget about stock for good. This is not an option for many businesses. What you can do instead is customize stock photos so they end up looking more lively:

Directional Cues

If your website is not an entertainment hub, people will want to save time browsing. Directional cues improve UX on the website, as they help people navigate it.

It can be as simple as highlighting CTA with a visible color, surrounding it with white space, or placing it within a hierarchy. You can also go further and use imagery as a directional cue. Here’s a photo used as a direction cue on When I Work website.

You can try out different variants of their idea. For instance, your mascot can point at places that you want to highlight.

Bullet Point Imagery

Some photos only serve to break up paragraphs of text. You know that ornamental photos are only there to fill up white space. Bullet point imagery is there to provide a visual cue and separate a piece of text from another one.

Use icons or images as bullet points. If you are breaking up larger chunks of text, you can use photos to pair with paragraphs.

Here’s how Hello Monday uses photos to illustrate the text.

And this is how Pando breaks the text with pictures.

Navigation Photos

Photos can help your visitors save time on e-commerce websites. If you have ever seen a website that lists hundreds of categories, you know the problem.

Adding photos of a product to the category link makes it easier to navigate the website. Here’s how Google Store does it.

If a category includes lots of different products, add a photo of a generic one.

Product Photos

Good product photos are essential to any e-commerce website. If you grab users’ attention, explain why the brand is great with visual storytelling, but your products just don’t look good, you’ll get zero conversions. Invest in a good photographer and show your visitors how good your stuff looks. Keep it simple like Amazon, and you should be okay.

Allow clients to send reviews with their own pictures of the product or tag you in social media. Photos taken by users add credibility to your website.

Create Instead of Using a Cliché

This advice is relevant up to the point where you start blindly copying all the points. Take the essence of these tips, not the form. Create something unique that would both follow the established rules and make you stand out. Analyze how the changes in photo use change your conversion, and your success is a couple of iterations away.

About the author: this is the guest post by Leona Henryson, a UX designer and writer.

Title image: a photo collage made with Photo Creator

Check what is visual storytelling and how to deal with it, review the hot design trends for e-commerce websites and read how UX design increases users’ trust and loyalty.