Caption inside vs. before the Searchbox

Question

What are the pros and cons of having a label like "Search:" before vs. inside the searchbox? Here are examples of the messages/labels being inside the box:

http://blog.publicobject.com/2006/09/all-vista-search-fields.html

I came up with some pros:

• uses less space
• when the message inside changes, for example because of some other criteria ("search files" vs. "search pdf-documents") the ui-arrangement wouldn't have to change.

The only disadvantage i saw is that as soon as text is typed the message vanishes. Which in my opinion is fine for search-fields, since their location usually makes their meaning clear, also they often contain a search-logo.

Having the message inside the field in a input-form is less ideal, in my opinion. Classical Problem: 'Did i type in my name in the town field and vice-versa now?'.

Answer 1

Baymard Institute published an article just a month ago (June 6, 2012) on what they call "false simplicity".

The first item on the list is called "loss of context", which means removing UI elements, such as hierarchy indicators, navigation history, labels, etc. And their main example is placing labels inside form fields, especially in e-commerce setting. They also mention their earlier study where they have observed users correcting mistakes in forms by clearing the entire field to see the label.

That being said, there's one key difference between a checkout form (or any other multi-field form) and a search box: the number of fields a user has to fill out. When there's just one field (the search query) and a clearly labeled action (search) associated with it, there's far less chance of losing context.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Moreover, not all search forms are created equal. Some search methods ("instant" in particular) don't need the dedicated action button, while other situations (e.g. extremely novice users) require the complete form.

Answer 2

The problem here is you're losing context. Make it really, really clear your search bar is a search bar and the slightly lower context afforded shouldn't be a big issue. See Twitter's search bar:

Since there's still the typical Search icon in there (which functions as the submit button), and it's in a separate, dedicated location, it's quite easy to tell this is the search field, even after you've put some text into it. Most of the time you're not going to lose context with a search field anyway; you enter the search term and you hit enter/click the search button.

Using placeholders as labels is much more dangerous for multi-field forms of course. But for a simple search field you can create some very strong context which makes it quite difficult to interpret your search field as anything else.

Answer 3

It might be worth looking at this article for an alternative point.

Why Left Search Buttons Perform Faster Than Right Ones

The key take-out quote:

Users have to visually fixate longer and more times to carry out a search when the search button is on the right of the text field. This takes users more time and work to do a search. Placing the search button on the left of the text field, however, reduces visual fixations and the time it takes for users to do a search.

However a counterpoint is that the conventionally used pattern of having the button on the right hints at the order in which the action is meant to be performed. Enter a query then search. Techniques like live search and auto-complete sometimes disrupt this flow however.