{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

Site search is vital for online retailers, as use of the search box by visitors indicates that they have a product in mind when they visit the site, and shows a possible intent to purchase. 

So where should retailers place the site search box for maximum impact and usage? 

I've been looking at where online retailers are placing their site search functions, and how they can make them stand out on the page... 

Where should the search box be placed on the page? 

There is much to be said for following convention here. Most retailers will place the search box at the top of each page, which makes perfect sense, and fits in with Nielsen's F-shaped pattern for reading web content. 

I had a look to see where the top 50 UK retailers place their site search boxes. The results: 

  • Top left: 1
  • Top right:16
  • Top centre: 23
  • Elsewhere: 10

This post from SLI shows that US retailers take a slightly different approach, with more placing the search box on the left, and the majority going for right of centre. 

Of the 'elsewheres', all of these were travel/hotel sites, which tend to have a more detailed search box with options for choosing departure airports, dates etc. Search is essential for such sites, so they are placed more prominently on the page, as on Premier Inn's site: 

There seems to be a growing trend towards placing the search box in the centre at the top of the page, which is normally more prominent. This perhaps shows that retailers recognise the value of site search traffic. 

Customers that arrive at a site and use site search normally have a product in mind, which is a clear indicator of purchase intent. According to a Screen Pages study from 2008, use of the search box results in an average conversion ratio of 2.4%, against a site average of 1.7%. 

Of course, the use and value of the search box will vary between retailers. It may more important for department store and supermarket retailers with large product ranges.

For example, retailers like Amazon, Sears and House of Fraser have larger, more prominent search boxes than fashion retailers River Island and Topshop. 

I've looked a range of search box sizes, features and positioning, to see what works and why... 

Central search box

Appliances Online has a very prominent search box in the header. The use of colour for the 'go' button helps it to stand out. 

PC World has recently changed its search box position, and it's very prominent, while the purple border helps it to stand out from the rest of the header. 

Argos:

Right hand side 

The placement of these search boxes all follow convention, and though they may be relatively small, they are where users would expect to see them. 

Lovefilm

Topshop

B&Q

Since B&Q stocks a large range of technical products with potentially very long product titles (such as the Black & Decker Dual Height Portable Workbench & Vice), I would have expected a larger search box. 

As customers type in large queries, the text will disappear, making it harder for them to check or edit their search terms. 

Left hand side

This example from HMV is the only one of a left hand search box from the top 50 retailers, and it's really more left and central:

Large search boxes

Amazon goes for central placement and a nice big search box. Given the vastness of Amazon's product range, a prominent search box makes sense, as it's an important shortcut for visitors. 

In addition, the size of the search box allows users to accommodate long searches, those for technical products for instance. 

Sears takes a similar approach...

Too subtle...

Gap UK doesn't even have a site search box, and on the US site, it's so subtle that it's easily missed. 

Likewise, Apple's search box is easily overlooked: 

Tesco

There's a lot going on in Tesco's header, and the search box could easily be overlooked. 

Cineworld:

This is way too subtle, though it may be that Cineworld doesn't rely too much on site search. 

Search filters

Apart from being nice and prominent, Play.com's search box allows users to narrow their search by department.

This saves time for the user, and should produce more relevant search results. 

Boots

Best practices for search box placement

  • Follow convention. If the majority of retailers are placing site search boxes in the right or centrally in the header, this is where users will expect to see it. It makes no sense to make them hunt around for it. 
  • Let analytics be your guide. This will tell you how many people are using site search, and how well or otherwise this traffic is converting. There is much to be learned from site search data, but by testing more prominent search box positioning, you can see if it's possible to increase usage, and therefore conversions. 

    You may find that site search usage is low, but this may be due to the placement of the box, or because the search function is ineffective. 

  • Use colour and borders. Use of colour can help the box to stand out on the page, as in the example above from PC World. 
  • Let users filter from the start. Allowing users to limit their searches to specific sections of the site will produce more accurate results. 
  • Consider the text you use in the search box. If you accept product codes and catalogue numbers in the search box, say so as this will speed up their search. 
  • Give the search box some space. Don't confuse customers by placing it too near other boxes, such as newsletter sign-ups or postcode searches for stock info. 
Graham Charlton

Published 13 November, 2012 by Graham Charlton

Graham Charlton is the former Editor-in-Chief at Econsultancy. Follow him on Twitter or connect via Linkedin or Google+

2565 more posts from this author

Comments (4)

Avatar-blank-50x50

Rachael

I just wanted to thank you for taking the time to research and illustrate this article as well as you have. It's really useful to companies such as ours, which handles web design for both B2B and B2C companies.

I have to say, search boxes in the top right work for me, what can I say, I must be a slave to convention. *sigh*

about 4 years ago

Avatar-blank-50x50

Tony Edey, .

The best search I've ever seen was within Omniture SiteCatalyst (not exactly your average web site I know). Top right placement, but it had a good autocomplete suggestions (like Google) and showed you live results as you typed, broken down into 3 or 4 categories which all updated as you typed. Superb. Sadly gone since Adobe took over :(

In terms of the actual functionality, I find having to manually select a filter far less user friendly than having autocomplete suggestions (Amazon does that well) as I type. I prefer to filter once I have the results if I need to, not before. Clearly therefore this is how everyone else should do it too :D

about 4 years ago

Avatar-blank-50x50

Richard owen

Great little article. Would be interesting to know what is the conversion rate between a standard search and a auto complete search.

Tony myself I prefer filters to auto complete to narrow my search.

about 4 years ago

Avatar-blank-50x50

Carolyn Thompsin

This is insightful. I want my site to be as useful to visitors as possible.

almost 4 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.