If search results lead to more than 50 or so results, its best NOT to load all products at once. This is mainly to do with potential performance issues.
While each have their drawbacks, most ecommerce sites rely on either Pagination Links, Load More Buttons and Endless Scrolling for loading additional products in search results.
Here are 6 tips you can follow to make sure you provide the best performing search experience for your customers.
These 6 tips are taken directly from our Search and Navigation UX Design Guide:
-
Show the total number of products in the list at the top
-
Use “Load More” button instead of "Endless Scrolling” and pagination links. Endless Scrolling encourages extensive scrolling by the user and often takes focus off of the best results. Pagination links are rarely used and if too many pages are displayed it can often discourage the user from browsing the list.
-
When using dynamic loading (i.e. endless scrolling), the default number of products is 50-100 items for categories (fetched in sets of 20), 25-75 for search and 15-30 for mobile. If using "load more” button or pagination, 20-30 items per page should be the limit.
-
Don’t give the option of choosing how many products can load, or of adjusting the number. Use dynamic loading and a contextually dependent number of products (e.g. dynamic number depending on relevance score of search results).
-
Pre-fetch a number of products during the loading time, usually 5-10
-
Avoid fatigue, halt the scrolling process at 100-150 products
DOWNLOAD THE GUIDE
The guide includes tips for designing category structure, facets and filters, autocomplete, product lists, hover and hit thumbnails, loading products, and search box