Expand search bar on click - Good or Bad?

Question

When space on header for the search box is a problem, what is the best way to bypass it?

• Magnifying glass icon that shows search bar when clicked
• Small search box that expands when clicked

Also, many studies shows that it is important to have a "Search" button next to the text box (for many reasons), but Apple doesn't have one. They use the second option above, and you have to press Enter to Search.

Should the "Search" button be:

• Always displayed
• Never displayed (Enter only)
• Displayed only when the user clicks the search box

Answer 1

While having just a button with a magnifying glass icon indicates the search affordance, it may be unclear for the user what happens after clicking/tapping it. Possible interpretations:

• "Another page will open, with a search form (maybe 'advanced search'?)." - user does not know if he will have to face a complicated search form or not, and s/he expects one more click and some time to load the search functionality he should have at his fingertips. So, bad UX, or at least not-so-good one.
• "It may show a popup with a search field, maybe...?" - but this is a quite improbable interpretation.
• "It may expand an input." - but this one is not much probable neither.

If you add a field, you will gain two things:

• The search-without-leaving-a-page affordance will become visible. So, user will know from the beginning that s/he only needs to type in the text s/he looks for and submit the form.
• You will dramatically increase the visibility of the search feature.
• The tap/click target will become bigger

You can make this field expand on focus, it's quite nice solution to deal with the header, especially if you need some whitespace to make it less cluttered.

Now, regarding the submit button. It's true that Apple does not have it, but there is FAYT (find-as-you-type) implemented, telling you what the most popular searches regarding the string you entered are. If there are none - there is a visual (textual) cue in a form of CTA in the dropdown: "No suggestions found. Search...", which, upon tapping, leads to search results. Whilst it's not perfect, it is some solution, dealing with the lack of submit button.

However, personally I think that the submit button should be present in a search form. This is for three reasons:

• some users are "click-freaks" - they prefer clicking submit button than pressing enter/return key.
• some non-tech-savvy users (maybe not really many, but still) may not know that a form can be submitted with a physical key.
• while on an iOS touch device (not sure about Android pattern at the moment) the [Return] key is contextually switched to [Search] submit key (by the way, when you go to address bar it changes to [Go]), but it draws attention from the form, and some users may find it problematic to find it, searching for a submit button in the first place, and then looking at the keyboard.

So, my recommendation is an expandable search field with a submit button. You can, basically, hide this submit key when the field is not focussed on, but what for - you can use it for making the search affordance more obvious.

Answer 2

The search button should always be provided on an accessibility point of view its best practice to have a search icon displayed, also if you are viewing on a device without keyboard (ipad, mobile) a button should be provided.

Answer 3

The first method - I'd say a definite no. It increases the amount of clicking a user has to do to search. Plus to some it may seem that the search input is broken or not available.

Method 2 - Whenever I see it it just seems pointless for most applications, rarely do people search for more than a short fragment of a sentence.

Personally I think a stand search field with a static input and a button on the right (text or icon) is the way to go. Its what the majority of people know, understand and expect.

Answer 4

It totally depends on the importance of search in your application and where exactly it is placed.

The reason search works for apple is due to the enter button acting as the default search functionality. As while typing a text in the search bar from keyboard, the user is more likely to hit enter rather than move away from keyboard, hold and locate mouse on search button and click it. You see there is a series of tiny events that user has to perform to get the search results.

I would recommend using search box that expands with either Search/Go etc label/button/icon integrated with the enter functionality.

The other addition could be the placeholder text on search bar say 'press enter to search'.