A Definitive Guide to Ecommerce Search UX

A Definitive Guide to Ecommerce Search UX

Search UX is vital to the product discovery experience on your eCommerce Store. Search is one of the very few ways in which shoppers interact with your store. Shoppers interact with your site in three ways:

They search, browse, or use onsite recommendations.

A Definitive Guide to Ecommerce Search UX

Of the above three paths, shoppers who use site search are highly intent-driven, meaning they know what they are looking for. They also have the highest potential for conversion.

“Lead them to what they seek.”

Many shoppers start their search for products on Google and then navigate to an eCommerce site. But this behavior is beginning to change. Shoppers are increasingly using eCommerce sites to search directly for products they intend to buy.

  • In fact, 55% of shoppers are found to start their product searches on Amazon,

  • Nearly 30% of online shoppers use the eCommerce site search box,

  • and more than 50% of those who use the site search end up placing an order.

While many eCommerce retailers have understood the significance of this and are actively seeking to enhance backend technology for their onsite search (as they rightly should!), most overlook the importance of front-end elements that encourage shoppers to use the site search.

An optimized search interface that offers a personalized and intuitive search experience will achieve high conversion rates and average order values, thus increasing your overall ROI.

In this part of the series, we will discuss the website search interaction points.

Optimizing the search UX for a great search experience

1. Search Box

Search UX makes it easy to find and easier to use

Shoppers, especially product-focused ones, look for a search box immediately on opening a website.

  • Your site search box should be a graphical stand-out. A prominent and clearly visible search box invites the user to locate it easily. Clarity of presentation of page elements is also part of Search UX

  • Place the cursor in the search box upon page load. During A/B testing, one large US retailer found that this simple technique significantly increased the frequency of shoppers using the site search.

Amazon’s search box is prominent and easy to find

  • Hide the helpful text on the search box when the customer starts typing. You would be surprised to know that many online retailers overlook this simple and widely practiced technique.
  • To improve search usability, provide the search box with adjustable length for long-tail queries.
  • For easy and immediate access, display the search box on every web page, not only the home page.


Next Search UX

This eCommerce fashion retail website displays the search box on every page, including their information pages.

Making the search bar prominent, accessible, and useful on every page encourages shoppers to quickly search for other products/information they have in mind.

2. Autocomplete and Autosuggest

Use prediction to make them engaging and interactive.

Autocomplete and Autosuggest are almost always used interchangeably. But there are subtle differences between them both. Autocomplete resolves a partial query, i.e., as shoppers start entering their query in the search box, autocomplete predicts the shopper query. On the other hand, Autosuggest tries to predict the shopper’s intent based on the partial keyword. It then shows multiple products or category options to help the shopper quickly narrow down to their real intent. Competent Autocomplete and Autosuggest features guide users to provide accurate search queries.

  • Limiting the number of suggestions to fit into the screen size and staying relevant could be challenging. Therefore, instead of a scrollbar to view all suggestions, provide an optimized expanded list.

  • Humans are visual creatures. Include images and visuals during autosuggestions. Studies suggest that this has been found to improve shopper interaction by 70%.

  • Have a clear demarcation for displaying top products & categories and individual product suggestions.

Implementing these features with a high level of accuracy will shorten the path to purchase for shoppers, as they can navigate right from the search box instead of going to the search results page and then navigating from there. We shall discuss more on this feature in the upcoming series.


3. Facets and Filters

Make them dynamic

Filters and facets (complex systems that logically group filters) are beneficial to narrow down search results. Using different attributes as facets, such as price, brand, category, product variations, user ratings, and other attributes, helps the shopper drill down quickly to their product choice.

  • If there are many attributes in a facet, hide them behind a “view all” or “see more” link to retain a clean design.

  • Enable dynamic faceting, i.e., relevant facets that apply to a specific category, to increase relevancy.

  • Instead of using static facets, which retain the same filters for different and even unrelated product categories, making them dynamic and specific shortens the purchase time of shoppers.

  • Another quick way to increase relevancy is removing filters for zero matches. This also ensures brand trust.

Search Facets and Filters

4. Search Results Pages

Make them aesthetic and relevant.

The displayed results page for a search query should be easily discernible and must offer efficient navigation to browse and locate products.  It is the most important part of the Search UX.

  • The results page should not only have a clean and intuitive UI but also should be relevant.

  • Add item specifications, range of available products, and special offers in a simplified and intuitive display to provide easy access.

  • Provide related product suggestions alongside promoting cross-selling.

  • Avoid zero results page at any cost. Redirect the shopper to a relevant category/subcategory or recommended products.

  • Provide a quick view of the product (display product images on an overlay or expand the frame to enlarge the picture) for shoppers to inspect closely instead of directing them to the product page.

  • Optimize the layout of the results pages appropriately to display different types of products. The layout used to display apparel will not work for displaying electronic devices.

The science behind the display of the results page is in itself heavily immersive. We shall delve deeper into this in the next series.

What next?

There are multiple problems to address when you solve for shopper intent. To turn shoppers into buyers, you have to know what they are searching for, why they are searching for it, and how they are searching for it. Understanding the how part of it will help you build an intuitive and memorable search experience for shoppers that will increase conversion rates, customer retention, and brand loyalty.

Your site search UX has to be portable across various displays and devices, which comes with varying complexities. We shall discuss such complexities and the science and art of some components in detail in the next series of articles:

  • Shortening path-to-purchase through visual autosuggest and dynamic faceting

  • Converting shoppers to buyers – understanding the science behind the display of different kinds of results pages

  • Catering to mobile shoppers – retaining the attention of this elusive shopper segment

More To Explore