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.