The search bar at the top of your web page can have an outsized impact on your company’s success.
Likely you’ve read the stats before — that around 40% of your visitors will use site search when they land on an ecommerce site, convert nearly twice as much as non-searchers, and account for 13% more revenue. With ecommerce site conversions falling somewhere between 2-3%, search technologies can provide that extra competitive edge to push your conversions even higher.
We’ve analyzed scores of our own customer search accounts and scoured the web to find great examples of search UX that works. While there is no one-size-fits-all approach, there are general tenets for on-site search success.
In this blog, we’re going to share 15 online retail site search best practices and examples for increasing conversions.
What percentage of your revenue today is from site search? Before you optimize your site’s internal search, it’s good to start with a benchmark.
Google Analytics and other analytic platforms have reports to measure revenue generated by customers who performed site search queries vs those who didn’t.
The search reports in Google Analytics identify what visitors are looking for after they land on your website. The report is helpful for displaying what search terms visitors are searching for and measures of engagement for those searches. However, for now, what we’re most interested in is what percentage of your site’s revenue includes a site search. This is the number we’re looking to affect through search optimization.
Now that you have that benchmark it’s time to improve your users’ search experience.
Baymard Institute has published 145 (!) guidelines for ecommerce search and product filters. You can get an overview on their benchmarks page.
A slightly easier way to ease into the topic is with our list of 15 best practices below. These best practices have considerable overlap with Baymard’s list of UX features, such as search autocomplete, results layout, search functionality, product thumbnails, product filters, product pages, and more.
Both Make-up Forever and Bicycle Warehouse have search on their site and many categories and collections to guide visitors on their buying journey. But, the search bar visibility is significantly greater for Bicycle Warehouse.
What difference does visibility make? It can have a great impact on search and site performance.
When one company made their on-site search more visible…
Enlarging a search bar is a simple site update, but can have an outsized influence on site performance.
An invisible and often overlooked UI element to ecommerce search is how to handle typos and misspellings. Somewhere between 20-30% of search queries can contain a misspelling! You don’t want to lose customers because they’ve misspelled queries only to get a “no results” page in response.
There are a few different ways to manage search typos and misspellings. A good site search tool will give you options, including a way to add “did you mean?” results in search result pages and/or autocomplete with typo tolerance.
Using typo tolerance of some flavor is a best practice to avoid losing customers who think you don’t carry “bakcpacks” or “addidas.”
Shoppers are visual. In-store merchandising — whether it’s in an aisle or at the register — is an essential practice to encourage shoppers to add one more item to their carts.
Online retailers have it tougher. You need to balance getting shoppers to the thing they’re looking for first. Then you need to determine when and how to present other products, and which related products to display.
Here we can see that Chewy.com makes it easy to find related items — which could be some combination of best sellers, higher margins, or personalized results.
They also offer similar results after you add the item to your cart.
It’s smart to offer related items in both locations to capture merchandising opportunities wherever the visitor chooses to go, and can be designed to be unobtrusive to not interfere with the buying experience. There are also many solutions available to help optimize for related items including our own Algolia Recommend.
If a user types in “red basketball Nikes size 14” on your shoe store’s search bar, the search engine needs to parse this information to return high quality results. The use of natural language processing (NLP) for ecommerce websites can impact your brand perception, user experience, and conversion rates.
I ran a search for “red basketball Nike size 14” on FootLocker.com. At first glance, it appears their site isn’t parsing the query.
Then I restarted my visit from scratch. This time I didn’t use the search bar. Instead, I browsed their site by clicking on men’s basketball shoes and sorting by filter. There were actually a ton of results! I clicked into each of these results and some with size 14s were in stock. In other words, these products should have shown up on my first search.
If a visitor had only used search, they may have abandoned the site without realizing there are more products available.
In contrast, Zappos does a very good job with a similar search. I added “shoe” to the search phrase because Zappos sells other clothing items.
A complex search like “red basketball Nikes size 14” is becoming more common. Studies show that one-third of all searches contain 4+ or more keywords.
In the context of site search, natural language processing (NLP) analyzes queries to infer structure and meaning. Structure, in this case, is referring to information that is highly defined, for example, a category or a number. It can also represent relationships between things. Common examples include sizes, colors, places, names, times, entities, and intent, but there are many more.
Investing in a search solution that supports NLP is a best practice for ecommerce providers to help ensure visitors get relevant search results to find the right product quickly.
Moosejaw should win an award for their long list of filters and facets. It reminds me of a scene in the movie Airplane — the lists seem to go on forever. More is certainly better than few or none.
Let’s explain some terms briefly. When it comes to search, there are actually two kinds of filters:
More on the difference between facets and filters here.
If you have a large store with hundreds or thousands of items, it’s impractical to design facets and filters for each product category. The trick with filters is to generate them dynamically based on product metadata at index time.
For example, Algolia customers can simply wrap any HTML element in special filter tags to tell the app to store the element’s attributes. Those attributes can then be used to create filters and facets which are searchable in queries.
Another option for facets is to use query categorization, which can classify information to generate filters and facets automatically.
Faceted search is invaluable for helping customers narrow down results to find exactly what they’re looking for. The same facets and filters you create for site search can also work for your static or dynamic catalog or collections pages.
Personalization is about improving search relevance to boost conversions. As known users search your site, the search function should deliver personalized results — specific products that a user is more likely to purchase.
The use of personalization can tremendously improve user experience and conversion rates. BigCommerce found that personalization can lower bounce rates by as much as 20-30%. (Typical retail site bounce rates are around 30-55%).
In a McKinsey study, 100% of the top quartile retailers said personalization is a top 5 priority for them, but only 15% have implemented it across channels.
Amazon is famous for building personalization on their platform. As HBR reported:
“The company has effectively created a new model for what digital marketing should actually look like: a one-on-one relationship with the customer, informed by data collection, optimized with machine learning, and nurtured with other forms of AI.”
The HBR author went on to ask: “How does an offline player… hope to catch up?”
Amazon has more than a thousand engineers working on the problem! Whether you’re an offline or online player, the task seems daunting.
The good thing is that with Algolia, or other third-party personalization solutions, you do not need an army of search engineers anymore.
Whatever solution you pick, data is key. The more data you collect — while respecting data privacy laws — the better. Once collected, data is used with each query to change the results to be more relevant to the individual. This can be as simple as a clothing size preference, gender, location, or any other individual characteristic that can influence their results and behavior.
Typically the first stage of personalization is sending the information through with the queries to be recorded with other analytics. The performance impact can then be analyzed offline to determine if this is useful, or you could even A/B test results with and without personalization.
Often queries can be layered with personal information to augment and influence queries to produce highly personalized results.
In Q1 2019, smartphones accounted for 65% of retail site visits worldwide. Mobile-optimized search is challenging, however. Responsive design isn’t a simple matter of resizing a few objects — it’s taking into account the entire buyer’s journey.
Here’s a terrific example: Untuckit has done a good job of building a mobile-friendly site with an easy-to-find search button right at the top of the screen. They offer both a convenient drop-down menu of common filters and a button for additional filters. As I typed, the search bar displayed auto-suggested results.
Are your customers searching for a t-shirt or tee shirt? If your search box only recognizes one spelling, you’re going to miss opportunities. Using synonyms to create a dictionary of terms is a best practice for healthy site search.
Related terms should work alike, too. For example, blouse, top, shirt, or jersey will contain overlapping items, as will the terms striped shirt, striped top, or breton. In this case, “top” is a category that would include a blouse or breton, but it can also be used as a search term itself.
Today, searches like these are relying on good titles, product descriptions, and metadata. Soon ecommerce search engines will offer vector-based search which uses a mathematical approach to understanding words and their meanings to deliver more relevant results.
HannaAnderson.com offers a masterclass in instant search. Here’s what’s happening in the screenshot above:
For shoppers, instant search like this is a winner because it’s so visual. Like autosuggest (or autocomplete), instant search shows results as you type, but also includes thumbnails. Also displaying price is a great way to help shoppers find what they want fast.
By the way: The HannaAnderson search works brilliantly on mobile devices, too (I checked).
For some reason, most online stores either haven’t invested the time in instant search — they still require people to hit “enter” on their keyboards after typing a query — or only offer limited result displays. Our ecommerce site search product and many others now offer some flavor of instant search out-of-the-box so any company can build a rich experience in minutes.
It’s well known that Google improves web search results based on search activity. If you click a result, visit a site, and then immediately bounce back to the search results, Google understands that the result you had just clicked on was a poor match. Over time it adjusts and refines the algorithm to boost better results to the top of the page.
New site search engines have similar capabilities these days to connect searches to ecommerce conversion rates. They can distinguish a good result from a bad one based on clicks and conversions (shopping cart activity, purchases, checkout, trade-ins, or whatever you consider success) to deliver better results that improve your conversion rate.
For example, “Face masks” meant something completely different in 2019 versus 2023. Prior to COVID-19, a buyer who was searching for a face mask was probably looking for cosmetic skincare products. That all changed with the pandemic. A search platform with reinforcement learning would automatically begin to adjust results based on conversions.
As a best practice, you should be able to adjust the inputs, too. You may want to tweak search results towards higher margin items or layer personalization on top of the results.
Visual search, sometimes dubbed visual shopping, is becoming increasingly important for marketers when designing their on-site search and developing SEO (search engine optimization) tactics.
Over half the human brain is dedicated to vision and visual processing, and for most buyers images are more important than text.
Visual results should appear for both instant search results and on your results page. There are other use cases as well for visual search, including augmented reality (AR). Even Snapchat has gotten into the game with visual search optimized for AR.
In a classic website A/B test, you might split traffic to determine which variation — a blue or green call-to-action button — converts better. You can do the same with site search results by either testing the search result design or the search data itself.
Here’s just a few examples of things you could test:
It’s reasonable to assume that a significant number of your website visitors — as many as 1 in 5 — will be people with disabilities. This can be anything from visual impairments like color blindness to cognitive impairment such as dyslexia.
In one study, as many as 71% of people with disabilities bounced from a site they were shopping on due to poor experience.
For such disabilities, aspects of your website like color contrast, animations, and transitions need careful consideration, and appropriate alternatives should be made available. Site search, whether it’s your search results landing page or typo tolerance for misspelled words, is no different.
For the search bar, some considerations include:
Similarly, for the search results, some considerations include:
You can read more about suggestions on our longer post about Web Content Accessibility Guidelines (WCAG) and the Americans with Disabilities Act (ADA) digital standards and search.
Site search should provide a great user experience whether someone is looking for a product or an answer to a question such as your return policy. Whatever search solution you select should be capable of delivering results and, ideally, categorizing those results for easy scanning.
Your site search provider should offer built-in search analytics to help you understand trends, ineffective searches (like no results), and areas for improvement.
Search volume is a good indicator of overall traffic and tells you how many people use the search on your site. Click-through rate helps you understand how effective your search is and whether you have the right content.
The top searches and unexpected trends show your users’ intent. This is an important list to keep an eye on. If people’s interest changes, so will the list of top searches. It’s a great indicator that you might have to add additional content to your website or stock new products in your ecommerce shop.
Reports on things such as missing content, query terminology, and number of searches per session can help you uncover opportunities for improving site search.
We presented a ton of information above. It can seem daunting to try to do everything.
At the end of the day, you want to deliver the most relevant results and best user experience for every query, and that requires a combination of features and functionality.
The good news is that many modern ecommerce search platforms offer many, if not all, of the features mentioned above.
Jon Silvers
Director, Digital MarketingPowered by Algolia AI Recommendations