So I am trying to design a nice header. At first, I wanted to make an expendable search box but that is beyond my knowledge. But now I think a pop-up search box wouldn't be so bad. I know that there are people who hate pop-ups but this one seems justified.

And by pop-up search box I mean, when in the header you click the search icon it pops out a search box, that takes up the whole screen. You could press an X button at the top right to exit or maybe even click out of the search box to exit.

This would be implemented only for larger screens, on mobile it would be the usual menu search box.

Also what I think would be an advantage to this, is that you could set up a big Ajax search, with images and stuff. For reference, something like this - https://ajaxsearchpro.com/vertical-results-layout/ But a lot of tunning would be done.

for reference something like this - you could also make the background a bit transparent

Thanks for reading. The main question is, what do you think of this header search box implementation?

1 Answer 1


Welcome to the site!

but that is beyond my knowledge.

My non-UX remark is that you can take this opportunity as a trigger to expand your knowledge. All day I am arguing with my company's developers that education or implementation limitations should only rarely influence the design... ;-)

I very much like the idea to present the search results on a page of their own. There, you can display the search term as a reminder what was typed (and what might need correction when the expected results do not show up, as in cases of typing errors) together with a list of results.

In my view, there is little gain in putting the initial search box into a page/popover of its own. What if your user wants to copy something from the underlying page, modifying it somehow in the search box? In that case, putting the box on a page of its own hides the text the user needs to refer to.

The most basic design strategy I follow is to create a few alternatives (such as search-on-main-page vs. search-on-separate-page) and then think about the comparative benefits of them, in the light of your user and their goals. As I explained, I see a benefit of a search result page. But what is the benefit of a search-on-separate-page design?

All other things being equal, you can make the decision between design alternatives based on visual considerations. Does a single field on an otherwise blank page look appealing?

Answering these questions will get you to a design which is based on your users and their goals (you can give an explanation of the design choices referring to them), while at the same time defining your "brand" (your choices will reflect what you consider important and frequent).

After arriving at a design, the implementation should follow that as closely as possible. After all, computers are functionally equivalent to Turing Machines, which can compute anything ;-)

  • Thanks for the detailed reply. Appreciate it. And yeah I will do the same page search bar. Just a little different approach rather than an expendable search bar.
    – Lubaba Ell
    Commented Nov 18, 2023 at 14:56

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.