A Definitive Guide to Ecommerce Search UX

A Definitive Guide to Ecommerce Search UX


Part 1: The Essential Components of a Great Site Search Experience

“Lead them to what they seek.”

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.

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 site 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 top shopper—search interaction points for a great search experience

1. Search Box

Make 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 easily locate it.

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

A Definitive Guide to Ecommerce Search UX

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.

A Definitive Guide to Ecommerce 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 the both. Autocomplete resolves a partial query, i.e., as shoppers start entering their query in the search box, autocomplete predicts the shopper query. Autosuggest, on the other hand, tries to predict the intent of the shopper based on the partial keyword. It then shows multiple product 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 still staying relevant could be a challenge. 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.

A Definitive Guide to Ecommerce Search UX

An excellent example of visual autosuggest with popular categories and relevant variants

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 incredibly useful 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 to drill down quicker to their product choice.

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

  • Enable dynamic faceting, i.e., relevant facets that are applicable 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.

A Definitive Guide to Ecommerce Search UX

Zappos understands 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.

  • 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 provides for easy access.

  • Provide related product suggestions alongside to promote 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.

A Definitive Guide to Ecommerce Search UX

An example of clean and uncrowded results page display

The science behind the display of 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. In order 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, and this 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

Industry News

12-ways AI is revolutionising the entire eCommerce industry

12-ways AI is revolutionizing the entire eCommerce industry‘AI’?‘Personalization’?‘NLP’?Tired of hearing terms that you think make no significant difference? Well, they do. The way AI established its paws