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:
- How to Design Search Box;
- How to Design Search Results;
- How to Design Search Sorting Options;
- How to Design Navigation or Faceted Search;
- How to Design Advanced Search.
Let’s start with the guideline!
Design Search Box
- Don’t use a link to a search page, use an open text field;
- Add Search button;
- No filler text in the search field;
- The search box should be on every page;
- Depending from the type of ecommerce, search fields should be around 30 characters long;
- Make sure your ecommerce website have only one search box for users;
- Make sure navigational menus do not cover the search box.
Design Search Results
- No steps between the user’s search and the search results;
- How many results found? Show that number on top;
- The user’s search query should be replicated at the top of the page;
- Each product in result list must have: descriptive product name, small product image, and price;
- Promoted products should be designed in a proper way, not aggressive;
- View more results per page, or view all, is a must to have;
- If the product availability depends of inventory, then add information and keep the user informed;
- Don’t separate by type the products, list all results and let users filter them;
- Design a case when only one result is found;
- Design a case when no results are found, and add suggestions (clear messages, search again, remove filters, etc.).
Design Search Results Sorting Options
- List results in by relevance as standard;
- Always design helpful sorting options like: by price, by popularity, by XXX (relevant option);
- Sorting by price should have both to sort from high to low prices and vice versa.
Design Navigation or Faceted Search
- Always show both sorting and filtering options;
- Let users select more than one filter option;
- Always show users what filter option they’ve selected;
- Add a clear button for previous selections;
- Double check if all products are listed in the right categories (common issue);
- Design a clear solution to present filtering options;
- Display at the top of filters list the most commonly used by product;
- Display only the most common filters by default, and hide the rest behind a link (considering you have a long list of options);
- Add the number of products available, when possible, in each filter option;
- Don’t display filtering options if only one product is listed.
Design Advanced Options
- Always Consider to design advanced search form;
- Don’t design advanced options only with filters functionalities;
- Provide a clear link to advanced search (and back);
- Default searches to the most general category.
Free Extra Resources
Join my FB Exclusive Group to get access to extra resources, it’s FREE.