We're hiring! Check out open positions
Design

How To Design A Good Search Engine

Patryk Michalski
4 min read

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

2. Keep it recognisable

3. Auto-suggestions

4. No results page

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.

Adidas auto complete results

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.

Nike no results page

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!

Patryk Michalski
Patryk Michalski
Patryk is at the centre of the most impressive and eye-catching products coming out of Clean Commit. With a talented eye for “what looks good”, he’s a champion of creating modern and stylish applications and websites. Patryk is a source of good vibes and inspiration no matter the project.

Have an idea you want to discuss?

We’re based in Canberra, Australia and we LOVE working with locals… but we work with clients all around the world.

From the U.S. to the U.K. From Norway to New Zealand. Where there’s a problem to solve, we’ll be there!

More insights from us

Next.js vs Gatsby.js - Which Is The Best React Framework?
Development

Next.js vs Gatsby.js - Which Is The Best React Framework?

Next.js and Gatsby are two of the most popular static site generators used to build fast and SEO-friendly websites. They…
Tim Davidson
Tim Davidson
9 min read
The Pros and Cons of Headless Commerce - The Double Edged Sword
Development

The Pros and Cons of Headless Commerce - The Double Edged Sword

Our team recently jumped in to help a headless eCommerce project that was heading in the wrong direction. The team had…
Tim Davidson
Tim Davidson
11 min read
Next.js vs Nuxt.js - Is There A Clear Winner?
Development

Next.js vs Nuxt.js - Is There A Clear Winner?

Nuxt vs. Next: Which One Should You Use? When it comes to building scalable, interactive web applications, Nuxt and Next…
Tim Davidson
Tim Davidson
10 min read