When it comes to website design, the search box is often an afterthought. But it is a true conversion optimization tool as well as a significant driver of revenue, especially for ecommerce websites. In fact, according to a report by Forrester, 43% of site visitors go immediately to the search box and these searchers often referred to as ‘spearfishers’ (those users who come to a site searching for a specific product) are two times more likely to convert.  

And this is further proved by a eConsultancy study according to which users who use the search feature converted at 4.63% versus the websites’ average of 2.77% – that is 1.8 times more effective. According to another study by Bloomreach, 15% of visitors use site search on mobile devices or computers and these visitors account for 45 percent of e-commerce revenue!

When left unoptimized, the search box can negatively impact your conversions, too. Did you know that 68% of shoppers would not return to a site that provided a poor search experience?

So now that we have established why having a search box is integral to the success of a well-converting ecommerce website, the question is, what makes some search bars more appealing than others? If you haven’t given it a thought, you need to do that.  

{{cta-trial}}

Here are five proven tips e-commerce businesses can use to design the perfect search bar for their website to improve their shopper experience, along with some great examples of search bar design that you can take inspiration from.

Best Practices for Search Bar Design

It’s not enough to place a search bar on your website to allow shoppers to find the products they’re looking for. The best-performing examples contain great design and smart search features and are well-placed.

Let’s look at some of the key factors that take a search bar from good to great:

1. Make Your Search Bar Prominent
2. Incorporate Autocomplete
3. Allow Filtering on the Search Results Page  
4. Optimize Your Search Bar for Mobile
5. Test and Improve

#1 Make Your Search Bar Prominent  

The placement and length of the search bar play a crucial role in its discoverability. So, avoid placing your search box in a drop-down menu; instead, place it where shoppers expect to find it. Also, make your website search bar stand out from your site’s color scheme.

As a general rule, the search bar should be:

• Be large and easy to pick up – contrasting colors can work well.
• On every page.
• Sized based on its fellow header elements, especially if placed in the header.
• The text field should be long enough to display the user’s typed-out query.
• Placed as high up as possible – either the top-right or center of the website.  

As per a study by A. Dawn Shaikh and Keisi Lenz on 142 participants, the most convenient spot for most users would be located on the top right or top center of every page on your site.

In order to make its search box accessible, online jewelry retailer BlueNile has placed its search box in the upper right-hand corner of the page, and it stays fixed there even after the search query is entered. Autocomplete results are displayed as you enter a search term, but you can also click on ‘enter’ to get a full page of search results.  

‍

{{cta-trial}}

‍

A search bar comprises of two main UI elements: an input text field and a button. You can set the size of the text field by estimating the length of the average search query in characters. If your queries are long, you can set the search box to expand when clicked, like Madewell does.

Other than the input field, the length of your bar and its placement are other crucial design choices you need to make. It is imperative to A/B test all these UX design elements – from placement to search bar size – to understand user preference and optimize all elements accordingly. A DIY user testing platform that enables you to recruit sample users to test these UX elements and capture unbiased responses helps expediate the whole process.

‍

{{cta-trial}}

#2 Incorporate Autosuggest

Most shoppers approach the search bar with a basic idea of what they’re looking for. But they may not know the right terms or spelling. This is where autosuggest can assist shoppers with predicting search functions by helping them avoid errors in the search query formulation. What’s more, it can boost your sales by a whopping 24%.

Image Source

Here are a few things to keep in mind to truly optimize the experience for your audience with autosuggest:

• Make sure that your autosuggestions are relevant to the query and are helpful.
• Ensure that your autosuggestion only throws up a few suggestions.
• Highlight the information put in by the user by bolding the query.
• Show popular products with links to the relevant pages to reduce exit rates from these pages.

Home furnishing company PotterBarn have incorporated all of these elements in their autosuggest.  

#3 Allow Filtering on the Search Results Page  

A search page can be the deciding factor that prompts the shopper towards purchase or abandon it. The aim of a search result page is to help shoppers find the products they’re looking for quickly and adding the filtering feature helps with just that.  

Clothing retailer MatchesFashion lets its shoppers easily narrow down products based on type, brand, color, and price.

Also, the clothing retailer displays product brands, names, and prices on the search result page to inform and entice shoppers.

#4 Optimize Your Search Bar for Mobile  

With mobile shopping accounting for over 50% of online transactions, having a search box that is optimized for mobile is critical to your online store’s success.  

It’s essential to go beyond just having a functional search box for mobile users: you need to make it prominent and accessible by making changes that correspond with having a small screen space.  

You must remember that 43% of users on retail websites go directly to the search bar; if your search bar is optimized, it can help your conversions.

Follow these UI best practices while designing search bars for mobile:

• Ensure that your search box and button are sized decently to see and be selected, or you can hide your search bar behind a magnifying glass icon and only expose it on click.  
• Make sure that a small amount of inactive space surrounds your touch targets so that it becomes easy for users to type their query.
• Add autocomplete.

‍

{{cta-trial}}

#5 Test and Improve

Last but not least, increasing the conversion rate from the search bar is an ongoing process; it is all about testing and refining. So, make sure you A/B test any new element and track its impact on the total number of conversions.

Optimize Your E-commerce Search Bar to Boost Sales

Now that you know that search box can significantly impact your store’s revenue make sure you optimize it by following these best practices. And help users find what they’re looking for with minimal effort.

Key Takeaways

• Your search bar should be both visually appealing and functional in design.
• Offer relevant and helpful search experience as consumers who use site search are your best and most valuable customers.
• The search bar is a critical component of your website so highlight it to attract users’ attention and add filters to improve users’ experience.

• Don’t forget mobile.

‍

{{cta-button}}

Search Bar Design: The Big Picture [Infographic]

‍