Sorting, Paging & Filtering Search Results
Sorting and paging are search interactions that many e-commerce sites get wrong but are easy to fix.
Sorting is a way of seeing the same results from different perspectives. It can help shoppers find products or get a sense of what’s available to buy.
When you display results after a search, the default sort order should be by relevance. Many e-commerce sites make the mistake of sorting by popularity by default. Popularity can be one factor influencing relevance, but the most important factor is how well the product details match the words in the query. It’s also very important to offer a few alternate sort options.
One of the most useful sort orders for the customer is to sort by price (ascending and descending). Sorting by price can help price-sensitive shoppers find the cheapest options, but it is also used as a proxy to sort by quality, assuming higher-priced items have higher quality, or finding the best value. Sorting from least to most expensive is useful for up-selling products. Shoppers often ask, “what could I get for just a little more money?” Combined with search results that condition a buying decision, price sorting can be a subtle driver of more revenue.
Paging allows the shopper to view a page of results at a time. Searches can return many results and it’s not a good idea to overload the shopper with too many at once. Returning too many results can slow down the page load times, especially if the results include many images. It can also be confusing to scroll the browser window too far, losing sight of comparable products. If there is a lot of empty “white space” on the results page, consider whether you could show more products per page. I recommend search results pages show as many results as possible short of cluttering up the screen.
As mentioned, maintain a consistent look-and-feel on your search results page as on your catalog browsing pages. If you typically show 10 items per catalog page, show 10 items on your search results page. Customers appreciate the consistency.
Offer an option to change the number of results per page. Some shoppers will want to see many results all together while others prefer to focus on a few at a time.
Always repeat the search query and indicate how many results were returned from the search. This should be stated somewhere at the top of the search results. Indicating the number of results helps users decide whether to expand or narrow their search terms.
A good rule of thumb for page layout on search results pages is to use a list view for specification-heavy products such as electronics and a grid view for more visual products such as apparel. If your site carries a mix of both, offer a toggle for the shopper to switch between grid and list views.
Filtering is a large topic and there are many ways to implement effective filtering. A search results page becomes dramatically more useful when it has good filtering options.
Good metadata and dynamic faceting are prerequisites for gold standard filtering. But, you can make significant search performance improvements simply by ensuring that filtering is available, offers useful filtering choices, and prioritizes the most useful ways of filtering.
If you are using a full-featured search engine such as Solr or Elasticsearch, congratulations, you have many rich filtering tools at your disposal. However, this guide is about simple improvements you can do yourself and many e-commerce sites are using the default search built into their e-commerce platforms. For example, Magento uses a fairly primitive form of search based on MySQL. Compared to a search engine, MySQL just isn’t going to give a great search experience. Short of using a real search engine (which can dynamically categorize products) I recommend that all product attributes and categories be cleaned up and aligned to support filtering search results.
The most common problem I see is that the filtering options act more as navigation elements, filtering the entire catalog rather than just the search results. Properly implemented, filters apply to the search scope, not all the products in a category. The top e-commerce sites have set the expectation that search filters will filter the search results, not just the catalog. Shoppers who click back into the whole category quickly become confused by the products they see, not realizing their search has been effectively cancelled.
To fix this, the search results and the product categories need to match or shoppers will become confused. This is a data cleanup project. Revisit your inventory and ensure all products are in appropriate categories and include the options metadata your customers want to filter by.
The filter options you choose to display should be easy for customers to understand. If there are many options available to a product category, select a subset of the most common visible on the screen. Otherwise, you can easily overwhelm shoppers with too many options.
E-commerce shoppers have adopted many mental models about where to find things on a page. Going against the grain of those models only confuses people and makes it more difficult to find and purchase items.
If your platform supports it, show how many products you have for each category. This helps shoppers see how to narrow and zero-in on products they want. It also teaches them about the breadth and depth of your inventory. If your platform supports it, allow shoppers to filter by multiple product options at once, but make sure unselecting works just as well. Just as with search box persistence, it must be obvious when a filter is applied and when it is off. Otherwise, products will be filtered out and the customer will assume you don’t carry the product.
Finally, place the filter options in a consistent place on the page, all together. I recommend the left-hand column for filters on most e-commerce sites, but sometimes the top of the results page works well, too. E-commerce shoppers have adopted many mental models about where to find things on a page. Going against the grain of those models only confuses people and makes it more difficult to find and purchase items.
Common Issues & Implementation Tips
“There’s no easy way to clear filters. Filters and sort order persist across searches, confusing my shoppers.”
Clear filters and sorting when the same search is submitted twice. This is the shopper signaling they are trying to start over. Make sure the scope of the search is clearly stated. Common practice is to list the current filters at the top of the results page. In some cases, offering a “Clear All” or “Start Over” option is appropriate. Using a checkbox for filters is a good way to indicate whether a filter is on or off.
“The filter options aren’t very useful. Customers don’t use them.”
Make sure filters are displayed in a consistent area of the page and the filter options are relevant to the category. Only offer the most popular filter options for that product category. For example, in footware, “size” is a more important filter than “material”. If using a search engine, use dynamic filters (facets) with the number of results next to each filter. This helps shoppers drill down to promising categories.
Gold Standard Search Results Page Examples
The following sites are examples of search results pages that reveal important product details and/or provide very effective filtering.
Newegg displays the technical specifications of products in their search results page This allows users to easily find relevant products without pogosticking. This is especially useful for electronics items that include many important details, whereas apparel sites may choose to emphasis pictures and color or sizing options.
Wolfandbadger displays basic product information on the search results page but a mouseover reveals additional highly relevant details about product availability, which reduces pogosticking and subsequent user frustration.
Zappos includes excellent options to combine features such as weight, color and occasion. The rich filters are dynamically generated from the search results and indicate the number of available products with each filter.