If we can assume that a searcher’s goal is to find the product that’s right for them, there are some essential principles required. The search experience should be designed to get them to the exact product they’re looking for with as little hassle as possible.
One study found that 73% of visitors will abandon a site within 2 minutes if they can’t find what they’re looking for.
The following guidelines are dedicated to the design of product lists and search results pages. They illustrate when to implement one design over another and how different visual formats can influence browsing behaviors.
The difference lies in the details when it comes to product list and search results page design. Small differences can produce big changes, however.
4 guidelines for ecommerce product list & search results page design:
- Carefully consider how many products per row to display.
- Product list page design (grid vs list) should match/correspond with product type.
- Consider the best page design for your specific product list.
- Show total number of products in list when product list is paginated.
Guideline #117. Carefully consider how many products per row to display.
This decision should depend on a few factors.
First, consider how large the product picture should be in order for users to see it clearly. If there are many fine details involved, the picture will need to be larger and less products will fit on a single row.
Next, how many product details are displayed? Once again, if there are tons of specs, there will be less room for multiple products per row.
Visually-driven products (e.g. apparel or jewelry) normally show 3-4 products per row. Spec-driven products can get away with displaying only one product per row due to the large description typically included with each item.
Consider offering users the capability to adjust how many products per row are shown. They can select a product image size button (small, medium, or large). Large images will show less products per row while the small image option allows room for more products per row.
I found the product results display page to be most frustrating. I found that the images on that page were pretty small and difficult to see detail in the product at times, and the text was small.
The pictures of all the items when browsing in a category are just too small to be as helpful as they should be.
How to do it RIGHT
At two products per row, H&M capitalizes on large product pictures with minimal product attributes
Displays 4 products per row
Shows one product per row, displaying ample product information. This is an appropriate approach for the spec-heavy product at hand.
Guideline #118. Product list page design (grid vs list) should match/correspond with product type.
The two primary approaches to product list display: Grid view and list view.
Use grid view when products are visually-driven. Products are visually driven when their appearance is a major factor that influences the purchase decision (e.g. people care about how a dress looks more than how much it weighs). Grid view allows product images to be the center of attention and facilitates efficient browsing behaviors.
Use list view for spec-driven products. These are items that are defined by their attributes (e.g. storage capacity, power, dimensions, etc). It’s likely that the specs outweigh the appearance for these types of products.
Not sure which style is best for your products? Offer users the option to switch between grid and list view.
It may also be useful to have an option to change the the view of the results, in terms of maybe a tile and list of you just to be able to more quickly scroll through the items.
How to do it RIGHT
Offers list and grid views, with the option to toggle between the different options.
Displays its rugs in grid view. Additionally, users can mousehover over each product picture for a zoomed out version of the entire rug.
Guideline #119. Consider the best page design for your specific product list.
How many products should be displayed on one product list page? While endless scrolling + load more tested best in a comprehensive UX study, there is no universal “best practice” for these options:
Endless pages keep users engaged because they don’t have to decide whether to click to see another page. However, endless scrolling can induce the paradox of choice: The inability to make a decision when too many choices are available (analysis paralysis). In some scenarios, offering fewer products has actually increased sales. Infinite scrolling is best for browse-oriented sites and products. If your site’s shopping flow is goal-oriented (e.g. building a ring step-by-step), endless scrolling is not a fitting choice.
Pagination keeps the user in the loop, they know when and where the page ends. It also gives users a “sense of completion” once they’ve finished reviewing a product list page. However, some users become frustrated with the time it takes to load each page. If you take this approach, offer the capability to choose the number of products per page displayed, including a “see all” option.
Endless scrolling + “load more” allows users to remain in control of the number of products in the list. This style also facilitates product comparison because all products remain on the same page. Instead of deciding which page to browse next, users simply decide whether or not they want to see more items.
[need to] show all products in one page (currently, you can only see 48 per page)
When I was trying to look at the products that I did a search on, the items did not stay on the page and they had to keep on re-loading as I tried to scroll up and down.
How to do it RIGHT
Displays a paginated product list and shows the number of products in the list at the top of the first page.
Displays the women’s t-shirts product list as endless scrolling. This style complements the browse nature of the products, especially when paired with a subcategory menu that can help users quickly narrow down their search.
Guideline #120. Show total number of products in list when product list is paginated.
Inform users of the total number of products in a list so they know what to expect as they begin browsing.