The product list acts as a catalog of the store's offer, it is the search result or the content of the category. There are many ways to get to a listing, but it's common to find people entering a product category in a search engine or people coming from the store's homepage. Listing is usually the second step in the path of users, so it is worth making sure that potential customers can move on smoothly, find their product of interest and make a purchase. Optimize the list of products in your store so that it does not miss the 10 key elements that are used in eCommerce.
Pagination
It should be visible at the top and bottom of the page so that users can move between the following pages of the list from any level. Instead of standard pagination, you can use the so-called infinite scroll, that is, loading more products without having to go between pages. However, remember to always inform the user how many products they have already viewed and how many will be loaded after taking action.
It is not recommended to load more products on the scroll (this is more characteristic of social media platforms), but it is better to use the button “Show more (50 products)” to make this action more aware for users.
Sorting
Visible at the top of the list, allowing you to choose one of the sorting methods. It is impossible to use several methods, so remember not to use checkboxes in this case. A dropdown with the ability to select an option will work better. Be sure to clearly indicate the sorting order: product names from A to Z, price from smallest to largest, etc.
Category Tree
Located on the left side of the list, you can navigate to the parent or child product category. Thanks to this, users know which category they are currently browsing, they can easily check if they have any subcategories and move on to the next, more tailored products to their expectations. This will make it easier for your users to navigate and explore the store.
Filter operation
Filters allow you to select multiple options within a single attribute. Filter names should be understandable to users, so avoid industry terms unless you are creating a specialized store whose users use names typical of their environment. The selection of filters should work automatically (quick reload of the page after selecting each option) or after the user clicks “Approve Filters”.
Number and range of filters
Make sure that the filters fit the product category. There should not be too many of them, nor should there be filters on the list that do not apply to a given product category. Filters should not be too detailed, but with them the user should narrow down the list to a few products with characteristics or parameters of interest to him.
Information about the filters used
Above the list of products you need to include information about active filters. With each option selected, give the option to remove individual filters as well as all selected options with a single button, e.g. “Remove filters”. Thanks to the fact that the ability to clear filters will be available in one place, users will not have to look for the selected options in different sections and will be able to perform the action much faster.
Information in the product box
The product on the list should include basic information such as the product name and price. Remember to match the content to your audience, depending on the industry, the content of the product box may vary when it is required to specify other parameters such as capacity, dimensions, model, etc. However, this information should not be too much so as not to overload the listing with content, but to indicate the most important characteristics of the product, which will allow you to easily distinguish it from the others.
Product picture
A photo of the product must not be missing in the product box. It is important that they are of good quality and allow easy recognition of the product. The best solution is to present a photo of the product itself and optionally after hovering over it you can display an alternative photo of the product, e.g. in a situation of use.
Additional product information
The product box should also contain information about the promotion or novelty, if the product also belongs to such categories in the store and needs to be highlighted. In this case, a label with the appropriate marking may be used. In addition, if a product has variants and is available, for example, in different colors or sizes, it is worth adding such information in the list of products so that the user knows what options he may have to choose in the case of a given product.
Add to Favorites or Clipboard
From the product list, the user can add the product to favorites or to the clipboard, optionally also for comparison. If, on the other hand, the product does not require a longer configuration or the need to check the product description, you can enter the add to cart button.
The above article was created on the basis of a set of guidelines and recommendations contained in the publication Best Practices for eCommerce developed by our designers. Experience and more than 400 completed projects allowed us to draw conclusions that really work in our customers' stores. But remember to test, research, analyze the data and draw the right conclusions — only then will you be able to propose the perfect solution tailored to your users.
