Search Box Design And Placement in Ecommerce – Part 2

Search Box Design And Placement in Ecommerce – Part 2

6.  Text in the site search box

The text within the box can be used to explain the function of site search to customers.

For example, the text in the Tesco search box tells customers that they can search for products by keyword, or by product code from a catalogue, or even enter a location to find details of their nearest store.

Search Box Design And Placement in Ecommerce - Part 2

7.   Make the text disappear when users begin to enter a search term

Retailers should also use JavaScript to ensure that the default text in the box disappears as users click to enter their own search term. Don’t force them to delete the text before they can begin, as this is incredibly annoying.

8.  Let people search using the enter key

This is much easier than having to move the cursor and click the ‘search’ button. It’s all about making things as easy as possible for customers.

9.  Size of site search box

This is an area that is worth testing, and the size required will depend on the type of products sold on the site and customer search behaviour.

If customers are entering search terms of two or more words then the box should be large enough so that users can see the whole term they are entering.

This means that users can correct any errors and misspellings if they need to, as they can see the search term in full.

Amazon uses a search box, which is large enough to deal with complex queries, such as the make, model and serial number of an electrical product.

Search Box Design And Placement in Ecommerce - Part 2-1

10. Place a site search box on each page of the site

Having a search box on each page makes it easy for customers to get back to a product search from any point, and also provides an alternative method of navigation for users that arrive at product pages.

However, placing a site search box within the checkout process can provide a distraction for customers when they should be concentrating on making a purchase, so this is one area that doesn’t need one.

11. Allow users to narrow searches before they begin

Tesco provides a drop-down menu so that customers can limit the scope of their search to one section of the site.

Search Box Design And Placement in Ecommerce - Part 2-2

Limiting the scope of searches avoids returning lots of results that are irrelevant for the user, as well as making it more likely that they will find what they are looking for.

Narrowing searches can be very useful for sites with a large number of SKUs.

12. Use auto-complete

Some retailers use an auto-complete tool which begins to offer suggestions when users have entered a few characters into the search box.

This has a number of advantages: it speeds up the search process for users, it helps them to avoid misspellings, and it also ensures that customers’ searches will return a product result.

According to Matthew Curry, E-commerce Manager at Lovehoney:

“In my experience, auto-suggest provides a real boost to search conversion rates. In a usability test I ran, we found that users actually relied upon site search autosuggest and auto-correct to know the correct spelling of words for them. Make sure that your site search solution is up to scratch, and that you still provide search results for common misspellings, just in case.”

In this example from Waterstones, shoppers who can’t remember the spelling of a famous Russian author’s name only need to get the first four or five letters right.

Search Box Design And Placement in Ecommerce - Part 2-3

The same principle applies for travel sites, where users may be unsure of the spellings of some results.

Well-implemented auto-complete for site search can save customers a lot of effort, and speed up the search process.

13. Link to advanced search options

Search Box Design And Placement in Ecommerce - Part 2-4

The LA Times links to advanced search options as soon as you begin to type in a query.

Since the newspaper has a lot of content, it makes sense to allow the user to search in more detail.

Search Box Design And Placement in Ecommerce - Part 2-5

Written by imkits