Design

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:

Product page - Adidas example

Compare with this:

Product page - Zappos example

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:

Product page - Adidas heatmap

Product page - Zappos heatmap

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:

Product page - Decathlon example

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?

Product page - JCPenney example

Here’s what visitors see:

Product page - JCPenney heatmap

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:

Product page - heatmap without JCPenney 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:

Product page - Eldorado example, important elements

And the description and technical characteristics are under the fold:

Product page - Eldorado example, description and specifications

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:

Product Page - Eye Movement Study Results

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:

Product page - Neiman Marcus example

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

Product page - example by Neiman Marcus

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:

Product page - Neiman Marcus example, improved version

Here is the heatmap forecast:

Product page - Neiman Marcus heatmap enhanced

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:

Product page - example without considering key blocks

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!

This article was prepared based on materials from eyequant.com.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *