Pattern 14: Search box **
AKA: Search engine

Back to Diagram 1 - Getting started Back to Diagram 2 - Useability Back to Diagram 3 - Adding detail Back to Diagram 4 - Workflow/security

View sensitizing image - trireme.com
Sometimes a compromise is needed between the site logo and search box positioning

A user may not know how to navigate to the required content based on NAVIGATION BAR (25) or SITE MAP (12). Using it might be a slow, slow way to get there or the content may not be present – leading to waste of the user’s time.

There are two ways for a user to get to required content: following predefined connexions (SITE MAP) or by a content-based search. It is impossible to know in advance which will be the best way for a user to go directly to the content he needs.

Therefore

Always provide a search engine. Put the search box at the top of every page, preferably near and to the right of the SITE LOGO AT TOP LEFT (24). There should be a button labelled Go or Search, preferably to its immediate right. Balance the size of the text box according to the considerations given above. Carriage return should duplicate the effect of Go/Search. If possible make the search box part of the NAVIGATION BAR (25).

Invoke a general search engine from this box, but also provide CONTEXT DEPENDENT SEARCH CATEGORIES (63) where your content is capable of classification.

Contributors and sources
Paul Dyson, Dave Sissons, Veen (2001)


Discussion - forces - known uses

The paradigm for content-based or keyword search on the net is that of a user typing a string of words or phrases into a text box, followed by an Enter keystroke or a click on a search button. Because we want to let the user exploit transfer effects it is best to support both options.

Because we FOLLOW STANDARDS (36), the button should be labelled ‘Search’ or ‘Go’; we prefer the former, if space permits. Using an HTML search button is usually faster than using a graphic. Preformatting the text box with the word ‘search’ is another option: you don’t need a button at all then. However, it means that the user has to select and delete that word before typing his query – and that’s extra work.

Choosing the optimal size for the text box involves balancing the amount of space it occupies with the ease of entering and editing search strings. At a minimum do not limit the length of the string that can be entered to the size of the box; allow the user to scroll left and right to edit the string. You may be able to guess the length of a typical search string based on known use cases or on the length of phrases related to your own content. If so this provides a first guess as to the size of the box.

Putting it at the bottom of the page is almost always a bad idea. It may then appear below the fold and never be discovered. The best place is near to the SITE LOGO AT TOP LEFT (24) because this is where users have come to expect to find search facilities. Place the box and button to the right of the logo or immediately below it. If this is difficult stay close. On the TriReme site above the designer first wanted it on the right: it would nearly always remain visible because he used MAGIC MARGINS (60). However, nearly is not always and most users look first on the left. Because of the shape of the logo this looked quite ugly so, in the end, he wrapped the site logo around it so that it almost becomes part of the logo.
Provide help on the search string syntax. This is one of the rare cases where providing help is appropriate.

Browse the language What is Wu? Look at an example pattern sequence Structure of the patterns
Comment on Wu Contributors Return to TriReme home page Links to related sites