Search is one of the most important elements of a successful website, and not just for e-commerce. Internet users rely increasingly on search to find everything, often completely ignoring the site’s navigational structure and homing in on the search box exclusively (and not always smartly).

Despite the ubiquity of search behavior, and well-established conventions for presenting search results, I still see plenty of cumbersome, confusing search tools out there. The most egregious tend to be from B2B rather than B2C sites — because usability isn’t directly tied to the bottom line — but they still cost the company in lost productivity and employee morale. (After all, who can really enjoy a job that requires them to endlessly interact with hostile software.)

This article is my attempt to collect the most important elements of a successful search UI. There are certainly more than 10 guidelines — add yours in the comments!

First, a point of clarification. The word “Search” is used pretty loosely these days to refer to any aspect of looking for something on a site. Technically, there are two components of looking for something: search, in which the user types in a phrase in their own words; and browse, in which the user opens links to product categories or uses a faceted search interface to sculpt their own set of search results. This article addresses the most common scenario, which is a search results page that shows search and/or browse results together.

Smart keyword search

1 For keyword search, offer autocomplete. By looking up the user’s query as she types it, this approach guides her to the right terminology and increases her chances of success. Everyone’s familiar with the most basic version…

…but a drop-down isn’t the only way to do it. The Home Depot has taken autocomplete to the next level by combining it with a mega-menu to show not just a list of suggestions, but also their context.

2 Keyword searches are a fantastic resource, so make use of it! Look at search logs to find what people are struggling with. This applies to incoming traffic from search engines as well as site search. List the most common search terms and investigate why people are not finding those items right away.

Integrate search form + results

3 Display the search form, filters for refining results, and results data on the same page. This is a convention for most shopping sites, but I still see plenty of sites that present only a search form, with results on a separate page. This forces the searcher to pogostick back and forth between the search form and the results, which makes the task infinitely more time-consuming and irritating. Note that this rule doesn’t apply to a quick-search form (typically located on the site’s home page), which serves as an entry path to the search/browse functionality.

Make search results page more informative

4 At the top of the results list, state how the results list was created. Show how many results there are, and exactly which filters are applied to the list. This includes keyword search terms as well as browse categories.

5 For faceted search/browsing, provide an obvious way to remove a filter once it has been applied (thus broadening the search results again). My favorite approach is to group all filters at the top of the “Narrow Results” panel, with a button for removing them, as in this example from Diapers.com:

6 Pagination tools typically appear at the top and/or bottom of the search results list. Make it very clear how many results are on each page, and how many pages there are altogether. Many sites also allow the visitor to “view all” or at least change the number of results that display per page.

7 Sorting options should be logical and designed to help the searcher understand the results. The labels should relate to the content being searched. For example, it’s not very valuable for the default sort order to be by customer rating if there are no ratings available for the results shown. Most sites offer a combination algorithm as the default sort order (i.e. “Best Match”, “Most Relevant”), which combines keyword relevance, customer ratings, manually adjusted search rankings, etc. Here’s a creative example from Hipmunk, which uses “Agony” as the default sort order:

8 Provide a “new search” or “search again” link that is distinct from refining the current search (see Hipmunk example above).

The product detail page is still part of the search process

9 On the detail page for the product or item, add a “Return to search results” link at the top of the page. Ensure that both this button and the browser’s Back button will return the visitor to the same search results she left! This means that if she was viewing page 3, it returns her to page 3 — with the same sorting, pagination and filtering settings. The surest way to destroy the search/browse experience is to reset the search results every time the user views a product page.

No Results. Go Home.

10 The “no results” message is the most overlooked part of a typical search project, but it can be a very helpful tool to keep visitors engaged and help them find the right product. The best examples use it as a platform to suggest different search terms, and even cross-sell related items.

When the user is in “browse” mode (using filters to refine results), she should never reach a “no results” page. Ensure that all lists of filters contain a result. There should never be a case when a user clicks a category that contains “0 results”.

For keyword search, however, it’s always possible that the index will not recognize the user’s query, even with autocomplete. “No results” is not the end of the conversation … it’s an awkward pause that needs to be dealt with. At the very least, offer a chance to search again, and a few alternate next steps (tech support phone number; links to top categories so the user can try browsing instead).

I hope this was helpful! Read on for a few more resources on creating effective search experiences, and I welcome your comments.

Resources:

• Best Practices for Designing Faceted Search Filters / Greg Nudelman / UX Matters
• Site search best practices / Louis Rosenfeld / Bloug (especially the comments)
• Search Patterns / Peter Morville / Searchpatterns.org
• Advancing Advanced Search / Stephen Turbek / Boxes & Arrows
• Designing for Faceted Search / Stephanie Lemieux / UIE