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.

Free Extra Resources

Join our FB Exclusive Group to get access to extra resources, it’s FREE. 


Spread the love
Author avatar
Team CourseUX.com
Join CourseUX.com - The Best UX Design Course 100% Online with Mentor and Certification.