enter image description here

So here there are 2 search buttons first one is quick search and second one is normal search. On this page there are data table with that search options as a column names for data table. Now the problem is that, user is not allowed to select option from quick search drop down and also the option from say company drop down and click on search button. User can select option from quick search and click on quick search button. Or he can select multiple options from second main search box only and click on search button. So I need a better layout to differentiate 2 search buttons.

One approach I could figure out is the tab layout. I have attached the image. But here the search has 4 rows. and quick search has only 1 row. So while switching the tabs, the whole page is not consistent. Hence need a good differentiation layout. enter image description here

  • 1
    I don't think it's a problem that the layout for the quick search is different from the regular search. The whole idea of the tabbed layout is supposed to be analogous to physical filing systems with tabbed folders. A person using a physical filing system shouldn't expect ever paper in every folder will be the same size and layout--if one folder holds small purchase receipts and another holds a high school diploma, the user shouldn't be confused. In the same way, by using the tabbed UI, each "tabbed area" doesn't need to be the same. The important thing is organizational clarity. – maxathousand Dec 27 '16 at 15:09
  • 2
    On a usability note I'd be very weary of the "clear" link - it is really close to the search button and could very easily be clicked by mistake. I'd also argue that it is very likely redundant. I'd expect users will want to potentially wipe/change a single filter but not all. – scunliffe Dec 27 '16 at 17:20

Usually, the standard search is defined by the basic search box and a minimum number of fields. By convention, advanced search is usually designed in the first section as a link adjacent to the regular search box. After the link is clicked, the basic search section can disappear, but tabs don't seem a good idea.



I'd assume quick search, because it supposed to be quick, should be more important element in the UI. Whether Quick/Advanced Search are tabs, switcher or links, quick should go first.


It seems you can't provide a text search, but rather Users need to be limited to a given set of options. Think what is the size of the set.

Assuming that:

  • this screen's main purpose is to find information
  • there's limited number of options

you can show the whole list of options immediately - in place, instead of making User to select from dropdown - this will let Users easier scan through possible presets

If not...

If screen needs to share its purpose between search and another content, keep the dropdown.

If you need consistency, for quick search use dropdown, for advanced search use popover or something like megamenu - it won't put the rest of the content lower

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.