Designing Your Search Function For The Optimal UX

From Sean McGowan, Codal Inc

Of all the pieces, all the components, all the elements and features your e-commerce site has, none is more important than the search function. In fact, “important” is a bit of an understatement.

The commonality of nearly every website, the search function is our most reliable navigation tool for traversing the ocean of information that is the Internet. There is no feature more absolutely essential to your e-commerce site than the ability to search.

Yet despite its indispensable nature, the search function serves one, and only one, fundamental purpose: direct the customer to what they’re looking for. Whether that’s cars or makeup, sneakers or pizza—the search function’s only job is to direct users to your products.

It’s a simple enough thesis statement, but the best way to execute it has sparked a complex and in-depth discussion about how the search feature should be designed and implemented.

As with everything else in the UX domain, the answer is dependent on the specific users visiting your e-commerce site. But when it comes to the search functionality, the following is a reasonable set of guidelines when optimizing your search feature for the user experience.

The Search Bar

Let’s start designing at square one: the actual search bar. An often overlooked aspect of website construction, the search bar should be more than just a white box hastily slapped somewhere on the page.

The quickest path to conversion is a customer searching directly for what they’re looking for, finding it, and purchasing it. That can’t happen without the user actually searching, and the best way to encourage that is with a quality search bar.

First, the placement. The search bar should be located at the top of the page, on every page. It should be immediately recognizable and completely conspicuous. Never give the search function its own page or a link that the consumer must click on to access.

It should have the universal symbol for searching, the magnifying glass, included somewhere in the design. It should also feature a button that obviously initiates the search: a “Go” or even just “Search”.


Standard search bar design from Barnes & Noble


The default text in the search bar should be dependent on what you want your users to do. A default text that simply reads “Search” is open-ended, and encourages users to input whatever comes to their minds.

Sites that want to send the user on a particular journey can nudge the user in the right direction with a more specific command in the search bar: “Search for a movie” or “Enter the model of your car”.

The size of the search bar can vary, but as a general rule of thumb, its length should correlate to the amount of searchable content your e-commerce site has. The larger your selection of products, the longer your search bar. Take a look at the two examples below.


Amazon’s search bar


Amazon’s search bar is excellent. Clearly displayed at the top of each page, it’s unmissable—and its size reflects the vast selection of products Amazon offers.


Uniqlo’s search bar


Uniqlo, while still a considerably large fashion retailer, obviously doesn’t have a catalog as extensive as Amazon’s, and their shorter search bar reflects this.

Notice how while Amazon’s enormous bar is centered at the top of the page, Uniqlo’s is placed in the upper right-hand corner. Again, this is a suitable position when considering the size of the product selection—what’s important is that it’s located at the top of the page.

But it’s not just the size of the catalog that dictates the length of the search bar. Skilled UX companies understand that a major factor in all web design, not just search bars, is the journey you want your user to take.

Amazon wants you to search immediately. Uniqlo doesn’t dissuade that, but they also understand their navigation bar may be more pertinent to the user, or they may want to encourage a more browsing-based interaction from their users as well.

The Results

Now that you’ve designed a search bar optimized for UX, you need to make sure the results it provides maintain that usability.

This should begin before the user even hits the “Search” button. As a user inputs text into the bar, your site should autocomplete their query if possible. This not only saves the user time but also ensures that their search will return results.

While a “no results found” response is frustrating, it is an inevitability that your website needs to account for. The best results pages clearly indicate that a user’s search has returned no results, and offers a way out, or a next logical step for the user to take.


Zero results page from fashion retailer Marine Layer


Marine Later’s “no results” page, shown above, prominently displays the error to the user and offers the next step in the form of another search bar.

When a search does return results, they should, by default, be sorted by relevance. They should also include the number of results your search returned at the top of the page.

Your search results also need to accommodate for any spelling errors the user may make. Google revolutionized the search engine by implementing this pioneering technique in the earlier days of their site, with their famous “did you mean X?”” feature.

Nowadays, search functions don’t bother with prompting the user like that—they simply correct a misspelled query by interpreting what the user most likely means.


Youtube’s search results for a misspelled query


Find What You’re Looking For

We’ve only just scratched the surface of a search design, but the actionable advice given above is an excellent starting point for tailoring your search function for optimal UX. And while the search feature is an essential for your e-commerce store, it’s still just one piece of the puzzle.

E-tailers can turn to a Shopify app for high-quality search capabilities, but for a more comprehensive user experience, online stores are enlisting companies that provide UX design services.

The search function may be a commonality of nearly every website, but it’s the one that’s crafted with the user in mind that separates themselves from the others.

Leave a Reply

%d bloggers like this: