Scarf*oo

So you have designed a beautiful and usable menu, provided breadcrumbs to backtrack your steps, designed a “you are here” marker, but your site is growing fast, providing hundreds – if not thousands – of pages of information. In that case, you might want to give your users something more – you might want consider implementing site-wide search. While many sites nowadays implement some form of search, it is surprising that only a few do it right. In this article, I’ll try to show you some common problems, and how to avoid them when implementing a search facility on your web site.

The Basic Search Box

The search box should be kept simple, consisting of a text input element and a search button. While other fields or drop-down lists can be added to favour scoped searching, research has found that it is best to leave these out, as they are hard to grasp by the general user.

As of the time of this writing, the recommended size (number of characters) of the input element is 27 characters, and the trend seems to grow, as users gain familiarity with searching. 27 characters is the approximation of the search string size most users type into the search field, so you should probably stick with it unless you are running out of site space to accommodate for its size.

Another important thing to note, is the form and label of the search button. Despite the fact that you might want to get fancy with the looks of the submit button, I discourage you to get too far from the accustomed “button” look, as this might decrease the visibility and clarity of the search function on your web site.

If users can’t find it, they won’t use it, so place the search box on the top right corner of your site, because this is the place users are accustomed to find it. Alternatively, you can move it to the left, for example, but by all means try to keep it on the top (header) of the page. Also be sure to make the search facility available throughout the site – consistency always pays off.

Scoped Search

If your site features many different types of content (or products, services, etc.), you should probably provide scoped searching. Let’s take a look at Amazon for example. In the old days they started up by selling books, but right now there are nearing the thirty product categories mark, so it comes naturally to provide a scoped search facility.

Amazon scoped search facility

Note, that by typing in a search phrase and hitting go, it will default to search the whole site, but if you open the drop down menu, you are giving the option to limit the search scope to one of the categories you are most interested in.

Following are some alternative scoped search examples from popular web sites. Note, that instead of relying on a drop down menu, these sites provide clickable links to change the search scope. This is just another valid method, which works very well with a small number of scope groups.

CNN.com scoped search facility

Yahoo! scoped search facility

Of particular interest is the spotlight-like search gizmo on Apple.com, which features instant as-you-type results, like its desktop counterpart found in the OS X 10.4 and 10.5 operating system. It’s safe to expect this kind of search facility to be used more frequently in the future, because of its intuitive interface and immediate response to search queries.

Apple’s Spotlight-like Instant Search

Displaying Search Results

You should design the results page with care. Keep all the superfluous information out of the results, leaving only the necessary info for each search result. As a general rule, I recommend showing the following fields for each result:

• The document title (also serves as a clickable link to the document)
• An abstract from the result page, which helps the user decide if the target page actually contains useful information
• Optionally the URL of the document

Google’s Search Results Page

Try to display about – but no more than – ten results per page and provide pagination to access further results.

On the top of the search results page, above the results list, you should always repeat the search form and provide additional options to refine the search. It is also considered good practice to display the number of results pages along with the results count somewhere close to the top of the page. This makes it easier for the user to refine the search query he already typed in earlier in case of too many or inaccurate results.

For further reading on the subject, I recommend you check out the following books:

• Jakob Nielsen’s and Hoa Loranger’s Prioritizing Web Usability
• Steve Krug’s Don’t Make Me Think!: A Common Sense Approach to Web Usability

So that’s the end of this article. If you have any questions or comments, I invite you to drop a line below as I’d love to hear your opinions and experiences on the subject.

This entry was posted on Wednesday, January 16th, 2008 at 8:17 pm. You can follow any comments through the RSS feed. Both comments and pings are currently closed.