10 Ways to Design for Optimized Search in E-commerce

It’s not surprising that the most common way for shoppers to look for products is through search.

As UI/UX designers, we spend a lot of time designing navigation, menus, and categories to make sure they are easily accessible and create a smooth experience for the user. Only to find that users just use the search bar instead.

You’d think that most e-commerce sites would aim to provide the best experience for on-site search as a result, but according to the Baymard Institute, 42% of all sites give a below than acceptable search performance, UX-wise.

So, to avoid being one of those sites, here are the top 10 things you can do to make sure you provide an incredible search experience for your users.

1- Keep the search term in the search bar, even in the results page

When users search for something, make sure the search term is still visible in the search box even after results are displayed. Why? This enables users to go back and change the search term, so when they search for “dress” but find the results too broad, they can easily go back and just add “red” instead of rewriting “red dress”.

2- Style different data differently for readability

Try to use subtle style elements to help the user make sense of different search suggestions and autocomplete. Any alternative category or extra information (for example: Search within Grocery) or the number of matches available should be style differently so the customer can catch that’s it isn’t part of the of the actual search query suggestion.

3- Optimize Autocomplete Suggestions

When showing autocomplete suggestions, emphasize the predictive portion instead of showing everything. The user knows what they entered, the predictive part is what’s new - so bring their attention on finishing their search query in the suggestion.

4- Use labels for different types of suggestions (Desktop specific)

Although autocomplete suggestions are pretty common behavior, making account for your less web-savvy audience is probably best. Try including labels and instructions informing the user about how to interact with the autocomplete suggestions. For example, use headings like “Search Suggestions”, “Categories”, “Product Suggestions”, etc. to help orient users to the different suggestion types.

5- Use relevant category-scope suggestions

Using a search category scope, like “Strawberries in Desserts” vs. “Strawberries in Produce” isn’t really how a user thinks. Whether you’re looking for strawberry for a cheesecake or for your fruit salad, you’re probably just going to search for a strawberry. However, you can help them out with category-scope suggestions; they can be useful in narrowing down a more useful results list.

6- Allow users to narrow the scope manually.

If your store has a wide range of products, it could be useful to enable a “within a category” search by manually selecting a search scope. Some top tips include:

• Making sure the search scope selector design is secondary to the search field design
• Selector and search field are close together
• Don’t allow users to get too specific - which may result in a “no results” page and increase bounce rate
• Scope selection is presented using a drop down.

7- If they search for it, directly send users to the category page

Sometimes, or most of the time, users simply search for a product type rather than try to find it in the main navigation. Especially if there are a lot of menu items, allow users to to navigate to the category listing directly.

8- If there’s no 1:1 match, no problem

Sometimes, although the search query isn’t a 1:1 match, there’s still a pretty close match to an existing subcategory. You can still guide users to potentially relevant categories or subcategories by showing them links to likely relevant categories on the search results page.

9- It’s 2023, spellcheck your users!

Autocomplete gives you an opportunity to help your users with minor typos that would otherwise make them leave the site to go look for their queries elsewhere, for example, Google. Having obvious misspellings mapped to corrected suggestions can allow users to reach products without additional effort to revise their search.

10- “No Results” does not actually mean No Results.

No matter how hard you try, you can’t have a search result for every search query. Maybe the product doesn’t exist or the search query doesn’t make sense. Always make sure to offer alternative queries for the user or even an alternative path for further browsing.

No matter how your users search, try to make it the best shopping experience for them. Invest your time and research into implementing a search experience that makes your users reach their end goal and make them buy from your site.