miércoles, 14 de noviembre de 2012

Search box placement: examples and best practices

Posted 13 November 2012 09:49am by Graham Charlton with 1 comment

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. 

No hay comentarios:

Publicar un comentario