Three Tips for Usable Search Forms

There are two types of Internet users - those who browse websites using its navigation, and those who head right for its search tool. Every website should be built for both types of users. Following Steve Krug's usability philosophy (external link), there are some simple improvements you can make to your search forms to make them more usable.

Remember Krug's number one rule for website usability - Don't Make Me Think! Everything should be obvious to your visitors. Keeping this in mind, let us look at a common search form with a few usability mistakes:

Example of a really bad search form

By taking three simple steps, we can fix these mistakes - don't make up fancy names, limit their options, and properly layout the form.

Tip #1 - Don't Make Up Fancy Names

Search should always be "search," not "quick search" or "keyword search." Changing the name of "search" involves another step for the user to have to think about. Is quick search the same as search? Is a keyword going to get my answer? Just make it short, sweet, and to the point.

Tip #2 - Limit Their Options

The more steps in any process, the higher the margin is for error. The same goes for search forms - giving the user more initial options will only confuse them. It is best to provide options to narrow searches on the results page, rather than on the initial search.

Keep everything as simple as possible for the user. Strip away excess options, such as the type of search or what they're searching through. It may require more programming, but your search system will work best when it can handle whatever users throw at it.

If, for whatever reason, you absolutely need to have a drop down list in the initial search form, it helps to make it read like a sentence. This works best when the drop down list allows the user to select the type of search:

Example of a search form that reads like a sentence

Usually, these extended options are only used by frequent visitors. Furthermore, it is practical to select a universal search type, that can handle whatever the user choses to throw at it, as the default option.

Tip #3 - Properly Laying Out The Form

Properly laying out your search form can help to increase its usability. As most of us read left to right, keep the submit button directly next to the input area, not underneath it. Keep the entire search area inline, so your users' eyes can quickly move across the search form.

You can place the text "search" before the input area or in the submit button. If you place the text preceding the input area you might want to use the text "go" for the submit button. This depends on your layout.

At times your layout can constrict your ability to have your entire search form inline. In this situation you should position the search label directly above the input area. You can even use a small directional icon to lead the eyes toward the input area.

After The Changes

After we make these three changes to our search form, it looks much simpler and usable:

Example of a very simple search form

There are no questions about this - it is a search box. The excess options have been stripped away, and a neatly inline form has been laid out.

Extended Links