How to make a visually attractive product page

The task of the product page is to show what the buyer is interested in, tell in more detail and close the deal. This is a place where washing machines, dresses, shoes and books convince visitors that they are worth their money.

In this article, you will find out which product page will make you add it to your cart.

Use contrast

It is the difference between pixels or zones in terms of brightness or color. It literally brings users’ eyes wherever you want them.

Look at the image and tell me what you saw first:

Compare with this:

In both options, the product is in the center, on the right is the price and the CTA button. At first glance, everything is in order.

Now let’s see what customers will notice first. We use artificial intelligence – a special tool that makes forecasts for eye tracking and heat maps.

Areas that will attract more attention are highlighted in red:

Adidas did the best. The most important details are striking: product, name, cost and shipping and return information. Navigation is easy, the design guides itself to the desired points.

Zappos has less contrast, so details are less visible. Other elements – product and name – are more clearly visible. You should slightly shift the emphasis to the right, make the button with CTA brighter.

In the example of the Decathlon store, important elements involuntarily immediately attract the eye, although there is a lot of unnecessary on the page:

Remove distractions

Human attention is a fragile thing. In just a couple of seconds, users decide whether to watch / read more or scroll through. Many product pages are cluttered with unnecessary detail, and every little detail grabs attention.

JCPenney adds a banner with a promotional offer. So where to look? For a product or for an advertisement?

Here’s what visitors see:

First, the banner distracts from price and color choices. To complete the purchase, you will have to spend more energy than you would like. Secondly, it takes up too much space. Because of this, the main STA almost slid under the fold.

The picture is much better without a banner:

Buyers focus on product name, price, and call to action.

The product page in the Eldorado online store above the fold shows the most important:

And the description and technical characteristics are under the fold:

Make the most of key blocks

Not all zones on a page are of equal value. Eye tracking studies show that some parts of the screen are the first to catch the eye:

Why? Very simple. Most people read from left to right. They expect to see the most valuable information in these areas. However, this rule is often neglected.

Here is the product page in the Neiman Marcus online store:

The same principle of arrangement: on the left – the product, on the right – information about it. Try to guess what the heatmap will show:

Close attention is paid to the middle and upper left. The rest of the moments are out of focus. This means buyers will have to work hard to complete their purchase.

What can be changed? Add contrast to the size selection button to make it more visible. Also change the structure of the site and remove a large piece with a description of the product. And it is more efficient to use the part of the site where the eye first falls.

What it looks like:

Here is the heatmap forecast:

Users noticed many elements. The most important details are clearly visible. The navigation is intuitive, it is more convenient to use the page. This means customers are closer to conversion.

A less successful example of one online store is that it is difficult to notice the Buy button. But the gaze is focused on the upper left block, which is not related to the purchase:

You will have to try to add the product to your cart.

Conclusions:

• Use contrast to show benefits and draw attention to price and CTA. It’s a hackneyed rule, but most pages have a lot of distractions – users just don’t get to the next step.
• Location matters. Move the main elements to the middle and top left.
• Focus on the content your users want to see, not what you want to show.

High sales to you!