What do you think of pop up/full screen search box?

Question

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 -

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

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 ;-)

Answer 2

In my opinion, you are taking user to a completely new screen (or view) on click of a search bar which, by user's mental model, should let him/her type there itself, so that after finishing the search input and clicking enter/icon, user's eyes knows exactly where the data is going to get updated and displayed on the page. Moreover, the light background screen changes to dark when search is clicked and back to light after entering the search text. This change of contrast to extreme would hurt my eyes :)