Request A Demo
28 Ecommerce Site Search Best Practices

28 Ecommerce Site Search Best Practices


SHARE

Twitter Share Link Facebook Share Link Linkedin Share Link

In this post, we’ll look at how site search should work, with lots of tips to improve the experience for visitors. 

Site search functionality on your website is an effective yet overlooked area of website optimisation. A site search tool is usually present on the majority of sites but perhaps not as optimised and well-designed as it should be.

What Is On-Site Search?

Site search is a functionality that provides users with the ability to quickly search a website’s content and pages rapidly using a search tool. The user is then presented with relevant content to their search with a direct link to the page. A well-designed site search tool is specific to the website and therefore provides the user with easily accessible and relevant content related to their search. 

A site search function can aid other marketing practices like SEO and improves UX. For example, a site search guides the user as they explore the website content.

A search bar or site search tool is the most important part of some of the biggest websites in the world such as Google and Youtube. These searches allow users from across the globe to gain information quickly, and users expect the same experience on other sites too.  

Why Is Site Search Important?

The user-journey on the internet starts with a site search or query search from a search engine. It’s the lifeblood of the web. 

This is important to understand because not all websites can display their content easily. For example, some sites that have 1000s of product pages or 100s of blogs and guides find them buried deep within the site or behind pagination. A website without site search functionality is at an immediate disadvantage and will struggle to serve their users with the content they are trying to find. 

Site search users are sometimes said to have a greater propensity to convert, as some studies have shown. This rings true, as users entering a site and searching for a specific product are showing clear intent to purchase, or at the very least are less likely to be browsing.

It therefore makes sense for retailers to optimise for site search users, ensuring that they can find the products they’re looking for easily, and suggesting alternatives when they’re not available.

Marketeers who want to test the success of such a tool can run a heatmap using Hotjar or Crazy Egg. Heatmaps are recordings and visual representations of where users click, move, scroll and engage on your site. With this information you’re able to see how they really behave and also test the importance of a site search function.

Reduce Bounce Rate 

If the user is spending more time on your site and is browsing a range of pages this sends a positive signal to Google that the user found relevant content that matches their query. This also means your bounce rate percentage will be lower. However, without site search functionality your users can experience friction or a lack of user experience and opt to choose another site, therefore increasing your bounce rate. It’s important to keep users engaged on your site for longer because a study by KISSmetrics found up to 12% of users can leave if they can’t find what they are looking for or get an unsatisfactory search result.  

Improve User Experience

Frictionless user-experience and great content discoverability leads to positive website interactions. A site can have the best content, guides and products but if it cannot be discovered it’s no use to the user. Frustrating your users leads to a bad experience and can potentially cost your online sales in the future. For example, research shows that as many as 68% of shoppers would not return to a site that provided a poor search experience.

Boost Conversions 

According to a study by AddSearch, site search is 1.8x more effective at producing conversions and up to 30% of visitors use the site search box. Websites are always looking to serve up their promotional content or recommendations and this is where a site search can help. When a user shows intent by searching for a product it’s important the buying process is not disrupted. A seamless buying experience therefore will speed up the buying process for the user and promote conversions.

Types of Site Search Functionality 

Ecommerce 

Ecommerce sites can have thousands of product pages and infinite scroll, which can make it a long and hard process for users to find what they are looking for. This can be improved with category pages and a well-designed navigation but it can still cause friction. This is where a site search can help because during the busiest retail months online and peak shopping days it’s vital to give online shoppers a no-nonsense experience. 

Media 

Media sites are always churning out stories and breaking news as well as other snackable content. Many people are interested in past events or archived content and a site search function can help them find it. There’s a reason why Google is the biggest search engine in the world. 

 


Site Search Design

These tips will look at how search boxes are presented to visitors, and the features which help users to return useful results.


28 Site Search Best Practice Tips

Placement of Search Boxes

The size and prominence of the search box can act as an indication to users of how much a site wants people to use it.

If you make the search box more prominent, more people will see it and consider using it.

This may be a design choice for retailers, as reducing the size of the search box can save room for other navigational options or messaging.

For example, many mobile sites simply use the magnifying glass symbol to indicate the site search option and save valuable screen space.

On desktop, both Lush and Anthropologie opt for relatively subtle search boxes. This could be about design, or perhaps it’s a business decision and they’d prefer customers to browse using the standard navigational options.

For some sites, it’s all about the search box. For travel sites like booking.com, the journey starts with search, so this is the most prominent feature on the page.

Argos and Amazon have huge product ranges, and therefore emphasise the site search function as a way for customers to find what they want.


Adapt Search Box Size for Your Site

In the Amazon and Argos examples above, larger search boxes invite visitors to use them.

They may well have high site search usage, and the design and placement reflects this.

Also, a larger site search box can make it easier for visitors to enter longer product names – TVs with long model numbers for example.

This way, the text doesn’t vanish as people type (or paste) and they can edit queries more easily.


Adapt Site Search for Type of Site

Most sites allow for just one search term at a time, and this is fine for most sites. However, there are some cases where customers may want to search for multiple items.

For example, Waitrose has a multi-search feature which allows shoppers to search for several grocery items in one go.


Use Text in Box for Suggestions

