A Photographer’s take on UX: Turning a Page-View into a Purchase

Seeing a photo online is like meeting someone for the first time.

As human beings, we immediately start making judgements and decoding information when meeting someone for the first time. Most of our initial judgments are formed by examining physical features, such as how someone looks, dresses, and carries themselves. We then use these physical traits to form deeper assumptions of their character, like if they are trustworthy, educated, and reliable.

More importantly, we decide if we want to build a further connection and relationship by what a person can do for us or how they can benefit us. This is borderline selfish, but it’s a sociological perspective that has been studied for many years (social exchange theory).

Sounds a lot like user experience design.

Just as humans are quick to judge other people when meeting them for the first time, this also happens with the interactions on a website. Users will judge the initial information given and immediately decide if they want to engage more.

As a user experience agency designer and a photographer, I try to be consciously aware of a user’s first impression when they arrive at a site. I put effort into making sure that the site is easy to understand and showcases features that help users achieve their goals. Images and photography are powerful assets for any website or app. The right image can empower users to make the assumptions needed to help achieve a business’s goals.

Is the photo really the whole picture?

Take e-commerce for instance; images are very useful in selling a product, but it is important that the image really shows the whole picture. Product images are helpful in facilitating purchase decisions by answering users’ questions. The most important question of all: How can this product benefit me?

There is a stark difference between these two photos. The first image shows the product on a white background from a top level perspective.

In this case, the angle makes it difficult to identify what the product is and how it can be used. The image highlights the four different colors and the sleek design, however there are no hints on functionality or possible uses. After seeing this image, users will search for answers in a description text. An image like this can slow down the experience and makes users think too much.

In contrast, the second image is more effective at communicating a more complete story. It shows functionality, shape and texture. At a glance users can tell that the objects are small clips. Additionally, it also places the objects in a contextual setting that subtly hints a kitchen countertop, allowing viewers to imagine the uses and benefits of the product. Like the previous image, it shows the different colors and the beautiful design, but it also draws attention by adding compositional elements and stylistic details. This image is effective because it answers users’ questions and places the product in the users mind.

But wait, is the second picture really the whole picture? What you don’t know is that the second image is not showing something that makes this product significantly more usable and can potentially influence users to make a purchase. On the back of the product there is a small magnet, which users could stick to a magnetic surface (e.g. a refrigerator door). This can be easily shown by adding more images to highlight different angles, benefits, or features of the product.

Over the bridge to purchasing.

An image helps bridge the gap between a want and an actual purchase. If the image does a good job answering user questions and of transporting them into a realm where they can see themselves gaining benefits, the image is successful.

I would encourage you to keep in mind the following recommendations when using photography on a website or application:

1. Users instantly dissect an image and generate their own first impression, if the image doesn’t immediately communicate a helpful message, users might disengage with what you are trying to say.

2. If an image is confusing or does not answer users’ questions, they will feel frustrated and you probably won’t gain their trust or business.

3. Try to use imagery to help bridge the gap between browsing a page and the “add to cart” button. If users can fantasize about how good they will feel using a product, there’s a chance you will see conversions go “off the charts”.

Andres Bohorquez is a Senior User Experience (UX) Designer at DOOR3. We want to hear your thoughts and feelings on incorporating imagery in UX design. Let us know below.