0

I'm currently working with a design that contains a small search icon. Clicking or pressing that icon displays the search form, which is hidden by default. The triggered search form covers the main site navigation. (Clicking on the search icon again hides the search form):

Search Behavior

This design has been rejected by our UX team because "the search form shouldn't cover up the navigation". That seems like an odd reason to me. If the user clicks on the search icon, their expected next step is to use the search form, not navigate. In fact, I would say that hiding the navigation behind the search form is actually a benefit since it removes clutter that the user has indicated she is not interested in (by clicking the search icon, the user has indicated that they are not interested in using the navigation currently).

Am I missing something here? Is there a hard rule in UX that states you should never hide the main navigation?

Improve this question
2
  • 1
    You're assuming the user clicked it with the express expectation of the search field appearing. What if they click by mistake, or click expecting a new page, or click it just to see what it does?
    – JonW ♦
    Dec 1, 2014 at 20:05
  • 1
    @JonW Clicking the icon a second time hides the form. I would think that is intuitive behavior if the user clicked on it by mistake or just to see what it does. I agree that a user might expect a new page since the icon appears inline with other elements that are simply links, but that's probably a separate issue/question.
    – Adam Balsam
    Dec 1, 2014 at 20:09

1 Answer 1

Reset to default
3

The general rule is not to cover functional things by other functional things, unless those latter things are popups or modals.

To me your solution has two problems. One is that the navigation is hidden, another is that the form comes out of an unexpected location, seemingly detached from the search that is semantically associated with the icon. If clicking on the icon will close the form instead of submitting search query (which is conventional behavior here), users will get confused — not all of them know that queries can be submitted by pressing enter.

So the form should appear on click or hover over the icon, but instead of sliding from the bottom, it should start unfolding from the icon and push the links on the left further to the left. There's plenty space for that. This way the navigation will stay intact and the search form wouldn't look detached.

The icon click should submit the query, and user can click the form off (click on the background around it to close it, like a modal).

Default state Default state

State with the search form open enter image description here

Improve this answer
2
  • Thanks for the thoughtful answer. A couple of great takeaways: "not all [users] know that queries can be submitted by pressing enter" and "[the form is] detached from the search that is semantically associated with the icon" in perticular. Your answer is also inline with what my UX team ultimately suggested. Thanks! I also like the idea of showing the form on hover for users with a mouse.
    – Adam Balsam
    Dec 2, 2014 at 0:24
  • Glad it helped, Adam! Fix the form open for 5 seconds after it's unfolded on hover, otherwise it will start to fold back as soon as user moves cursor from the icon. Cheers!
    – Zoe K
    Dec 2, 2014 at 9:31

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.