Search Box Design And Placement in Ecommerce – Part 1

Search Box Design And Placement in Ecommerce – Part 1

An effective site search function on an ecommerce site has a number of potential benefits. Customers are accustomed to finding results quickly and (mainly) accurately from search engines, and will expect a similar experience on ecommerce sites.

Here are some tips and examples showing best practice in search box placement and design:

1. Offer a site search function

“What incredible insight” you’re thinking, but you’d be amazed that some big name ecommerce sites don’t actually offer this.

The following sites have no site search at all, which is bonkers.

H&M

 No site search box at all, but at least it has some decent filtering options which will allow customers to narrow down what they are looking for.

Search Box Design And Placement in Ecommerce - Part 1

Gap.eu

No site search box, and the top navigation bar is so subtle it’s easily missed. I wonder how people find anything.

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

2. Positioning of search boxes

Navigation, including site search boxes, should be visible across the entire site so that visitors can move around easily, whichever page they happen to arrive at.

Retailers should place the site search box in a prominent position on the page so visitors can find it easily.

Most ecommerce sites place the search box near the top of the page, above the main navigation bar, as in the example below from Best Buy.

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

As this is where visitors will expect to find the search box, it makes sense to place it somewhere at the top of the page.

According to Depesh Mandalia, Head of Conversion & Product at ticket.com:

“There is a standard for search boxes to be placed in the top right of websites. Creating familiarity here speeds up the shop and reduces customer thinking time. Keep it simple and easy to find.”

3. Make it easy to find

It needn’t be the most visible item on the page, but users should be able to find it quickly when they arrive at a page and scan around. Different positions should be tested to find which generates the most queries.

On these examples from John Lewis and Net-A-Porter, the search box blends in to the page, and is harder to spot as a result.

John Lewis:

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

Net-A-Porter:

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

4.  Position the search box away from other boxes

 Don’t confuse customers by placing it too near other boxes, such as newsletter sign-ups or postcode searches for stock info.

5.   Labelling of the search box

It should be obvious what the search box does, so label it clearly.

The use of colour to label Play.com’s site search makes it more likely to attract the visitor’s attention, and also doubles as a useful call to action.

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

However, using the word ‘search’ instead of ‘go’ may make the purpose even clearer.

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

Another option is to use the magnifying glass icon, which is becoming commonplace on ecommerce sites.

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

Search Box Design And Placement in Ecommerce – Part 2

Written by imkits