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 withing 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 withe 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.

In conclusion, 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

Digital Transformation in the MENA Region

Tech . 29 Jan 2023

Digital Transformation in the MENA Region

The MENA region is undergoing a significant digital transformation that is changing the way businesses operate. Emerging technologies such as AI, blockchain, and IoT are driving this transformation, and companies that are willing to invest in digital strategies are reaping the benefits. However, there are cultural and organizational changes required to successfully implement digital strategies. In this article, we will examine the digital transformation journey of companies in the MENA region, with a focus on the role of emerging technologies, cultural and organizational changes required, and the lessons learned along the way.

Reverse Recruiting

Ecosystem . 13 Apr 2023

Reverse Recruiting

The traditional recruitment process involves businesses posting job vacancies and waiting for potential candidates to apply. However, the current job market is competitive, and top talent is often already employed. That's where reverse recruiting comes in, and it's changing the game in talent acquisition.

Modernizing Our Approach to Employee Reviews: How Robusta Studio Embraced Data for Positive Change

Tech . 21 Aug 2023

Modernizing Our Approach to Employee Reviews: How Robusta Studio Embraced Data for Positive Change

In the realm of tech, we at Robusta Studio always strive to overcome challenges with innovation. One significant challenge we tackled head-on was the outdated method of conducting performance reviews, peer reviews and evaluation as our old method contained a lot of limitations in tracking and data extraction. This internal predicament prompted us to rethink our strategy, leading to a transformative shift that improved our processes and serves as a guiding light for businesses facing similar challenges in customer experience.Not only does the tool that we developed internally overcome the challenges we faced, but it also will have a major impact on how we allocate teams to projects going forward.

All Insights