Looking to use a dropdown and checkbox in the same search field

Question

I am attempting to create a search based off multiple categories. The user should be able to select all that apply. They do not need to select one from every category.

One of the issues I am having is that one of the categories is location. Location will have 50+ options, so a dropdown would be ideal. However, it is inconsistent with the rest of the options that include checkboxes. The checkbox categories will have 5-15 options. Does this design still work and will the user understand that they do not have to choose a location? What are some other options that might be better?

Also, what is the best way of aligning these categories?

Thanks in advance!

Answer 1

This looks like you are creating a whole page dedicated to a search feature, and while you are able to show all the search criteria at the same time, the trade-off is that it is hard to fit the search criteria and results on the same page. A general rule of thumb is to reduce the amount of content on a page or form so as to reduce the amount of mental processing required by the user.

If I can use the example of travel websites, they try to provide a compact search UI element that only reveals selection options that the user chooses rather than showing everything available. This will also make it easier to lay out and align the various UI elements because you don't have as many to deal with.

I think when you have too many items that a user can choose from, it almost becomes easier for there to be a search or autocomplete feature so the user doesn't have to scroll through all the items when they probably know what they want to select. But again it is probably a bit difficult to provide any specific advice without some context of how this will be used and the type of information you want to display (or want the user to interact with).

Answer 2

Something like a search filter? You may try an approach that displays a dropdown for each category then allow user to add another row of dropdown if needed.

Catergory A
[Option 1 ][+][-]
[Option 2 ][+][-]

Catergory B
[None     ][+][-]

Catergory C
[None     ][+][-]