Search Box


The users need to find an item or specific information.


Offer a search


Use when

Any web site that already has primary navigation. User may want to search for an item in a category. User might want to further specify a query


* The search interface
Offer search functionality consisting of a search label, a keyword field, a filter if applicable and a "go" button. Pressing the return key has the same function as selecting the "go" button. Also provide Search Tips and examples in a separate page. A link to that page is placed next to the search functionality. The edit box for the search term is large enough to accommodate 3 typical user queries (typically around 20 characters). If the number of filters is more than 2, use a combobox for filter-selection, otherwise a radiobutton.

Search -- editbox -- for/in -- filter -- Go button
or just...

-- editbox -- Go button

* Presenting search results
The search results are presented on a new page with clear label containing at least "Searchresults" or similar. The search function is repeated in the top-part of the page with the entered keywords, so that the users know what the keywords were.

The number of "hits" is reported and the list of search results is organized; sorted or rated with the best matches at the top. When there are more than 10 results use a Paging mechanism. Each search result shows a link to the item itself and a snippet of text to explain the item. Preferably that would a summary or abstract but can also be the first lines of text of the resulting item. The structure of a "result" typically shows:
1. Page Title
2. Description
3. Categorization
4. URL, Size, Date

* Keyword matching
If more than one search term is used the search engine must handle them as follows: if no special separators are used (not including the space), the search is interpreted as an OR function, the results that match both terms are listed first. If special separators are used the search engine must be able to handle more than one convention. For example, sometimes the "AND/OR" separators are used but using a "+" or a "-", include and exclude, must also be handled correctly. The engine must also be able to handle spelling mistakes of at least one character.


By using this setup the whole search becomes a sentence that reads like the search query.

More Examples

In this example from tucows, the designers actually were able to make the search read like a sentence. Users can "download software package X for Win2000"....

plml logo


2 comments have been added to this pattern

search, 25th May 2009
seems right,but free search box by returns ads.
matt kocaj, 21st February 2011
I would like to violently disagree with the "the search is interpreted as an OR function" statement.

Google whether we like it or not sets the convention for search; and at Google, space-separated terms are interpreted by default as AND boolean logic (like i think many other sites are). To read that OR is the inferred default is a little surprising.

Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name


Enter the verification code you see in the image below