Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
2  
btw, os x does 2. –  David Pearce Jun 9 '11 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 Jun 9 '11 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 Jun 9 '11 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 Jun 9 '11 at 21:52
    
@JoJo that's if the search isn't performed when the text changes. –  Nick Bedford Jun 10 '11 at 2:54
show 2 more comments

12 Answers

up vote 30 down vote accepted

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 :)

share|improve this answer
    
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) –  Roland Pokornyik Jun 10 '11 at 6:13
    
Agreed. For auto search the left hand positioning will work best. –  PhillipW Jun 13 '11 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 Jun 22 '11 at 18:20
    
@Kalessin: The reason why 2 and 4 seem unnatural to you is because you are right handed. –  Bart Gijssens Sep 26 '11 at 8:40
    
@BaGi: Since I am in fact left handed, I think my answer was closer. –  Kalessin Sep 26 '11 at 9:43
show 1 more comment

Four.

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!

share|improve this answer
1  
+1 for resource –  Roland Pokornyik Jun 10 '11 at 6:14
add comment

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

share|improve this answer
    
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 Jun 9 '11 at 16:46
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
add comment

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.

share|improve this answer
add comment

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 .

share|improve this answer
    
although, if you hold the magnifying glass in your right hand, tyhe 4th seems a bit more logical. hmm.. –  exp Jun 9 '11 at 14:33
add comment

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

share|improve this answer
add comment

Three.

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.

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

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
    
it is strange that bing uses the left handed magnifier icon! We've discussed above that it feels rather unnatural... –  Roland Pokornyik Jun 24 '11 at 6:50
    
yes but this left side icon perform action, which is good and natural –  pir abdul wakeel Jun 24 '11 at 6:58
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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