10 Ways to Design for Optimized Search in E-commerce

9 Feb 2023


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.

Abdelwahab Mohamed

Abdelwahab Mohamed

UX Designer - Robusta Studio

Follow me on:

More Blog Posts

MENA Consumers Are Shopping Online. Here's How Your E-Commerce Store Can Get Their Business

E-commerce . 17 Apr 2024

MENA Consumers Are Shopping Online. Here's How Your E-Commerce Store Can Get Their Business

Explore the booming online shopping trends and strategies to elevate your e-commerce store with RTG's CEO Hussein Mohieldin. From operational excellence to strategic partnerships, learn how to thrive in the evolving digital economy.

The Challenges and Triumphs of Being a Product Manager

Tech . 10 Feb 2023

The Challenges and Triumphs of Being a Product Manager

The Struggle When you’re in product, there’s always a struggle of how to build a product (or feature) that is both scalable and valuable within the limitations that exists from the internal and external stakeholders. In this article, we’ll mainly be talking about the limitations provided by the most notorious stakeholder: the client. The client is the big guy, the one who pays and the one with the expectations. However, it’s important to point out that the client is not the end user. The age-old story is that the client wants something, a certain feature per say, that they think is super cool, but it may not matter at all to the end user.

Unlocking Egypt's Tech Ecosystem: The Untapped Potential for Global Companies

Ecosystem . 13 Apr 2023

Unlocking Egypt's Tech Ecosystem: The Untapped Potential for Global Companies

Egypt’s tech ecosystem has been rapidly growing and has already made a name for itself in the global tech scene. With an increasing number of tech startups, multinational companies, and world-class talent, Egypt is becoming a hub for innovation, creativity, and entrepreneurship.

All Insights