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.

4

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.

  • 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 '15 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 '15 at 9:18

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.