What is the best practice for a search bar?

Question

Traditionally search boxes had a magnifying-glass image on the left of a search box with some search text, but today I see many websites just with text "search" (no boxes) and when you click on the text, the text is replaced by a cbar where the user can type the search criteria. This looks much cleaner. I would be interested to know other thoughts on this. Thanks

Answer 1

Looking at the big dragons one can see that the magnifying glass is convention, except the fact that Microsoft mirrored theirs (I have no clue why, though). As for adding search in the search text field only Facebook and Twitter does that. So there seems to be less a convention for using inline disappearing text.

So I would say that the magnifying glass is convention and inline text is optional.

---

^{Why we don't have a magnifying glass here needs to be asked at meta.}

Answer 2

The convention seems to be a long single line input bar at the periphery of the page with a magnifying glass.

Having text in the search box is fairly common, but not always best. Text in the box does not look as clean, but that may fit with the surrounding aesthetics on the site.

Positive Examples (not including negative, no reason to sling mud):

• Google's aesthetic is very clean so having the bar blank fits well
• Facebook's top bar is already pretty busy so the text blends

Having the word "search" appear in the box could be useful when deviating from the convention in some way (odd placement, shape), in a context that a user might not think is searchable, or when target users are likely to not be familiar with the convention.

Having instructive text can be very useful in situations where the content being searched or the format of the search would otherwise not be clear.

Positive Examples:

• Facebook specifies that the search is for "people, places and things". This lets new users know that it doesn't search for posts, mail/chat, etc.
• USPS.com has "Search USPS.com or Track Packages" in it's search box. This let's the user know that they can use it to look up a package by tracking number.

As a final note, I'd like to say that if you do use text in the search box, make sure that it is cleared when the cursor enters. Too often I see sites that fail to remove the label text forcing the user to delete it manually.