‘I’m searching for…’ 7 tips for site Search UX design

Around a third of customers on an eCommerce site will use the Search box so it’s important we make it easy to find and easy to use. Try using some or all of the following Search box UX design tips:

1: Placement

The search box should be placed in prominent position on the page so customers can find it easily. The standard is in the top right of the page, above the navigation as part of the header. If customers are used to finding it here, why put it anywhere else?

Remember not to place it too close to other boxes such as newsletter subscription, as this can be confusing to the customer.

2: Visibility

By placing the search box in the header it will be visible across the entire site providing consistency to the customer. It also establishes a means to move around the site no matter what page they have arrived on. The only exception to this would be during registration or purchase, when the navigation should also be hidden, so the customer has no means to move away the task we want them to complete.

It doesn’t need to be the most visible item on the page but customers should be able to find it quickly after they arrive on a page. The use of colour to differentiate it is the most effective.

3: Labelling

Make it clear what the search box is doing by labelling it clearly. A ‘Search’ button leaves no confusion and a magnifying glass is becoming a common way to identify the search box.

Use text within the search box to explain the function to the customer ie, ‘Enter product name’. Ensure that as soon as the customer clicks on the field the explanation text disappears. It is very annoyingly for the customer if they have to delete the text before they begin.

4: ‘Enter’ means action

Ok you have a button so why can’t the customer just click it? It is much easier to hit enter than move the cursor so make sure the search can be activated via either method.

5: Size matters
The required size of the search box will depend on both customer search behaviour and the type of products sold on the site. This should be tested but generally the box should be large enough so if the customer is entering two or more words they can see the entire search text.

6: Narrow it down

If you have a large number of products provide the customer with an option to narrow down the scope of their search. It prevents returning results to the customer that are irrelevant to their search. 

This can be most effectively be provided by using a drop down list. However make sure there is an option that will still search the entire site and set this as the default.

7: Complete it

Using an auto complete tool to offer suggestions to the customers after than have entered a few characters can speed up the search process for customers significantly. It also helps to avoid spelling mistakes and ensures that a product will be returned from their search.

It’s not rocket science. But by implementing good UX design for searching, it can improve sales, increase conversion and site usage, and finally create a loyal customer base by providing an improved customer journey. It definitely can’t hurt.