The 7 Principles of Product Page UX for eCommerce

When it comes to building successful eCommerce sites, the design and user experience (UX) of product pages is a crucial factor in securing those all-important conversions.

Understanding how your audience wants to shop and catering to those needs, not only give users enjoyable shopping experiences, but it’s almost always guaranteed to positively impact your conversion rates.

Features of good user experience include cross-selling, up-selling, free shipping and many more. Here are the ways you can optimise your website for the right user experience for your customers:

Product Page UX

1. A Picture Says A Thousand Words

For many eCommerce sites, the importance of having an excellent image-game is obvious, but not always well-executed. However, it is a crucial part of creating a great product page UX. Clothing retailers like Topshop really are showing us how images can contribute to an excellent UX.

Take the first image in the sequence below. It features a high-resolution close-up of the garment. This allows the customer to gain real-life insight into the material, colour and ‘feel’, but from a virtual perspective.

Both the second and third images show the garment ‘in-action’, as part of an ensemble. This simply expresses how the garment can work as a whole. While these images are not many in number, they nonetheless make the garment come alive and speak for itself. They give the user a more authentic shopping experience and are indicative of providing the customer with an excellent user experience.

Depending on the item, three images may not quite be enough to offer a potential customer adequate insight. However, this approach from Patagonia has clearly been approached from a user experience web design perspective.

There are nine high-quality images here that work to tell a story from start to finish about the garment. This approach works well, as it’s a jacket with multiple features, that need to be visually conveyed to the customer.

You’d be hard pushed to find a customer not satisfied with the level of explorative imagery on their site.

However, if you’re looking to enhance product page UX through imagery, it’s worth incorporating ‘in scale’ product shots.

When users shop at physical stores, it’s much easier for them to judge the scale of the products they’re interested in. They can touch, feel and try-on. However, it’s a completely different ball-game when it comes to an online store.

Just featuring images that are ‘cut out’ and 2D makes it difficult for consumers as they struggle to get an accurate impression of a product’s overall size. However, images like the backpack below,  used in accordance with a model, help give the consumer a sense of its ‘real-life’ dimensions. Including at least one ‘in-scale’ image is crucial to creating a user-focused web design.

 

2. Don’t Disappoint With False Free Shipping Promises

There’s nothing more infuriating to a customer than reaching the checkout area to find hidden delivery costs added to the basket total. If a customer needs to reach a certain qualification status, then tell them!

It could be, and usually is, a monetary threshold, so by having banners that state the requirements (e.g ‘Spend Over £45 For Free Next Day Delivery’) means customers can’t be duped at check-out.

Take the homepage from The Fragrance Shop for example. The section below outlined in red showcases key information that stands-out to the consumer, detailing their options around free delivery. The threshold limit of £40 is clearly stated in their banner, so there are no nasty surprises at the checkout.

The ‘FREE DELIVERY on orders over £40‘ segment is a hyperlink to their full delivery options. Meaning that customers don’t have to trawl through their entire site to find crucial information. This site is transparent about its delivery details and these features are truly representative of a stress-free product page UX.

The sheer number of products and sellers that Amazon has on their platform means their delivery-game needs to be up to speed and it sure is. Here is a master class is giving the customer all the delivery details they need actually ON the product page. They don’t risk people navigating away to read about delivery and have utilised an excellent user experience web design.

 

Once added to the basket, an automatic reminder shows the customer how much they need to spend in order to qualify for free delivery. In this case, the total extra is £5.01. This helps the customer checkout as they are, under the threshold, or shows them the value they need to add to bring it to free delivery.

Either way, the customer isn’t going to be shocked about any delivery charges they might incur in the checkout area, they’re in control.

3. Make It All About The Rating Distribution Summary

This feature might be one of the most important elements out. Customers want to hear about how other fellow shoppers experienced a product before they buy that product for themselves. With 95% of users relying on customer reviews to learn more about products, it’s important to get it right.

Without a rating distribution summary, users are more likely to conclude that the reviews are fake if they see mostly positive reviews listed first in the section, or misinterpret how a product has been rated if they see mostly negative reviews. It’s important that:

• The rating distribution should be graphical illustration (e.g., a bar chart)
• The rating distribution summary must act as ‘star’ filters (users can click to view, e.g., only 5-star or only 1-star reviews)
• The rating distribution summary should be exposed or expanded by default
• Each rating filter should be mutually exclusive (i.e., users should not be allowed to select multiple star ratings at once)

With New Look, you can click on each line of the star-bar and see as well as click on all the different levels of review. It also allows you to easily process the information, you can see which stars the item mostly received. It also shows you in a numerical format. The overall star rating of 4.4 would not be enough to satisfy any shopper, it needs more scrutiny and transparency, which is offered here.

4. Offer Cross-Selling On One Page

IKEA, like 28% of benchmarked sites, fails to provide a cross-sell section for alternative products, only managing to offer supplementary products. This creates a real user experience problem for customers, who may like the style of this chair, but perhaps feel it’s not quite the right fit and want to browse similar chairs.

Without this option, customers must continue their product search using the category navigation or search and may choose to abandon the site altogether due to the laborious nature of the search path. 

If you look at Patagonia and this sweater fleece, it’s showing products that aren’t just associated with the product but offers different variations or alternative items from within the same product type. This is much more likely to increase the possibility of a sale.

Not having cross-selling alienates the customer who comes to your site looking for something specific. It’s unhelpful to offer a customer a range of waterproofs when they’ve come looking for a fleece.

The key is in the name, ‘Related Products’. If your customer is in the buying mood, make sure you make it easy for them to buy something from your site, even if it’s not the item they originally searched for.

5. Provide an Up-Sell Section of ‘Supplementary Products’

Supplementary is basically the same as up-selling. They’re items that are effectively surplus, but they do and can relate to a customer search. You can offer items that complement an outfit or items that can be used in accordance with another item. For example, a ”blow-up bed” will have a supplementary product of ”foot-pump”.

Marks and Spencer are achieving supplementary success on their product pages. Just to the right of this main dress image below, they have a ‘complete the set’ look which offers supplementary items (shoes, earrings and a clutch bag) that go with the original item search.

In addition to this, they also offer those all-important cross-selling feature (that we mentioned in the previous point), in the ‘you may also like’ feature. This allows customers to look for dresses that are similar to the one they’ve already searched for (blue/black/evening dresses) without having to move back to the main search. This helps to keep customers in the shopping loop.

6. Allow Users To Purchase ‘Out of Stock’ Products

You can do this by increasing the delivery time, but 68% of eCommerce sites don’t offer this. Telling users a product is out of stock and removing the “Add to Cart” button, brings the customer to a complete halt and prevents the user from purchasing the item. Don’t leave your customer in limbo!

There’s nothing worse than seeing the words ‘out of stock‘ or crossed markings through certain sizes or colours that aren’t available. Yet, allowing customers to purchase items that are out of stock helps to alleviate buyer frustration. While it might take longer than normal to arrive, it gives customers a sense of relaxation that they’ve managed to bag the items they want.

Another online retailer leading the way in product page UX is outdoor equipment brand REI. They allow their customers to order items that are currently out-of-stock. You can still add your favourite items to your basket even though they’re not yet available. It’s a little like the Amazon pre-order offer on tech products, but for clothing. Pretty cool.

7. Combine Site Authored & Community FAQ’s

Having a good FAQ page is essential, however, as a customer it’s easy to find yourself mistrusting of help-pages as they’re authored by the brand you’re buying from.

Mixing these up with a community-driven FAQ’s is the best way to ensure an unbiased perspective is relayed to your customers. 80% of sites don’t do this, but it’s the way forward when it comes to best practice user experience.

Having a normal FAQ and community FAQ creates a kind of hybrid-FAQ functionality that also helps to keep on-page product descriptions streamlined and appealing to all consumers. It means that essential information can be found but not in plain view on the product pages.

The community answered questions mean the Apple-authored FAQ page never falls short. It can answer ‘everyday’ run-of-the-mill questions, but more niche requests can be answered by the community without having to navigate away from the Apple page. They’ve provided the answers for their customers without having to do a lot of it themselves.

In Summary

To round-up, the 7 principles of product page (UX) user experience are:

1. A Picture Says A Thousand Words (Provide Great Product Imagery)
2. Don’t Disappoint With False Free Shipping Promises
3. Make It All About The Rating Distribution Summary
4. Offer Cross-Selling On One Page
5. Provide an Up-Sell Section of ‘Supplementary Products’
6. Allow Users To Purchase ‘Out of Stock’ Products
7. Combine Site Authored & Community FAQ’s

If you need more help with creating a better user experience for your eCommerce website, then get in touch and we’d love to talk.