Blooper 32: Dueling Search Controls

 <  Day Day Up  >  

Blooper 32: Dueling Search Controls

Even when the controls for a website's search function are simple, site visitors often encounter another problem: more than one set of search controls from which to choose. "Which ones should I use?" "Are these different or the same?" "Do they search through the same data?" These are questions that arise in the minds of site visitors when they are faced with competing search controls. As explained in Don't Make Me Think (Krug, 2000), competing search controls cause users to stop thinking about their work and start thinking about how to operate the website.

Gotcha: Wrong One!, the website of the well-known television news company, provides a good example of competing search controls and how they can confuse people (Figure 5.15). Visitors to this site could easily mistake the Search button at the top of the page ”the one labeled with a magnifying glass ”for the site's search function. In fact, that Search button brings up a search engine for searching the entire Web. [4] CNN's Search box is somewhat "buried" just under the big red logo. It is further "disguised" by the word "SEARCH" in it, making it look like a button rather than a text field. When I've shown people this site and asked them to find a news story using the search function, they almost always try the top Search button first.

click to expand
Figure 5.15: (Apr. 2002) ”Competing search functions. The top Search button is more noticeable but is the one people are least likely to want ” It searches the entire Web, not just

So Many Search Boxes, So Little Time

Another news organization, the Los Angeles Times newspaper, has two competing Search boxes on its home page, (Figure 5.16[A]). Here, however, the problem is that it is unclear how they differ . The one at the upper left of the page is labeled "Search," and the one at the lower left is labeled "Archives," "Enter Keyword," and "Detailed Search." But the upper Search box can find articles in the site's news archives, which are presumably the same "archives" to which the lower Search box refers. What then is the point of the lower Search box?

click to expand
Figure 5.16: (Apr. 2002) ”Competing search functions. A ” Two Search boxes are on home page. B ” Three Search boxes are on the Search results page.

To compound the duplication, when the site displays search results, it includes a Search box to make it easy to search again (Figure 5.16[B]). Thus, after a search, the fixed portions of the page ”with their two competing Search boxes ”now compete with a third Search box. It seems likely that the search results portion of the page was designed without the knowledge that it would appear embedded in a page that already has a Search box.

Hmm ... Which One's Best?

The website of Computer Professionals for Social Responsibility,, exhibits an interesting variation of the "Dueling Search Controls" blooper. The home page has two Search boxes, one labeled "Quick Site Search," the other labeled "Complete Search" (Figure 5.17). The two search functions use different search engines and are labeled differently, but the differences between them aren't clear enough to allow site visitors to decide rationally which one to use. For example, is the Quick Search in complete? Is the Complete Search significantly slower?

click to expand
Figure 5.17: (Jan. 2002) ”Competing search functions, "Quick Site Search" versus "Complete Search," force users to make a choice despite not knowing the trade-offs, if any.

To answer these questions, I tested both Quick Search and Complete Search to compare their response time and completeness. It turns out that the Quick Search is not much faster than the Complete Search and sometimes is more complete, returning more hits for the same search terms.

The site's designers may have provided two search functions because they understand the implementation differences and considered the speed-versus-completeness trade-off to be significant. Or maybe they just couldn't decide which one was better and so included both. The bottom line is that the differences between's two search functions do not seem important enough, or even reliable enough, to warrant burdening users with deciding which one to use.

Avoiding the Blooper

Web designers may have reasons for providing multiple competing search functions on a single Web page. However, providing multiple search functions has costs that must be weighed against the benefits. The costs boil down to this: The search functions compete for attention.

If the competing search functions are different, as on the CNN and CPSR home pages, one cost is that people might use the wrong one. They might notice the wrong one first and use it, overlooking the correct one. Even if they see both, they might not know how they differ ”or even that they differ ”and choose the wrong one for their intended search.

If the search functions are the same, as on, users must decide which one to use. Decisions cost time and distract people from their own tasks (Raskin, 2000).

Less Is More

For search functions, as for user interfaces in general, less is more. In fact, for Search boxes on a page, the best number is one. More than one causes confusion, delay, and error.

If you are considering putting two or three copies of the same Search box on a page because you aren't sure where visitors will look, don't. Really. Place just one Search box prominently, in one of the standard places: top left under the logo, top right, or lower left under the navigation column. And make sure users recognize it as a Search box.

If you plan to include a function for searching the entire Web (as at, heed this advice from Nielsen and Tahir (2001):

Don't offer a feature to "Search the Web". . . . Users will use their favorite search engine to do that, and this option makes search more complex and error-prone .

If you want to provide different search functions for searching different data sources, such as general site content versus news articles versus stock prices, design them to look completely different. First, consider making everything other than the general site Search box a link to a separate page. Second, if that isn't acceptable, design each Search box to look as specific to its own search domain as possible. None of the special-purpose Search boxes should look like a general site-Search box (Figure 5.18[A]). For example, a function for looking up stock quotes could be sized to fit only company stock symbols, and its button could be labeled "Get Quote" instead of "Search" (Figure 5.18[B]).

click to expand
Figure 5.18: Search functions for different purposes look very different. A ” General site search. B ” Stock quote lookup.

Finally, if you are providing two search functions to give users a choice between search implementations having different characteristics, first question whether that is the real reason. If the real reason is that the developers can't decide which implementation they prefer, choose one arbitrarily and consider the other one "exploratory development." If the intent to offer users a choice is sincere, ask whether users really care. Even if they do, don't offer the choice on your home page. The home page should have one general Search box, period. Options should be confined to the Advanced Search page. Even there, the choice should be presented as an option affecting a single Search box, rather than as multiple competing Search boxes.

[4] The entire top row of buttons on CNN's home page is supplied by Netscape, a CNN sponsor.

 <  Day Day Up  >  

Web Bloopers. 60 Common Web Design Mistakes and How to Avoid Them
Web Bloopers: 60 Common Web Design Mistakes, and How to Avoid Them (Interactive Technologies)
ISBN: 1558608400
EAN: 2147483647
Year: 2002
Pages: 128
Authors: Jeff Johnson © 2008-2017.
If you may any questions please contact us: