What do you think which is the best search field solution?

enter image description here

And why? Is there any research on this topic? To which direction should the search icon face?

  • 2
    btw, os x does 2.
    – Josh Hunt
    Commented Jun 9, 2011 at 13:55
  • 3
    I think there are conflicting underlying assumptions in the answers (re 'input preceding action' in one, safari/chrome mentioned in another comment) - what you haven't specified is is the icon a label or a button?
    – Random832
    Commented Jun 9, 2011 at 15:30
  • @josh - When you open a blue Spotlight box (⌘+Space on my machine, but normally ^+Space I think) it's none of these. 4.) is the closest but the magnifying glass sits above the search box in the top-right corner of the desktop. BTW: I also think 4.) is the best choice here.
    – boehj
    Commented Jun 9, 2011 at 16:44
  • 2
    You should also propose a layout that includes a search button. I know many old people that don't know hitting enter on a text input submits the form. They always look for a button to click.
    – JoJo
    Commented Jun 9, 2011 at 21:52
  • @JoJo that's if the search isn't performed when the text changes. Commented Jun 10, 2011 at 2:54

13 Answers 13


When the icon is on the left, it looks like a search box indicator. When it's on the right, people are more likely to think it's a submit button and try and click it. MY choice would depend on your intended function of the icon.

When I look at the icons, numbers 2 and 4 seem more natural to me, probably because they are oriented the same way as a mouse pointer. 1 and 3 just feel wrong :)

  • Maybe your answer will be the solution for us, because we only want to indicate with the magnifier, that it is a search bar. The icon won't be clickable, because it wouldn't make any sense in case of auto search (like google instant) Commented Jun 10, 2011 at 6:13
  • Agreed. For auto search the left hand positioning will work best.
    – PhillipW
    Commented Jun 13, 2011 at 9:43
  • 1
    In addition, HTML5 search fields may implement an 'x' clearing icon on the right side that would interfere with the search icon.
    – DA01
    Commented Jun 22, 2011 at 18:20
  • @Kalessin: The reason why 2 and 4 seem unnatural to you is because you are right handed. Commented Sep 26, 2011 at 8:40
  • @BaGi: Since I am in fact left handed, I think my answer was closer.
    – Kalessin
    Commented Sep 26, 2011 at 9:43


Evidence from psychology indicates that people respond faster with their dominant hand to objects/lines that appear oriented towards that hand or that are positioned consistent with the location of that hand (such as on the right of the screen for a right-handed response). See Symes, Ellis & Tucker, 2007 for one example of this. There's some argument about whether this effect is because the orientation affords grasping of the object (even if it isn't actually a real 3D object), or whether it's just to do with line orientation — see also Cho & Proctor, 2010.

Anyway, as a couple of people have pointed out, 90-odd per cent of people are right-handed, so if you want a fast motor decision (that is, if your user is likely to use the mouse, trackpad or touch interface to click inside the search box) then Four might be a good choice. However, I think One also works quite well, because its placement on the left of the search box is consistent with its orientation to be grasped/responded to with the left hand. On that basis, Two and Three are less good because they are oriented unnaturally for our hands: they only "work" (if you buy the grasping affordance argument) if your hands are actually crossed over at the wrist.

I'd also say that the angle of the search icon's handle in Two and Three tends to lead the eye out of the search box rather than towards the middle, which is not really what you want, so personally I'd avoid those. But practice and mileage obviously varies!


I'd possibly go with 4. Simply because it looks like it could be held in the right hand; and right-handedness has a 90% dominance.

[And I've never really thought about that in a UX context before.]

  • This is also what OS X does (more-or-less) with the blue Spotlight search box in the top-right corner of the screen. It looks good to me.
    – boehj
    Commented Jun 9, 2011 at 16:46

I like 3.

( And that's what's sitting up at the top right of my copy of Firefox right now. )

Having it on the right hand side makes it part of the left to right flow - type text then press search.

The orientation is a bit more subjective. I suspect its just what you get used to.


In real life the orientation of the magnifying glass depends whether you are holding it with your left or right hand.

As more people are right handed I suspect the alignment in 2 and 4 looks more natural (it does to me).


Another factor to consider is whether you use the Clear Field Button pattern - that little (x) button that appears inside the search field which lets you clear the field quickly. That button pretty much usually only appears on the right, which might collide with the search icon.

clear field button

And then there's the possibility of search-zone selectors to further muddy the visual space.


I'd go with 3, because of all the left-to-right-flow-thing and also the 'input preceding action' thing. And 3 instead of 4, because of all the emotion-matrix-thing .

  • although, if you hold the magnifying glass in your right hand, tyhe 4th seems a bit more logical. hmm..
    – exp
    Commented Jun 9, 2011 at 14:33

Number 2 would be my choice under this circumstance.

If users are using the search tool that involve loger search strings it allows for the text to expand right with out blockage from your search icon.

The other thing that I like about number 2 is that the circle and the descending line of your icon create a nice even break that



As Phillip mentioned, it fits the flow or eye movement better. I type my word or phrase, as an English speaker my eye goes to the right. Presto.

See this article for a nice overview of designs: http://www.smashingmagazine.com/2008/12/04/designing-the-holy-search-box-examples-and-best-practices/

Halfway down is the brief section on magnifying glasses - their take is to do what best fits your needs. No hard and fasts. But I still like moving from left to right.

Edit: I see what people are saying about the glass in the right hand. That's nice mapping, so 4 would also work.

  • 1
    If the answer is always 3, why do Google and Apple use 2 in their browsers?
    – ajcw
    Commented Jun 9, 2011 at 14:28
  • @ John. It's a joke, playing on the saying about multiple choice tests, "The answer is always C."
    – gef05
    Commented Jun 9, 2011 at 14:33
  • Sorry, missed the tongue in cheek!
    – ajcw
    Commented Jun 9, 2011 at 14:33
  • I edited it out for clarity.
    – gef05
    Commented Jun 9, 2011 at 14:52

Four. The icon is positioned towards the right hand and the search icon (which I assume is the search/submit button here) is after the search box. Of course this would apply only to left to right reading languages.


So, for the moment I am the only one to prefer solution 1.

Actually I do not like 2 and 3 because the orientation of the magnifying glass does not go towards the searched text.

And I do not like 4 because the icon is on the right and I am accustomed of reading from the left to the right.

Also, the shape of the field in solution 1 reminds me of a forward slash /, which is a shortcut in order to start a search both in Firefox or Vim, and also in Perl.


When search icon perform an action so it will be on right side like

enter image description here

when search icon does not perform action but only for usability and progress loading like area51.stackexchange.com then its should be on right side. like

enter image description here

Smash magzine article for search box icon

  • it is strange that bing uses the left handed magnifier icon! We've discussed above that it feels rather unnatural... Commented Jun 24, 2011 at 6:50
  • yes but this left side icon perform action, which is good and natural
    – Pir Abdul
    Commented Jun 24, 2011 at 6:58

enter image description here

I did a small survey with 50 people (general US population) between your option 2. and 4. to doublecheck suggestions made here. The option with the icon on the right-side was preferred by 66% of voters compared to 34% that preferred the icon on the left side.

Keep in mind that this was a survey and not usage data.

Your Answer

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

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