Categories are part of the product catalogue hierarchy and should describe the product. It should give an idea of what the product actually is. Unlike filters - which can be the same across categories - categories are mutually exclusive and will generally trigger a new page.
Product types (those without unique attributes) should be used as filters - not categories.You can link to pre-filtered lists from the top level menu (i.e making it seem like a category to the user), but do not actually make these attributes categories in your data structure. Doing so will severely deteriorate your search and recommendation engines.
General rule of thumb: if there are less than 30 items in the category, consider using it as a filter instead.
When creating subcategories, try to stay under 10 per category in order to not overwhelm the user. Aim to have at least 10 products in the deepest category level.
Have a dedicated “accessories” subcategory within the relevant high-level categories. It can be confusing to a user to have a general accessories category which holds all accessories. Instead, having accessories that match the theme of that parent category makes more sense.
If necessary, place subcategories in multiple main categories. There are two ways to do this: either place the subcategory in one place and link to that destination in each location or, more technically difficult, duplicate the categories in the website’s hierarchy.
The value and impact of the user search experience lies in the way that autocomplete suggestions can assist and guide users to better search queries. Poor autocomplete suggestions can often lead the user on a detour, destroy the experience or force the user to completely abandon their search. Here are a few tips on how to improve the search experience with better autocomplete.
Differentiate the widget: Add a subtle border or shadow to create page depth. This makes it easier for the user to focus on results.
Include search history or top searches: Consider indicating previous search history through a distinct style. This creates value for the user. If the user has never searched before a "Top Searches" can be used instead.
Scroll with arrows and select with ‘enter’: Allow users to navigate the list with the arrows keys and choose a suggestion with 'enter' key.
7. Never replace query suggestions with query results (i.e. products in autocomplete): Autocomplete results are specific product suggestions that lead directly to a product page. Autocomplete query suggestions lead to a normal search results page. Autocomplete results can compliment, but never replace autocomplete query suggestions. The best way to use query results as a compliment to query suggestions is to put it under a separate header within the autocomplete box.
8. Include scope: Scopes allow the user to narrow their search options while searching. Think of scopes as the aisles of a store.
Filters use certain product metadata as visible criteria visitors can use to refine their search results or category listings. Faceted filters take it one step further and allow users to narrow results by several different dimensions simultaneously.
1. Synchronise and group all elements which lead to the same path. This will help users understand where the interactive element will lead them.
2. Consider separating elements by their path and functionality so that related paths and features are grouped together. For example:
3. Use the thumbnail for the primary path only: the product page. ‘Quick Look’ button – if used – should not be placed in the middle of the list item thumbnail
4. Use ‘Quick Look’ button or hover to present secondary thumbnail images
1. Make the search box easily identifiable, with an open text field followed by a search button. Avoid using a link element which opens a search field.
2. Include helpful text in the search box, such as: "search for products, categories or brands". The text should disappear automatically when the user starts typing.
3. Keep the search box populated with the visitor's search query. That way the user can narrow their search without having to go back and remember what they previously searched
4. Allow the keyboard 'enter' key to start the search.
5. Adjust the size of the search box. If you have long product names a larger box makes things easier for visitors. At least 70 characters.
6. Put the search box on every page
7. Make sure navigational menus do not cover the search box.
8. Use autocomplete to suggest searchable keywords and phrases after only a few letters have been typed. Include the category scopes to help refine results.
9. Use manual search scope selectors for large and varied catalogues only. Always set default scope to “all”, make it visually secondary to search field and always us a drop-down menu.
10. Clear sorting and filter settings if the same query is re-submitted
11. Prevent bots, crawlers, spiders by adding a robots.txt that tells all bots to ignore the search results page. And make sure that the users IP address is correctly sent to the engine, so that it can match it against known bots.
4 tips for designing related results
In addition to direct results, Loop54 generates a list of related results. Since we understand the relationship between products, we're able to automatically generate a complementary list of relevant results. These results would never be found through text-matching search and are, therefore, a Loop54 exclusive feature. Learn more about Loop54's related results.
1. Display related results under the direct results
2. Choose a descriptive header for this list that helps guide the visitor. (example: “You might also like” or “Because you searched for X, we think you might like”)
3. Show (at least) 12-24 related results depending on the design of the search results page and image sizes.
4. Use a ”Show More” button, carousel slider arrows, or paginate the related results. Related results can be paginated separately from the direct results.
E-Commerce Usability: Homepage & Category, Baymard Institute
E-Commerce Usability: Search, Baymard Institute
E-Commerce Usability: Product Lists & Filtering
E-Commerce User Experience, Vol. 5: Search, Nielsen Norman Group
25 effective design patterns for ecommerce site search results, EConsultancy