UX Best Practice Guide for Product Detail Pages


StudioForty9 Ecommerce Best Practice Guide Part 1:

by Shane Taylor, UX Design Lead, StudioForty9

The product detail page is arguably the most important page to get right on an ecommerce site. It’s where a lot of users enter to your site after coming from search results, so it can be the very first impression of your business. With that in mind, it’s a great place to start as the first step in the process of improving your ecommerce site’s UX.

To help you do that, in part 1 of our StudioForty9 Ecommerce UX Best Practice Guide, we cover 10 ways to improve the user experience of the product detail page.

We hope you find it useful, and if you have any feedback or follow up questions for us, please don’t hesitate to contact us.


Quick Jump:

  1. Feature images – Bigger is better.
  2. Include an In-Scale image
  3. Show Incentives Near the Cart Button
  4. Consider social proof
  5. Thumbnails
  6. Ensure ‘Add to Cart’ is unique & prominent
  7. Product Price should be highly visible
  8. Include only essential info in the buy section
  9. Use buttons and swatches for variants
  10. Avoid drop down carts – use trays instead


1. When it comes to ‘featured images’, bigger is better in UX.

In tests carried out by the Baymard Institute, 31% of subjects used the feature image to make a quick judgement of whether a product would meet their needs or not.

Image Gallery section uses 50% of the screen width

Clearly, the featured product image is the most important element on a product page in terms of creating a good impression of the product. It makes sense to include a large beautiful image.

We recommend devoting up to 50% of the page width to the featured product image.

 

2. Include an In-Scale Product Image

By not including an image that shows the product to scale, we can disappoint our customers with a product that’s too small or too large for their needs. We can also save on the expense involved in offering returns.

Above shows an In-Scale product image which demonstrates exactly how big this grill is. This is a simple way to demonstrate size without relying only on dimensions within a spec sheet, which can sometimes be misunderstood.


3. Display Incentive Messaging Near the Add to Cart Button

Instead of relying on users seeing your incentives or USPS on a thin banner elsewhere on the site, place them near the add to cart button on the product page.

In the above example, we see how Louis Copeland has included a ‘Free Alterations’ incentive near the add to cart section.

This acts to set the users mind at ease about ordering the incorrect size, and is incentive for them to add to cart.

Free Shipping (if it applies to this specific product) is another good incentive to include near the add to cart button on the product detail page.


4. Consider Social Proof

Are you including reviews of your product on the product detail page? Users are now savvy to fake reviews, so a good approach is to consider video reviews.

On Sam Oven’s consulting.com, buyers are incentivised to leave a video review after they’ve purchased their training.

The result? More than 3,000 unique video reviews from customers. Enough to convince most people that they should buy too.


5. Things to Consider When Including Thumbnails

In testing by Baymard, 56% of subjects first action upon arriving at a product page was to explore the images. Therefore, it makes sense to invest time and expense in this section.

How many thumbnails is recommended?

The Baymard Institute recommend including 3-5 thumbnails by default for every product.

Default Thumbnail or Featured Product Image

Careful consideration should go into selecting the default thumbnail. It should be the most visually appealing photo as this is the photo that will be used to grab the users attention.


6. Make ‘Add to Cart’ Unique & Prominent

Using an accent colour to highlight the ‘Add to Cart’ button can be a very effective way of drawing attention to this important element.

What if my site is already using an accent colour elsewhere?

Consider using a colour that compliments the accent colour but also offers a clear contrast to it. For example, if blue is used as an accent colour through your site, yellow or orange could be used for an add to cart button, or primary buttons throughout the site like ‘checkout’ or ‘pay now’.

A/B Testing Primary Button Colours

It’s a good idea to consider A/B testing a few different colours and treatments of the add to cart button. It can be a very inexpensive way to increase conversions.


7. Product Price should be highly visible

Price is one of the first elements users search for within the ‘Buy Section’ of the product detail page. It’s a mistake to make it difficult to find.

It might be tempting to downplay the price of a product, thinking users will be more likely to buy it, but it’s a big mistake that can lead to users abandoning your site in favour of a competitor.

Price should always be grouped into the ‘Buy’ section at the top of the page, and always near the add to cart button.

Price should use a large font, similar in size or dominance to the product title.


8. Include only essential information in the Buy Section of the PDP

Including information ‘above the fold’ can be a priority in some design thinking, but it’s a mistake to include too much information.

Every element included is an element that distracts from the ‘Add to Cart’ button, so consider them carefully.

In the above example, we can see how carrollsirishgifts.com have included only the essential information in the buy section. This helps the ‘add to cart’ button and the large product image remain prominent without any distraction.

If you need to include product information, consider short bullet points or summaries.


9. Use buttons and swatches for variants

Buttons show the full range of your product visually. Dropdown’s, while taking up less room, act to hide your full product range.

In the above example, we can see instantly that this product is available in multiple colour variants.

Now consider what this page would look like with a dropdown option for colours. Users would be unaware of the full range of beautiful colour options.

See also how buttons are used to show yarn weight. This acts as visual confirmation that the user has selected the correct option.


10. Use a slide-in tray cart instead of a dropdown or modal window cart

Popups, modals and dropdowns are not mobile-first UX design thinking, and should be avoided in favour of app-style slide-in menus and trays.

In the above example, we can see how the cart slides in from the right of the product detail page when an Item has been added. This motivates the user to click on the ‘go to checkout’ button while also offering a simple way to dismiss the cart and continue shopping.

It has the added benefit of remaining functionally and visually identical on mobile screens.


What Next?

Obviously, there are many more ways to introduce a positive user experience to the product detail page, but we hope this list will get you started. If you’d like to find out more about UX Design relating to Ecommerce, or if you wish to speak to us about an Ecommerce project, give us a call on +353 (0) 21 239 2349 or get in touch with us via our contact page.

That concludes our part one of our UX Best Practice Guide. Part 2 will cover UX improvements to the Homepage.

Shane Taylor
Shane Taylor |