How difficult can it be? It’s only a text box and a button, after all.

It is, however, its very simplicity that makes the search box such a great example of the power of design patterns.

What can go wrong when we design a search box (what are the antipatterns)? What are the key elements of best practice in the design of a search box that enable us to avoid these pitfalls? And how many e-commerce search boxes comply with all aspects of the design pattern that we’ve just developed? For something so apparently simple, it comes as a bit of a surprise that the answer to that last question is none!

Building upon the analysis of search we’d done in previous Online Retail reports (2004, 2006), we analysed 10 e-commerce sites, 3 shopping comparison sites and 2 search engines. We examined their similarities and differences, in terms of design, information content and how they worked. We then explored the significance of these trends in terms of customer experience.

The results of our analysis revealed 6 different antipatterns – different types of things that could go ‘wrong’ as customers use search boxes. There is some caution needed in the use of the word ‘wrong’ here – I am using it as a shorthand for ‘less than ideal’ and it could be less than ideal either because it can cause some degree of frustration or annoyance for the customer or because it misses an opportunity to help or even pleasantly surprise the customer. So, to be clear, a search box that suffers from one of these antipatterns still works – it just falls short of best-practice.

So, what are these 6 antipatterns?

  1. Difficulty in finding the search box. One of the worst examples was Debenhams which doesn’t have a search box at all on its home page – the place certain types of customers are going to want it most. It is only when you click through to a department that the search box appears. More subtle effects are likely to have an impact on customers frustrated that they cannot find what they are looking for by link navigation and might fleetingly consider searching for it before they leave the site. If the search box doesn’t jump out at them at first glance, they will be gone.
  2. Inadequate text box size - search strings are getting longer. Between 2003 and 2005, use of single-word search strings has fallen by 46%, whereas use of 3-word search strings has increased by 13% and use of 5- 6- or 7-word search strings has increased by 41%. In order to accommodate the 90th percentile of search string lengths, the text box needs to hold 5 words or 30 characters. 6 out of the 10 e-commerce sites we analysed weren’t that big. Now, the consequences of this may be minor – the search string simply scrolls out of the left hand side of the text-box. So, don’t suspend trading and tear down your e-commerce site! But bear this data in mind and remember the ongoing trend in search strings getting longer next time you have an opportunity to change it. A longer text box isn’t any more expensive than a short one.
  3. No auto-suggest of effective keywords. Can failure to use a brand-new emerging technology constitute an antipattern? My answer is yes if it impairs the customer experience. And there is plenty of research evidence revealing the difficulties customer face in using a conventional search box. Articulating what they are looking for in a few words is difficult enough but customers then have to second guess whether or not these words are the sort of words that the e-commerce site are likely to have indexed for searching. It all boils down to a significant amount of ‘cognitive effort’ – something that people will go to considerable lengths to avoid if at all possible. So, under controlled experimental conditions it has been shown that search will be avoided, even when previous experience has shown it to be more effective than navigating using links. The solution, publicised mainly through Google Suggest, is to prompt people with popular or effective keywords as soon as they start typing in the text box. Even on Google this technology is currently in beta-testing, but it is drawing ever closer to e-commerce: the shopping comparison engine, for example, is using it. How soon will it be before your customers are disappointed that your e-commerce site doesn’t offer it?
  4. Failure to auto-focus on the search box when the page loads. Does the cursor automatically move to the search box (auto-focus) when the page loads or does the customer have to move the mouse over the text box and click before typing? This is undoubtedly a matter of fine detail but it is a detail that is rapidly becoming expected by customers, from their experience on the major search engines. All the major search engines auto-focus on the search text box upon page load, and their dominance in setting customers’ expectations of search cannot be underestimated by e-commerce sites – Internet users conduct 39 searches a month on average on the 3 major search engines. Only Google, Pricerunner and Yahoo! used auto-focus in the sites we analysed.
  5. Confusion over search ‘scope’. Everyone gets the basic idea of search – type something in the search box, hit the search button and you (hopefully) get matching results. There are, however, some subtleties that can cause problems for customers. Several of the larger sites enable customers to search a section of the site, as opposed to the whole site. Kelkoo takes this one step further and automatically restricts the scope of search once the customer navigates to a department within the site (e.g. books). Or at least it does so within most of its departments – 42 out of the 67 departments and sub-departments listed on its home page, to be precise. Unfortunately the customer is likely to be left bewildered and confused by this. Even more confusing is the fact that restriced search can be selected by the customer using a drop-down menu for 20 departments. So in 20 departments search can be selectively restricted by the customer, in a further 22 departments it can be selected by Kelkoo but not be the customer and in the remaining 25 departments search cannot be selectively restricted by any means at all! The solution is to ensure that the scope of search is clear and can either be chosen by the customer in all cases or none at all.
  6. Poor labelling of the search box. How the search box is identified as a search box is the one feature of search where e-commerce companies have most evidently gone and done their own thing – to the detriment of the poor old customer! In the 10 e-commerce sites analysed, there were an astonishing 16 different forms of labelling beside the text box, inside the text box and on the search button. Having ‘search’ as the input button label is the simple and obvious answer to all this confusion – it serves two purposes simultaneously. It indicates the action that occurs when the button is pressed and it indicates by association what the purpose of the text box is.

So, how difficult is it to get something as simple as a search box right? Well, not actually that difficult but there are still a lot of details to get wrong. The 6 elements of our search box design pattern will, however, at least clarify what can go wrong and give you guidance, and the reasoning behind that guidance, on how to avoid these traps.

See the search box design pattern.