UX Best Practice Guide for Product Detail Pages
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.
- Feature images – Bigger is better.
- Include an In-Scale image
- Show Incentives Near the Cart Button
- Consider social proof
- Ensure ‘Add to Cart’ is unique & prominent
- Product Price should be highly visible
- Include only essential info in the buy section
- Use buttons and swatches for variants
- 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.
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.
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.
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.