Tips on site search box design

While many web shoppers may prefer to browse through a website using the navigational links, the importance of the search tool should not be overlooked.

If shoppers arrive at your site with a clear idea of what they want, then using the search box is the obvious option. This also indicates a clear intent to purchase, so the tool has the potential to convert well.

According to figures from Fast Search (pdf), 30% of shoppers will use the search box on an e-commerce site outright, while a further 30% of those that have failed to find what they want through the navigation will turn to site search.

So how can you make their lives a bit easier? Here are a few tips...

Size of the search box

The trend is for customers to enter longer search queries of two or more words, while those that are looking for the model number of a specific TV or laptop will also tend to enter longer strings. This means bigger search boxes may be needed.

The text box should ideally hold around 30 characters / 5 words. If customers type longer queries in, then the text will simply disappear from view. This is no disaster, but having a longer search box makes it easier for customers to edit their search terms in case of misspellings.

Kelkoo, for instance, has opted for a large search box with plenty of room for longer terms: 

Make it easy to find

The search box should be prominently placed on the page. Many websites have tended to stick it at the top right, but placing it in the centre will make it easier to find for shoppers.

Comet has just released a new version of its homepage, with a much more prominent (and larger) search box. This decision was made after the retailer found that the search box was an effective conversion tool.

Here's the old one, placed to the right of the page:

While in the new beta homepage, it is impossible to miss: 

Offer prompted search

When typing keywords into search boxes, customers have to describe the product in a few words, as well as guessing how the e-commerce site will have listed this item.

This is an excellent way of making site search easier for customers by suggesting terms as they are typing, as with Google Suggest. Users can find what they want with minimal effort.

Borders.co.uk has used this feature in its recent website revamp:

Allow customers to limit the scope of their search

If customers are searching through a website with a large number of products, users may prefer to narrow their focus to a particular section of the site.

Amazon is a good example of this; with its tool you can limit your search to one of 18 categories, making it more likely that results will be relevant:

Clearly label the search box

For most shoppers, it will be obvious what the search box is, but there is no reason to make people that are not as web-savvy work harder than necessary.

Waterstones labels its search tool in a nice and clear way, although it has chosen to place its box on the left hand side of the page: 

Place the cursor in the search box when the page loads

This is a small detail, but one that can make it easier for customers to start searching on your site. Google and the other major search engines all do this, speeding up the overall process for users.

Not all e-commerce sites do this though. Kelkoo and Amazon both ensure that the cursor is automatically in the search box when the page loads, while for sites including M&S and Next, the user has to move the mouse and click before typing.

Remove existing text from the search box

A lot of sites, such as the example below from Marks & Spencer, place text inside the search box to further explain its function. When you click on the box, the text automatically vanishes, leaving you free to type in your search term.

Failure to do the latter part can be a frustration for customers, as it means they have to delete the existing text before entering their own search term. Thankfully, not many sites do this, though Disney's UK store is one offender.

Related research:
Web Design Best Practice Guide

Related articles:
Ten site search tips
The symbiosis of brand trust and optimised on-site search