What is the rationale for the design of search input fields?

Question

Having read through a whole bunch of literature on search behaviour and looking at different design patterns, I am interested in the large variation of search input field on the web. Specifically, I am talking about:

1. Search icon versus search button
2. Advanced search option on the left or right
3. Search button on the left or right
4. Advanced search option as a dropdown or button
5. Cancel search button
6. Other search interactions/behaviour

To put it into a single clear question: How would you incorporate 1-5 into a design and what would be the reason (and would you introduce other interaction/behaviour)?

I think this might have something to do also with the type of website, the type of UI style/theme chosen, type of browser and many other various factors. While I think each of the questions has been asked before, I am thinking if there is a overall design that takes into account of all points above that makes sense, and what the design would be.

Just an update on this question. I did a quick search of some websites/applications and came up with some examples of just how varied the designs are.

Answer 1

While there can be lots of different reasons for going with one version over another (personal preference, design, branding, accessibility...) you can't really beat looking at some actual test data to see if any of these options actually perform better out in the wide world.

Dell did some A/B testing around Search fields using examples similar to yours and found the following results:

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

Version A increased Dell’s RPV (Revenue Per Visitor) by 6.3%.

The winning version of this test omitted the word ‘Search’ in the search bar itself, and added a button with the ‘Search’ call to action. This gives the visitor more direction and lessens the onus on the visitor to interpret icons, e.g. the magnify glass. Dell used multiple variations for this test, and each variation using the magnify glass icon did not perform as well as the Search Button.

OK, we don't know why the option with a search button and no content in the field performed better, but we know that it did.

Jakob Nielsen has done lots of research into search, and always comes back to the same outcome:

People don't really understand how to search websites.

In one of his articles (Albeit from 2001 so may not still be completely accurate)

The best designs offer a simple search box on the home page and play down advanced search and scoping.

So really, it comes down to a few simple points

• Make the search box clear as to what is that you're offering
• Keep it simple - avoid extra options such as Advanced Search (at least initially, possibly within the results page so people can tweak their results after they've already entered a search)

Answer 2

Here's how I would solve your problems

- Search icon versus search button

If the search component is a live filter - e.g. as soon as you start to type results are shown - then its enough to use an icon. If an action is requried to show results (press of a button or 'enter' on keyboard) a button should be used. Not all users uses enter, and not all sites have connected the 'search' button with an enter key press.

Advanced search option on the left or right

There isn't really a standard here. You can also put it underneath the text search. The important thing is to decide if it should be really visible or not.

Search button on the left or right

I often use the right side since that (in western countries) represent forward (the way of how people reads texts). Where text is read from right to left, you should think vice versa of the design.

Advanced search option as a dropdown or button

Generally, I think that users are used to the "Google" way - one text field should take care of most searches. Therefore, I would hide the advanced search features in the standard mode. Of course, this is different from project to project. One solution is to track the users behaviors and use advanced search as the standard view if the user wants it that way.

Cancel search button

If the search process potentially takes a long time to complete the user might want to cancel it to refine the search criteria. A cancel button is a good idea to use where a process stops the user from doing things during the process itself.

Other search interactions/behaviour

If your text search area is one of many search options it shouldn't have it's own search button. Instead use one search button that indicates that all controls are used in the search.

Answer 3

From the UX point of view, not UI, it depends on importance of search feature in your context as well as information structure. What I mean? If you are online media with thousands of articles you need powerful fulltext search. If your resource use tags (as this site) you can provide one more search mechanism. If you are photo artist portfolio you better force visitor to view all your content.

Also it depends on device running browser - desktop, mobile, etc.

In general, if you are not going provide some separate search feature, IMO it's better have simple and familiar implementation - search input field and search button to the right of it.