Adding some microcopy to the search box can prompt people into using search, as well as providing suggestions for products to search for.

Indeed, it can be used as a form of merchandising, using search data to populate these fields, as ConversionXL explain.


Image Search

This is relatively advanced, and I’ve only seen it offered through retailer’s apps so far, but it offers an useful alternative to text only site search.

ASOS uses it in its app, and it allows users to upload photos from their phone to find matching or similar products.


Use Auto-Complete

Auto complete in site search suggests relevant products as users type, thereby speeding up the process.

It can also help to produce more accurate results, as it can help to reduce the chances of users entering typos or misspellings.

Here’s a good example from Expedia, which suggests destinations as you type. It avoids user errors when entering tricky spellings.


Show Images in Auto-Complete

Waterstones also uses auto-complete to help with tricky product names, suggesting author and book results as you type

It also adds images, which provides an excellent visual cue for shoppers.

oppers.


Use Auto-Complete for Merchandising

Auto-complete offers opportunities for merchandising, and retailers can use suggestions to push particular products, perhaps best sellers or higher margin purchases.


Allow Shoppers to Search Within a Specific Department

This may not be necessary on all sites, but for those with a relatively large inventory.

This enables shoppers to narrow the search and should to produce a more relevant and manageable set of search results.


Make the Text Disappear as Users Type

Retailers should also use JavaScript to ensure that the default text in the box disappears as users click to enter their own search term. As in this example from John Lewis.


Place a Site Search Box on Each Page

Having a site search option on every page makes it easy for customers to get back to a product search from any point in the site.

The only exception would be during checkout, as it would be a distraction from the payment process.


Site search results

There’s a lot that retailers can do to make site search results pages as easy to use as possible, making sure that visitors find what they want without too much effort.

A lot of this is down to presentation of results, and the tools that users have to find what they’re looking for.


Speed Matters

Slow sites annoy users, and search results pages that take time to appear increase the risk that shoppers will abandon.

This can be a problem for travel sites, as they search results from lots of data sources. If site search has to take a while, then progress indicators and loading results bit by bit can help to keep searchers interested.


Accuracy

If people see that search results are a bit iffy, they’ll lose trust in them.


Avoid Returning No Results

If site searches return no results at all, this is a dead end for shoppers.

This can be avoided through the use of auto-complete, and by anticipating common misspellings.

Even when searches are indecipherable, then at least present a few options – the chance to search again and some categories to browse for example.


Return Non-Product Results

While most people will be searching for products, some visitors will use site search to find other information, such as returns policies or customer service numbers.

Perhaps they’ve struggled to find it in other ways, or maybe they want to get there faster. Some sites anticipate these searches and send users straight to the returns page.


Show Reviews in Results

Displaying consumer reviews helps people to decide between different products on result pages.


Show Product Information

Showing a summary of key product features and information helps people to decide which results to look at from the results

Here, AO.com shows key product info like capacity, dimensions and key features so shoppers can quickly compare several products.

oducts.


Allow Easy Product Comparison

Here, Best Buy has an option for shoppers to add results to a comparison table to they can easily view features and specs side by side.


Let People Change the Way They View Results

Add options like viewing results in a list or grid, or how many results to show per page.


Sorting Options

Adding sorting options such as price, review score etc allows customers to view results according to their own priorities.


Add Appropriate Sorting Options

Here Ikea has a color option in its search results page.


Provide useful filtering options

The filter options, normally on the left of search results are vital for customers to narrow down product selection according to their own preferences.

The options will vary according to the site and product, but it’s important to provide enough options for customers to narrow large sets of results.

Another good feature is to show the number of product matching each filter so they can narrow their selection without returning zero results.


Anticipate Common Typos and Misspellings

Looking at site search data, you can identify common errors when customers use site search and anticipate them, serving relevant results.


Use Mouseover Effects in Search Results

Mouseover effects and animations can help to display products more effectively within site search results

These effects can be used to show different product images, as in this example from Sweaty Betty.

Betty.

Nike also uses this to show the different color options for its trainers.


Help People to Make Sense of Results

Here, Trainline highlights the cheapest fares of each type to help searchers make sense of results.


Use Quick View

Quick view allows shoppers to see a mini version of the product page along with an add to basket CTA to speed up the journey

Here’s an example from Swarovski, where the quick view page displays on mouseover.

seover.


Learn from Site Search Data

Data from customers’ searches can contain some great insights which you can learn from.

These insights can be used to improve site search performance, and to identify key trends in customer behavior.


Merchandising

Sites can choose to display certain products more prominently within search results. These may be best sellers, those with higher margins, or perhaps staff or expert picks.

Reviewed by Brad Ward
Written by Graham Charlton
— Updated on 21/07/2021

NEW CONTENT

2021 Fashion Ecommerce Stats & Trends Report

In-depth fashion industry insights, online product trends & buying habits

2021 Fashion Ecommerce Stats & Trends Report
OTHER CONTENT

The 2021 Ecommerce Stats & Trends Report

The latest data on ecommerce trends and online customer behaviour


Graham Charlton

Graham Charlton is Editor in Chief at SaleCycle. He's been covering ecommerce and digital marketing for more than a decade, having previously written reports and articles for Econsultancy. ClickZ, Search Engine Watch and more.