Designing a Great Search Box - Yahoo & Chickipedia are Great


The search box is often overlooked despite being such a critical launching point for the user experience. The search box shouldn't necessarily be an afterthought. Whether it is in the header or footer, it should be inviting, large enough to house a full query, and be visually enticing. There are a lot of ways to make a search box interactive:

* The Look: Ask.com sets it boldly atop a rich background. * In the Box: beRecruited.com fills the search box with the message "Search beRecruited" that, when clicked, disappears. * Before the Submission: Snap.com reveals search results as the query is entered.

Here are some of my favorite search boxes and interactions:

* Yahoo. Fills in results as you type. Looks terrific. Allows you turn 'search assist' on and off.

Yahoo Search Box

* Chickipedia. Not sure what to say about the rest of their site, but the search box is terrific.

Chickpedia Search Box

* Boxxet. The search box is ordinary, but the pre-rolled interaction is brilliant and inviting.

* ESPN. As you type, it fills matching results with key data like team, school, position.