Website Design & Build

eCommerce PLP Best Practices

We’ve distilled our knowledge from years of working on large scale eCommerce websites, conducting user research and data analysis so we can share what best practice eCommerce UX design looks like with you. Part 3 in the series looks at Product List Pages.

Customers arriving on product list pages (PLPs) are keen to discover if you have the right product for them. And quickly.

For this task they will rely heavily on filters to narrow down potentially hundreds of different options to a more manageable selection.

The success of this moment in the customer journey therefore requires brands to provide filtering functionality that will do all the heavy lifting for their customers.

Thoughtfully implemented filters will: allow customers to see how many product matches each filter value contains, see an updated product list as filters are applied and allow them to free up screen space by minimising the filter options.

Equal to good filtering functionality, the product list layout itself needs to be a hard-working piece of design. It must be fast loading and organised in a way so customers can swiftly focus on potentially relevant products.This is achieved by providing accurate images that highlight product features, alongside descriptive product names that are inclusive of essential attributes.The incorporation of lifestyle images here further helps customers imagine how a product might fit into their lives – how they might wear or use a product.Weakness in any of these and the user experience suffers.

Check list – Does your PLP perform in this way?

• Reveal an alternative view of product on hover – ideally lifestyle imagery of the product in use

• Provide a filter summary view with both ‘clear’ items and ‘clear all’ options

• Offer user control over the size of the list images (small or large)

• Better utilise screen space with responsive upscaling of the product grid

• Consider adding urgency elements to product items such as low stock indicator

Further Reading