A good e-commerce site search assists the customer in describing their search goal, defining their most important selection criteria, and, when necessary, propose alternatives.

The state of current e-commerce site search shows room for major improvements. According to a study from Baymard Institute, 70% of the tested e-commerce search engines were unable to return relevant results for product type synonyms, while 34% didn’t return useful results when users searched for a model number or misspelled just a single character.

Why good search experience is important

Searchers are the most determined customers who know what they want. Of those who come to a site searching for a specific product, 43% go immediately to the search box, and searchers are 2-3 times more likely to convert. Furthermore, shoppers engaging with search yield 25% of revenue.

As a result of our collaboration with the Baymard Institute, we want to share some UX tips on how to optimise your site search to create a high-performing search experience.

site-search-box

Autocomplete turns website visitors into customers

Autocomplete, or search as-you-type, is an essential function of e-commerce site search. The autocomplete plays an important role in guiding your visitors into becoming customers.

Product suggestions in the autocomplete are often connected to the highest revenue per purchase. Being able to present many and suitable products when the customer only has typed a few characters is a really powerful tool for increasing the average order value and overall revenue of your site.

An advanced search autocomplete offers further suggestions on categories, products, content and more.

In online retail, product suggestions generally convert at 10% higher revenue than the search result page, meaning they represent an area of your site which can really make a difference. Furthermore, product suggestions lead to a consistent 5% to 10% of the site’s revenue stream.

search-autocomplete-interface

In this example, it’s clearly stated that there are more products to find if you execute the full search on this phrase.

Believe it or not, research shows that without this small link ‘View all products’, test subjects will actually think these three products are the only ones the store has for this phrase.

Another quite important detail is that it highlights the difference of the suggested phrases, not the part that the user has already written. The reason for this is simple - they know what they have written, but not what differs from the rest of the phrases, making it easier to distinguish and choose.

 

 

Product photos should match the variation searched for

When product photos for an executed search don't match the specified search query, it's difficult for users to understand why certain products were returned. The logic behind the result displaying the best-selling variant of the product, with a variant in another colour, is a contradiction which may dissuade a user from purchase.

product-photos-interface

Searching for ‘red top’ returns the product variation that best matches the phrase.

The solution is to dynamically switch search result photos, so they match the product variation (e.g. colour) the user is searching for, like in the example above.

As you can see, some products have swatches telling the user that this product also exists in other colours, like blue for the first result. This applies to other attributes too, like shapes, patterns, materials etc.

product-photos-variant-interface

Hovering over the blue swatch displays the product in blue but does not permanently select it.

Faceted search based on query relevance

It is crucial for a really great converting site to make it easy for visitors to drill down a search result to suit their intent. Unfortunately, this is an area where many online retailers fail their audience. One of the biggest issues is that in many cases there aren’t even a lot of facets to choose from.

There are typically three common ways to present facets; alphabetically, in order based on number of matches, and a set logical sorting (as with sizes). All these three are good, depending on the facet itself.

However, there are some really important ones that shouldn’t be forgotten - sorting based on relevance of the specific query, and personalised sorting.

In most cases, it is much better to use the query relevance to sort both facet groups and facet values. As an example, when one of our furniture retail customers changed to a better and optimised filtered navigation in search, their overall search conversion went up an astonishing 25%!

Facet groups. Look at the examples below. In both cases the facet groups Price and Colour are the most relevant. But note that in the first image where we search for ‘sofa’, the relevance of the phrase and products displayed show that the behaviour of this site’s visitors indicates that Style and Number of seats are very relevant.

search-for-sofa

In the second image, where we search for ‘stuhl’ (chair), the facet Style is still relevant, but not as relevant as the facet Material. Number of seats is actually still available as a facet on the second one, but since it isn’t relevant to a chair it is way down in the list of facets.

search-for-chair

 

faceted-search-filters-ui

 

Facet values.To summarise facet groups and values; make sure you have support to sort them by relevance, or even better, relevance and/or personalised. Think carefully about which sort order you should apply for each facet and let your customers do some A/B-tests

