Presenting the Search Box: E-Commerce Design Patterns

Problem Summary

Example: www.kelkoo.co.uk
 

Solution:

1. Consistency & Visual Prominence Don't make customers hunt the search box! Design the text box, search button and surrounding space to give it visual prominence (see Kelkoo example above). Also, keep search in the same location on every page.  People expect to find search in the upper right area of the page more than they expect it anywhere else - but this is not critical.
2. Large text box 175px is typically wide enough for 30 characters, the length of the longest 10% of keyword search strings.
3. Auto-suggest effective keywords Prompt the customer with keywords likely to be effective for search (e.g. names of product categories or brands) as soon as they start typing in the search box (as Google Suggest ).
4. Auto-focus on the search box when the page loads This lets you start typing the keyword string immediately without having to remember to click the cursor on the search box first.
5. Clarity of search 'scope' The scope of the search must always be clear and unambiguous to customers: are they about to search the entire site or a section of the site? Where search scope is limited by default, customers should be able to remove this limit or alter the scope of the search. 
6. Having 'search' as the input button label This serves a double purpose: it describes the action that will occur when the input button is pressed and, by inference, it explains the purpose of the search text box without additional labelling.

Rationale:

1. Consistency & Visual Prominence The success of the major search engines means that everyone understands the purpose of search and how it works. The most pressing need, therefore, is to make sure that customers can find the search box. Beyond that, keep it simple and intuitive! To explore further the expectation that search should be in the upper right area of the page, see the research evidence from the Software Usability Research Lab and the argument against such evidence from Jared Spool of User Interface Engineering
2. Large text box As customers use increasingly complex multi-word keywords, so the size of the text-box needs to increase. Research data for 2005 suggests that 56% of all keyword searches (in the major search engines) used 3 or more keywords. In order to accommodate the longest 10% of keyword searches we need space for 5 keywords or 30 characters (the average word length in English is 5 letters +space).
3. Auto-suggest effective keywords It requires mental effort to fill in a search box - you need to clarify what it is you want and then you need to try to second-guess how this might be described on the site you are searching (e.g. How would they describe this toaster? Silver, brushed metal or stainless steel?). This extra effort is probably the reason why customers tend to use link navigation in preference to search. Prompting the customer with effective keywords, as soon as they start typing in the search box can provide a short cut around the 'mental-effort' problem and should increase customers' use of search considerably. There is a more detailed design pattern specifically on auto-suggesting text boxes at www.ajaxpatterns.org .
4. Auto-focus on the search box when the page loads Go to any of the major search engines and, as soon as the page loads, you can start typing your query and it will appear in the search box. Go to most e-commerce sites and do the same; nothing happens. You need to move your cursor over the search box and click on it before you start typing (or press Tab until it comes into focus). Google uses a simple Javascipt focus() funtion that amounts to less than 30 characters in total!  
5. Clarity of search 'scope' There are 2 issues concerning 'clarity of scope' of the search box. Firstly, for larger sites, it may be useful to let customers select the scope of their search (i.e. what is actually searched). In the Kelkoo example above, the home page offers a simple search box that will search the entire site. As soon as you navigate to a section of the site (e.g. books) the search is limited to that section by default. This is both logical and intuitive, although this default limitation can be changed using the drop-down menu. Secondly, it is important that customers are not misled into thinking that search may be limited in scope when, in fact it is not. The commonest design error here is having search as part of a left-hand navigation panel, suggesting that the scope of the search may be limited to the category highlighted in this navigation panel.
6. Having 'search' as the input button label There appear to be 3 main alternatives: 'Go', 'Find' or an 'arrow-graphic' - none of which serve the double purpose of describing the button's action and explaining the adjacent text-box, as 'search' does. Consequently, additional information would be required to make it clear to customers that this is actually the search box. As can be seen below, this information is either in the search box (which means that auto-focus on page load will not work) or before the text box.

Author: Mike Baxter | Last modified: 1st June 2006