7

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

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
|improve this question
  • 2
    There's really no way to answer this without knowing the full scope of your site's goals, objectives and other design decisions that have to be made in comparison. – DA01 Oct 17 '13 at 4:38
9

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.

|improve this answer
  • 2
    I agree with everything but your recommendation for the Submit button. Stand behind people and watch them do google searches. I randomly did this last week and zero out of 8 people (who didn't know I was looking) clicked the button. Small user study that I'd like to expand, but it seems people are used to hitting the Enter/Return key to submit. – GollyJer Oct 18 '13 at 14:51
  • 1
    +1, maybe you are right about it. I have not seen any study on this, so it may be my belief as well! However - remember that user groups are different between countries; it's even more visible between the members of 50+ group. By the way, this is because of the political division, and its economical aspects, after WW2. Younger people are 'contemporary', as they adapt more easily to innovation. So, "locally" I still would recommend it, but I get your point of view. And, as I said, you may be also 'globally' right about it. – Dominik Oslizlo Oct 18 '13 at 22:09
  • Also, you could replace the "search..." text in a search field with "Type some text and hit enter...", or something along those lines. – Dirk v B Nov 1 '13 at 5:29
0

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.

|improve this answer
  • The virtual keyboard you use to type also include an enter/search key, however, it is convenient to have a button to click on in case you minimized the keyboard or pasted the search query from a source you copied. – Danny Varod Oct 17 '13 at 7:31
0

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.

|improve this answer
0

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'.

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.