User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I’m trying to find out how exactly the search icon functionality should work when the icon is clicked. This is for a responsive website.

I have three scenarios, please view them on a smaller viewport:

1) The search box appears and an overlay covers the rest of the screen. (e.g.

2) The search box appears and pushes down content on the screen. (e.g.

3) The search box appears and covers some of the content.(no example)


As far as I know, there are some issues with overlays on mobile?

share|improve this question
I don't see what you're saying in the examples on the actual sites. Could you perhaps add some screenshots? For example: I don't see any content getting pushed down on the microsoft site. And with search box, do you mean the auto fill suggestions (the dropdown below the input field)? – Paul Jun 30 '14 at 8:46
@Paul try looking at those sites on smaller viewports rather than desktop size. I assume that's what OP is referring to. – JonW Jun 30 '14 at 8:50
@JonW That worked – Paul Jun 30 '14 at 8:54
Sorry about that @Paul. When you click on the search icon on the Microsoft website (on a small viewport) it pushes the navigation the content slightly down. When I say search box, I mean the input field itself. – UXPrincess Jun 30 '14 at 8:55
@Paul thanks! Sorry about the poor terminology used. Still new to UX, so trying to wrap my head around everything! – UXPrincess Jun 30 '14 at 9:22
up vote 7 down vote accepted

Every example you gave would work. One might work better within your design than the other.

Your users won't really care about the way the search input pops up. The best search fields

  • are bug free
  • are easy in use
  • give relevant results
  • help users find what they are looking for (auto fill or alternatives)

So I would focus more on functionality and less on esthetics.

(I've read an awesome piece on search fields a few months back that might interest you. If I can find it I'll post it here)

Found it

share|improve this answer
If only the linked article managed to implement their own suggestions with reasonable code. – Nit Jul 1 '14 at 0:05

As others have said the differences are small, but there are a few details to make sure you get right:

  • If any content is covered (options 2 and 3), there needs to be a clear, simple way to get rid of the covering, for if someone hit the search icon by mistake or changed their mind for any reason. This might be a point in favour of options 1 or 2: with 2, it's common for "click off" (or tap off) on the overlay background to clear it, whereas without the overlay, clicking off might mean clicking on something like a linked image that might take the user to a page they didn't want to got to.
  • If content is pushed down as in option 1, are there any performance issues? Some types of content or layout can be distractingly stuttery when animated sliding down on some browsers. If the purpose is to keep the user focussed on their search, this can defeat the purpose - test it.
  • Is there anything else such as advanced search links, facet dropdowns, autocomplete, etc? If so, it's worth thinking about how and when these appear in terms of whether you want them to stand out and be noticed, or, to unobtrusively appear as part of the transition, noticed mainly by people looking for them.
share|improve this answer
thanks for the detailed answer! At the moment we do not have an advanced search/dropdowns/autocomplete etc. But these are likely to be considered for a future implementation, just not anytime soon. – UXPrincess Jul 1 '14 at 11:29

The interaction and location of the search icon depends completely on the context it is being used. Is it used to search for an item, in case of e-commerce site or is it used to search something within a site(professional/company site?

The intent will give you an answer. If search is really critical to my task flow for an objective, then probably I will keep search box open at all times.

share|improve this answer
@Chris - yes,it is. How can you generalise? Would you please elaborate? The complete statement is - it depends on the context. Give me the context, I will give you a precise answer. – Mohit Jul 1 '14 at 5:19
@Mohit It's a government website. It's already been decided by my team that the search box won't be open at all times and instead we'll be using the search icon. – UXPrincess Jul 1 '14 at 11:22

Your Answer


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.