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.

  • I disagree with “Make sure your ecommerce website have only one search box for users” I advocate for a search box down by the page footer as well, this way when users have reached the bottom and not discovered what they want, the search box is there for them.
    I would also add:
    – For the search result listings, including add-to-cart buttons is handy if it makes sense
    – For the search box, robust auto-fill modals with “best match” and “most popular” including images and (if it makes sense) add-to-cart buttons
    – Also for the search box, keep the search query input in the search box on the Results page so users don’t have to retype if they want to tweak the query a bit

    • Hi John,
      thanks for the feedback. You are right, your points of view are very good.

  • Agustina Parada

    “Make sure your ecommerce website have only one search box for users”
    May I know the exact reason why?
    I have a client who is insisting on adding two search boxes in their website header. For each search, users have to write a SKU number depending on what they are looking for.
    The first search will only return products for rental and the second search will return products that can be repaired by the company. Its a bit tricky..
    But either way, I can’t find an alternative to avoid adding two search boxes on the top.
    Any thoughts?

    • Why don’t you create only one search with the first part of the search able to let the users select the type of search with a dropdown menu? Like amazon does.

      Then allow the search to find SKU numbers too.


      • Agustina Parada

        Yes thanks for your quick answer; no doubt thats the best option, but it will take too many programming time (in Netsuite platform) and the client is not willing to pay…for now. I just need a good UX explanation to them, in order to convince them 🙂

        • The reason is that some sites offered multiple search boxes for different types of searches. Users don’t want to have to decide between search boxes, they simply want their searches to work. Don’t make users do extra work. Do the work on the backend so the single open search field can accommodate any type of search the site supports.

          • Agustina Parada

            No extra work! Thats the key to the matter! Thanks a lot!

          • You Welcome 🙂