When you have facets like price, size or where otherwise a logical order is natural, that should be applied. But for many other facets a relevance sort order makes most sense. Especially when you have so many facets that you need to hide some of them in order not to have a too-long page. 

 

Load more or infinite scroll for search results?

When it comes to navigating through a long list of search results on a page, there are three main ways to let your customers do this; pagination, ‘Load more’, and ‘Infinite scroll’.

The most commonly used practice today is pagination. However, our experience is that even though it’s easy for people to understand this model, it increases the risk of losing visitors at the end of the page since they need to click to the next page and hence reload it. Also, with pagination it’s much harder to find your way back to a previous product that was of interest to you.

Infinite scroll gained popularity quickly a couple of years back as the way to navigate. No dead-ends and you will keep your visitors on your site for ever! In theory this is correct, but it also comes with downsides. For instance, it’s nearly impossible for your visitors to find the footer of your page, which contains many important links your visitors may want to find.

After Infinite scroll came the idea of combining it with pagination into what's called the Load more approach. With Load more all displayed products are still on the same page, and it’s very easy and convenient to just press that button. This approach has shown to be the best for conversions and making the search page good to navigate. To make navigation even easier you can still add a page delimiter saying Page 2, Page 3 etc.

load-more-ui

However, there’s a bonus approach that we would like to share, and that is to mix the Load more with Infinite scroll. This approach uses the Load more without visitors having to press the button every time.

Let’s say you load 100 results. When the visitor reaches the end, the next 100 results load automatically without having to press the Load more button. Once they have reached the end of those results, they are in control of whether to view even more results by pressing the Load more button.

Let users fine-tune their search queries

This is a small but important tip - do not remove the entered search phrase from the search box once it’s executed! In so many cases, the users would like to fine-tune their search by adding or removing a word or two. If they need to rewrite the whole phrase, the intended purchase might be at risk.

search-for-phone

 

search-for-specific-phone

Changing the search phrase is more common than you might think. In order for this to be an easy and enjoyable experience, one should persist the user’s phrase once executed.

Enrich your search capabilities and avoid no-hits

Do you display a No result page without taking the opportunity to give the customer any relevant recommendations? Many sites do, even though this is a discouraging experience to the user, which may drive them to leave the shop and try their luck elsewhere.

So, what’s the remedy?

A simple misspelling can still lead to results if you use a Did you mean feature in your site search. When a product is not for sale (not carried by dealer or not in-stock), you can provide the customer with guidance and new recommendations.

did-you-mean-graphics

 

Top searches can inspire the customer to explore popular search queries, and recommendations can expose relevant products. Recommendations can be based directly on the customer behaviour and come, among others, from the previously viewed, bought or cart-abandoned products.

If the customer is new and there is not enough behaviour data to present any results, the Top Sellers can work as a backfill to present popular products to the customer.

Whichever the case, a rich search capability can always deliver relevant recommendations, potentially turning no-hits into conversions.

Lift your search-hit ratio

The search function should be centred around each visitor’s intent. If you keep an eye on customers’ search phrases and keywords, you’ll know what vocabulary to use since that’s how they speak about your products.

Take a look at your search-hit ratio, it’s a metric that heavily affects your search conversion but is often overlooked. This number tells you what proportion of search queries return content or products for your site visitors.

Keep your search-hit ratio as high as you can to make sure your visitors find what they’re looking for. When they can find it – they can buy it!

search hit ratio

To improve search-hit ratio, start with the No-Hits list. This is the list of the most usual search-phrases for your site that result in no products displayed. Work your way through this list, and for each phrase identify why the query does not produce results. For example:

  • Is the phrase a misspelling?
    Then add the misspelled version as a synonym for the product. If many people have misspelled in the same way, it’s worth doing something about it. Of course, a synonym here is not a synonym in the linguistic sense, but a work-around to fix the issue.

  • Is the search phrase a different name for a product?
    If so, just add a synonym.

  • Is the search phrase something that is not searchable in the product list, but present in your data?
    Then make those attributes searchable.

  • Are you missing searchable content/products?
    Well, you’d better add relevant items.

search-synonyms-interface

Having done this, you should be able to significantly improve your search-hit ratio and ultimately, faster guide your visitors to what they’re looking for.