When site search UX is outdated or simply not done well in the first place, it can be a major point of frustration for a website visitor. Say a new website visitor searches for their desired item via your homepage search box, and they find that the results aren’t quite what they are looking for. Instead of continuing their search on your site, they’ll likely end up bouncing off the page only to seek help from Google or Amazon (sites that make their name by having down-right incredible search UX).

It’s no secret that a lost customer equals lost sales, but the connection some fail to make is that a search box with a great user experience can improve the ROI of your website. Infact, visitors who engage with your search box are 1.8% more likely to convert. That alone should have you racing to make sure your search box UX is fully optimized.

Now What?

So, how do you keep from losing visitors due to their site search UX? Is it possible to keep them looking around your site even if they come up a bit short on the results? We dare say: Yes! We’ve put together some site search UX best practices that will help you ensure that every visitor who uses your search box has an amazing experience that will keep them on the site.

Site Search UX Best Practices:

Search Box Design + Placement

Thanks to companies like Amazon and Google, website visitors expect the search bar on an ecommerce site to be central, obvious, and always easy to access. Ecommerce stores who mimic this type of site search create a sense of familiarity for their users which can make them feel more comfortable using the search bar and navigating the site in general. 

Color contrast is also an important factor of site search design. Walmart’s search box stands out using white space against a blue background and has a bold yellow button where users click to initiate their search. Additionally, the blue bar where the box is located never disappears no matter how far you scroll or what page you’re on, so visitors always have instant and consistent access to your site search.

Because searchers are more likely to convert, making your search box prominent, clear, and consistent will help your chances of increasing conversion rates.

A screenshot of Walmart's website shows an easy to find (and use) search box

Hint Text

Another search box UX best practice Walmart does well is using “hint text.” Within the search box, there is placeholder text that prompts users to “search everything at Walmart online and in store.” This not only gives site users a clear call to action, but it’s also informative, giving the helpful information that you can use the search to find items that are available either online or in the actual store. 

Hint text leaves no question to the user about the purpose of the text field, and it can help guide and direct users in their overall search.

A screenshot shows Walmart's contrast-colored search bar

Thorough Facets & Intuitive Filters

Humans have a “natural tendency to organize information with categories”, and this is why facets are so important to implement for your site search. Facets help users narrow down their search by congregating items in categories such as “women’s dresses” or “mens shoes.” ASOS uses facets thoroughly by first offering “womens” and “mens” categories, then further breaking them down into subcategories which guide each user closer to what they are looking for. This saves users time and creates search efficiency which increases site usability. 

A screenshot shows ASOS layering in facets and filters to make searching more intuitive

Filters used in conjunction with facets help to further specify user’s search results. They allow the user to select multiple criteria to filter by at once, and when these filters are intuitive and easy to use, it makes the user experience seamless. ASOS allows users to sort dresses by different categories and choose between things like size, color, season, etc., which makes it oh-so-easy to shop for that little black dress.

A screenshot shows how ASOS shows a range of facets and filters during a search

Results Stats 

To help ensure that users won’t come up empty handed with results, Craigslist uses results stats. These stats appear before the user hits “enter” so that they can see just how many results they will find if they do. This sets the user’s expectations so they don’t feel a sense of disappointment with the amount of results. It also allows users to change their search query if they don’t feel that the amount of results they will be given is sufficient. They may go from searching “black sweater” to “sweater” to ensure they have more options to choose from (or the other way around when someone may not want to feel overwhelmed by options). This aspect of CraigsList’s site search gives more control to the user and can help improve satisfaction with search results.

A screenshot shows how Craigslist displays the number of results in a drop-down bar

Predictive Query + Auto-Complete

Predictive query, when done well, can be extremely helpful for your site users and your business. It saves users time, helps them enter more searchable queries, and reduces typos. It can also be a tool used to promote certain products depending on your business needs. To take it a step further, auto-complete can help users save even more time and can improve site search efficiency. To ensure optimal search box UX, it’s important to constantly be monitoring the performance of your site’s predictive query and auto-compete and working to improve its functionality

Amazon has nailed their predictive query and gives numerous relevant options to choose from, even when users make minor typos in the search box.

A screenshot shows how Amazon provides type-ahead suggestions in a drop-down

The moment you click on Target’s search box, a drop down appears with trending searches. This functionality can help guide a visitor when they don’t know exactly what they are looking for, but further it acts as the kind of social proof called “wisdom of the crowd.” It causes visitors to think something like: “Oh look, a lot of people are buying shoes at Target, they probably have great shoes.” Visitors trust a brand more when they see many others trust the brand enough to buy from them. This tool also communicates that other people are using the search box specifically for their needs, which gives them a deeper sense of confidence in its functionality. 

A screenshot shows how Target provides trending searches before a user has even entered a query in the search box

Results are the linchpin of the search box user experience. Searchers want accurate, relevant, and comprehensive results that steer them closer to their goal. Many ecommerce sites simply link the search box to their catalog of products, but when a search is unified with the entire site, the results can reflect different aspects of the site that a user may find helpful. At that point, it’s no longer just products that are searchable but support topics or other relevant information to the query. Apple does a great job of this. They categorize search results and default to products, but have the option to click over to other tabs like ‘Support’ or ‘Accessories’. This gives users more comprehensive results and makes it easy to search the site holistically.

A screenshot shows how the Applestore unifies content from different repositories in one search engine result list

Alternative Suggestions for No-Results

If the worst has happened, and a visitor’s search has come up with that pesky “no results found” message, you still have the chance to save them. Though this is the point where many users will leave the site out of frustration, all is not lost. If you are able to provide alternative suggestions when there are no matching results, you increase the likelihood of keeping that user on the website. 

One way to do this is by using effective product recommendations or content recommendations that are similar to the search or that are most popular among customers. This switches the communication from a “no results, this is a dead end” message into a “no results, but look what we have here” message. Mejuri does this by adding an “oh, you might also like” section right underneath their  no-results text.

A screenshot shows how Mejuri provides alternate routes on a no-results page

Another alternative you could offer with the no-results message is providing commonly asked support questions or a “Contact Us” link to communicate that the company is willing and ready to help solve any user problems. In fact, when it comes to ecommerce, consumers are “most likely to trust a business that makes it easy to contact people at the company.” So providing the option to contact someone can help create a sense of trust that was almost lost when the visitor didn’t get the results desired. Best Buy uses this tactic and offers a link to visit customer service support or look for your tracking info if you already have something on order. This pushes visitors to another part of the website to keep them around until they convert or nurture the lead by providing great customer service.

A screenshot shows how Best Buy provides routes to 'purchase history' and 'customer service' as resolutions for a no-result page

All of these search box UX best practices ultimately serve to create more usability and an overall better experience for your website visitors. The search box, though it may not be the first thing that comes to mind when you think of UX, plays a huge role in creating an experience that is seamless and effective for online shoppers.

Dig Deeper

Want to see how Coveo can help improve your users’ site experience? Check out our Ultimate Guide to Site Search User Experience ebook, for real-world applications of self-learning, AI-powered search, personalization, and recommendations. 

Download your ebookThe Ultimate Guide to Site Search User Experience
Share this story:

About Tori Charlson

Tori Charlson is a San Diego-based freelance copywriter who specializes in blogs and website copy.

Read more from this author