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. http://www.woolworths.co.za/)

2) The search box appears and pushes down content on the screen. (e.g. http://www.microsoft.com/)

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?

  • 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)? Jun 30, 2014 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, 2014 at 8:50
  • @JonW That worked Jun 30, 2014 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, 2014 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, 2014 at 9:22

3 Answers 3


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

  • If only the linked article managed to implement their own suggestions with reasonable code.
    – Etheryte
    Jul 1, 2014 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.
  • 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, 2014 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.

  • @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, 2014 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, 2014 at 11:22

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.