What do you think which is the best search field solution?
And why? Is there any research on this topic? To which direction should the search icon face?
asked Jun 9, 2011 at 13:35
-
2btw, os x does 2.– Josh HuntJun 9, 2011 at 13:55
-
3I 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?– Random832Jun 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.– boehjJun 9, 2011 at 16:44
-
2You 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.– JoJoJun 9, 2011 at 21:52
-
@JoJo that's if the search isn't performed when the text changes.– Nick BedfordJun 10, 2011 at 2:54
|
Show 2 more comments
13 Answers
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) Jun 10, 2011 at 6:13
-
-
1In addition, HTML5 search fields may implement an 'x' clearing icon on the right side that would interfere with the search icon.– DA01Jun 22, 2011 at 18:20
-
@Kalessin: The reason why 2 and 4 seem unnatural to you is because you are right handed. Sep 26, 2011 at 8:40
-
@BaGi: Since I am in fact left handed, I think my answer was closer.– KalessinSep 26, 2011 at 9:43
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!
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.– boehjJun 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.
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..– expJun 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
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.
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
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
answered Jun 23, 2011 at 11:00
-
it is strange that bing uses the left handed magnifier icon! We've discussed above that it feels rather unnatural... Jun 24, 2011 at 6:50
-
yes but this left side icon perform action, which is good and natural Jun 24, 2011 at 6:58
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.
