8

I'm working on a mobile site of a rather large site. There are quite a few iA and navigation hurdles already, so I'm pushing to use a search icon instead of a traditional search input box.

My reasoning is that both require one click (or touch) to activate and begin searching. Weather a user is clicking the icon to trigger a search or clicking an input box to do the same, the experience is the same. However, an icon takes up considerably less space, and can communicate the same thing.

I'm interested in thoughts about a Search Icon vs. a Search Input Box... anything helpful?

Improve this question
3
  • 1
    "an icon takes up considerably less space" - this sounds rather worrying to me. If you're really concerned about the difference in space taken up by a search box versus. a search icon, I suspect the "iA and navigation hurdles" of which you speak are the ones to tackle first rather than worrying about this issue.
    – Bobby Jack
    Feb 13, 2012 at 23:56
  • I'm confused. How does an input text field replace a submit button? They don't seem to be mutually exclusive concepts.
    – DA01
    Feb 14, 2012 at 1:07
  • Here's the way I see it: If a user comes to a page, there s nothing entered in a search form. So pressing"submit" should not be an option. If the user clicks the "search" icon, the field will appear, in focus, next to the icon. At this point, the icon now acts as a "submit" button. Could there be any drawbacks to a button that serves two purposed? One click to focus on the search, another to submit it?
    – Alec Schmidt
    Feb 14, 2012 at 18:35

7 Answers 7

Reset to default
7

On a mobile platform where space is limited and a simpler look and feel is required, I think it's absolutely fine to have an icon instead of a permanent search box.

Take for example the Android Market App where touching the icon takes you to the search page with completion list and virtual keyboard ready to start typing.

enter image description here

Improve this answer
1
  • Thanks Roger, I think this is definitely the solution. It seems that Facebook's native mobile app hides their global search even one level deeper in the nav menu. I guess it speaks to the point @Pratheep brings up. Icon it is! (for page load anyway ;)
    – Alec Schmidt
    Feb 14, 2012 at 23:39
3

It all depends on how important is the search and how frequent the users might need the search, If your site is search based like amazon or google search I would expect you to keep the search box which gives the suggestions also.

On the other hand if search is used secondary you can opt of search icon and place it on the top left or right.

Improve this answer
2

The box also has the advantage of displaying your previous search/filter input.

Edit:

If the user has not previously entered an input into the search/filter box, you can save space with an icon.

However, you should have some sort of indicator in the icon that the search is in place to clarify the affect pressing on the icon causes. (Refers to the issue mentioned by @fredley.)

E.g. If you have a search icon on the top right corner and the icon expands leftwards into a box, then on the left side of the icon, place a couple of left pointing semi-triangles (e.g. "<<").

After expanding into a box, you will need to replace the search icon with a go icon (e.g. "-->") and a clear search icon (e.g. "X").


If you do shrink the search back into an icon, don't loose the input - display it again if search is expanded again.

Improve this answer
2
  • Ah yes, but what if the user just arrived? There would be no search or filter present. Could the text field appear once the search has been triggered, and then stay there to display the previously entered content? (i.e. It would ONLY be an icon if there are no previous search terms)...?
    – Alec Schmidt
    Feb 14, 2012 at 18:37
  • @AlecSchmidt see edit.
    – Danny Varod
    Feb 14, 2012 at 18:57
2

One benefit of a search field is that users can observe it almost subconsciously and therefore locate it very quickly, or at least feel comfortable knowing that search is an option available to them.

In the Android example, the search icon is most certainly reasonable given space limitations, but an important consideration is that the screen real estate in a mobile app is so severely restricted that even the small search icon is relatively large. That option may be less desirable or workable on a web page expected to mainly be used on desktops or where a small search icon may become overwhelmed by the other items on the page.

Improve this answer
1

Go for a box. It's clear what clicking it will do. The icon could go to another page, or some unknown action.

Improve this answer
1

Well, having an ICON will help to save some real estate space on a mobile app. It neatly needs to fit along with other Utility icons, which should be ideally not confuse the user. This defines the only way your ICON does not gets messed or stays afloat without a context. I mean it should not be given a space which really makes out of sorts. I compare this to the way a Search BOX is really a object of affordance. So that affordance has to be carefully brought about. It should work against a BOX by all means. But in first place a Search BOX is always the best in any day, but nevertheless if there are real challenges that makes that not possible.

Improve this answer
1

How about using an icon and adding a popover with a search field and a submit button inside? When the user clicks on the search icon it opens the popover. That way the user could still be on the same page and the search field could also be populated with the latest used search term.

Improve this answer

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.