Designing a good search engine, or search feature makes life a lot easier for visitors. Putting yourself in your customer’s shoes, they’re often going to have an idea of what they want to find. Rather than searching through filters and categories, it’s a ton easier to add a search phrase and see the relevant results.
Google has the entire internet-using population trained to do this anyway, so it only makes sense that eCommerce stores (or regular websites) would put effort into getting this feature right.
A website’s search functionality is essentially like a conversation. The visitor can ask specific questions and get a relatively specific answer. The better fitting the answer, the greater the chance that the visitor will continue their mission, and ultimately make a purchase.
The problem is that we rarely think to build our navigation or primary interface around the search engine. The lack of early consideration can lead to squeezing a search bar into a cluttered interface in a way that makes it difficult to use.
As a design and development agency that builds a lot of headless and monolithic eCommerce sites, we're always on the lookout for good advice on upping our design game. Surprisingly, there's very little content available around best practices for designing search components or search engines. We wanted to bridge this gap with a short article describing a handful of things to think through when designing the search functionality of your website.
We’ll cover the following tips and tricks that we consider crucial to designing a user-friendly search engine:
1. Where to add the search feature
Where to put the search?
The search bar should be in a central, visible part of the page. This place is usually the header but hero sections work well too. The goal in deciding on placement is for the user to find the search bar immediately. They’ll probably be looking for it, so don’t make it hard for them to spot.
There are exceptions to this rule. For example, clothing eCommerce stores usually push users towards filters before searching. Most people won’t know the terminology that relates to particular items of clothing, because their often unique, so filters are an easier approach.
Keep it recognisable
Keep your search recognisable to users. Going overboard with too much creativity can make it difficult for users to find and use the search feature. The goal in designing your search component is for users to be able to know it as soon as they see it and understand how it works.
Jakob's law says that users prefer websites similar to those they visit and know. This is why most of the eCommerce goliaths like eBay, Amazon, Walmart, and Aliexpress have very similar, somewhat basic designs.
To achieve a familiar look on your site, start with a text field, add and a button with a magnifying glass icon and you’re done. Seriously, it’s that simple. Don’t make it hard.
Here’s a few examples of search components to reinforce this point:
Auto-suggestions
In-store searches are great if they’re returning relevant results. The experience becomes frustrating for users when they enter a keyword that doesn’t bring any results.
There isn’t a way to solve this problem completely. However, providing auto-suggestions while the user types is a really effective way of helping them figure out where their query is going wrong.
A lot of the time, users will know the general category that their product falls under so they’ll start typing that keyword and drill down to be more specific.
The Adidas website showcases an excellent auto-suggestion implementation. They use a clever combination of filters and product thumbnails to provide additional cues to help the user narrow their search query.
No results
The last big thing to think through when designing your website’s search engine is what happens if there are no relevant results. This happens pretty frequently and you don’t want to drive your users into a dead end.
The easiest option is to provide a handful of popular products for the user to check out. Although, if a user is hunting for something specific, this may not suffice and you’ll need to give them a new direction to continue hunting.
The other direction is to display the product filters and categories. This approach allows your users to keep digging in order to find what they’re looking for.
Summary
Just about every eCommerce site has an internal search engine and it’s used extensively by visitors. It goes without saying that nailing the design of this component is essential to creating an effective experience for users.
In our search across the web, we’ve found very little advice on how to design search engines or search components. The goal of this article was to provide a handful of tips that we’ve discovered during our time designing and developing Shopify, WooCommerce and BigCommerce websites.
The tips we’ve provided should hopefully set you in the right state of mind to design a search engine for your site that helps users rather than leaving them frustrated!
