34 UX Guidelines for Search Box and Results Page

One of the most viewed article on my blog is focused on How to Design UX Search.

Today I want to write down a list of 34 UX guidelines for search in ecommerce websites.

During my research I’ve highlighted the main sections to whom Search systems should be categorised in Ecommerce Websites using a UX approach.

Those categories are five:

  1. How to Design Search Box;
  2. How to Design Search Results;
  3. How to Design Search Sorting Options;
  4. How to Design Navigation or Faceted Search;
  5. How to Design Advanced Search.

Let’s start with the guideline!

Design Search Box

  1. Don’t use a link to a search page, use an open text field;
  2. Add Search button;
  3. No filler text in the search field;
  4. The search box should be on every page;
  5. Depending from the type of ecommerce, search fields should be around 30 characters long;
  6. Make sure your ecommerce website have only one search box for users;
  7. Make sure navigational menus do not cover the search box.

Design Search Results

  1. No steps between the user’s search and the search results;
  2. How many results found? Show that number on top;
  3. The user’s search query should be replicated at the top of the page;
  4. Each product in result list must have: descriptive product name, small product image, and price;
  5. Promoted products should be designed in a proper way, not aggressive;
  6. View more results per page, or view all, is a must to have;
  7. If the product availability depends of inventory, then add information and keep the user informed;
  8. Don’t separate by type the products, list all results and let users filter them;
  9. Design a case when only one result is found;
  10. Design a case when no results are found, and add suggestions (clear messages, search again, remove filters, etc.).

Design Search Results Sorting Options

  1. List results in by relevance as standard;
  2. Always design helpful sorting options like: by price, by popularity, by XXX (relevant option);
  3. Sorting by price should have both to sort from high to low prices and vice versa.

Design Navigation or Faceted Search

  1. Always show both sorting and filtering options;
  2. Let users select more than one filter option;
  3. Always show users what filter option they’ve selected;
  4. Add a clear button for previous selections;
  5. Double check if all products are listed in the right categories (common issue);
  6. Design a clear solution to present filtering options;
  7. Display at the top of filters list the most commonly used by product;
  8. Display only the most common filters by default, and hide the rest behind a link (considering you have a long list of options);
  9. Add the number of products available, when possible, in each filter option;
  10. Don’t display filtering options if only one product is listed.

Design Advanced Options

  1. Always Consider to design advanced search form;
  2. Don’t design advanced options only with filters functionalities;
  3. Provide a clear link to advanced search (and back);
  4. Default searches to the most general category.

Does your ecommerce website need help? Do you want to increase your conversion rate? Book a FREE call with me to discuss about that.

Luca Longo

Luca Longo

8 years of experience in User Experience. Mobile Specialist. Expert in UX/UI, Customer Experience Solutions, Prototyping and Product Management.