7

I can see two broad patterns as far as the design of the search field is concerned. One like we see on Google has a button that the user can hit to initiate Search. (They could also hit enter to do so)

The other pattern much like what is on this site (stackexchange) do not have a button. So the only way the user can initiate search is by hitting enter.

Has anyone done any research or analysis of this pattern ? What I have noticed is that search fields without the explicit search button (that normally is a magnifying glass) have "Search" as placeholder text, left aligned, whereas when there is no button the placeholder is usually a "Magnifying glass icon" with "Search" all left aligned.

Improve this question

1 Answer 1

Reset to default
5

Yes, Nielsen Norman Group have reported on the research. Here's a summary.

Yes, provide a search button for the search box

For a long time, these were the unchanging research-based published guidelines (available for purchase, not free):

  • Have an easily identifiable search box in the upper right-hand corner of the page, with an open-text field accompanied by a Search button.
  • The search box needs no label. A clear Search button next to the field identifies the search for the user and tells them how to execute the search.

A button helps people recognize that there's an additional step to trigger the search action—even if they decide to do this by pressing Enter.

Also, do (or avoid) ten more things

With the increasing popularity of the magnifying-glass icon Typical icon for Search, NN/g did some more research, and provided some supplemental recommendations to help make search more usable for your users.

Improve this answer
4
  • 1
    "Better yet, have the search field expand on hover, with the cursor ready for input." I disagree with this point in that article, I feel like hover expansions/animations would only make things more confusing. The rest are nice topics though. Good read!
    – insidesin
    Aug 17, 2015 at 9:07
  • 1
    Thanks for the reference. My issue is with using the search button as a label. This way the instruction about what the field does comes in the end rather than in the beginning. This issue is well addressed by the search field design where the Magnifying glass comes first then the placeholder text (Search) but clearly does not work for users expecting a nexplicit search CTA.
    – Rajmera
    Aug 17, 2015 at 9:18
  • @Rajmera, I think there is no issue there, as you said, the magnifier provides intuitiveness to the search form and the CTA is clearly associated to that field, so I thinks it's understood that is the search submit button.
    – Daniel Abril
    Oct 8, 2019 at 19:33
  • @insidedesin, I understand your concern, but that solution is better than putting only the magnifier. It's always better having a proper field size that holds 27+ characters, but not always is possible. The example given by N/N is maybe not the best one either. I could show you cases where it makes more sense.
    – Daniel Abril
    Oct 8, 2019 at 19:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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