We'd like to introduce you to Blueleaf's UXpert - a regular look at UX, that could improve your website for users and ultimately deliver increased conversion rates. We're kicking off with list page pagination.

What's the problem?

When it comes to list pages, you have a decision to make over how to show what could be hundreds of products to your users, in an easily digestible way. Salesforce Commerce Cloud recommend showing no more than 100 products on a list page for performance reasons, so what's the best way of allowing users to see more than this?

What's the solution?

There are three ways you could go with pagination on a list page:

  • Numbered pages – the 'traditional' way of handling pagination is effectively separate pages where the user can navigate backwards and forwards through each page with left/right arrows or numbered buttons, a solid and well-understood way of doing it for users
  • Infinite scroll – where more products appear automatically as the user scrolls down and reaches the end of the list page. This is not recommended due to performance issues and the fact that it can disorientate and confuse users
  • Load More button – when the user reaches the bottom of the list page they can click a Load More button to show the next 100 products, or whatever number you choose. This was the method recommended by Salesforce Commerce Cloud when they looked into their platform users' data

What could the benefit be?

The team at Salesforce Commerce Cloud reported click rates of 39% for the Load More button on mobile, compared to just 16% for numbered pages and 38% on desktop, compared to 24%.

I hope you found this useful – if you have any questions on this or anything else to do with UX, please do message me.

Sign up to our regular email Blueleaf UXpert to keep up to date!