0

Please see the image below which is search options (at the top of a page) to filter results in a table.

There are a lot of options (too many if you ask me but they're all required!)

Any suggestions on how I could make the search option look less overwhelming/complicated?

enter image description here

2
  • 1
    Are all the controls required to be filled for a search? Nov 6, 2022 at 13:52
  • No, they are all optional
    – Michael LB
    Nov 6, 2022 at 20:16

2 Answers 2

1

I would split it all into columns, with fields of the same width in each option. This will allow for a later easily applicable layout for the responsive version, as described in this answer.

enter image description here

1

First of all, categorize the search criteria, and group accordingly. Reasonable categories are best determined with the input of subject matter experts and users. Tabs may be used to expose different categories, however in that case only one category can be shown at a time. Whereas with the example below all categories can be revealed. (The categories below, of course, are guesses for the purpose of illustrating the controls and interaction.)


If the search filtering options are not always used, hide it initially and provide a "Search Options" toggle button to open a category:

search options closed

 


Once the search options are opened, or if the search options are used on every search, and if not all fields are required to filter, show the list of categories with open/close toggles and examples:

search options opened

 


Each category can then be opened to reveal associated search criteria, and a "Search" button presented:

search option category opened


It's not clear in the question, but if all fields are required to filter the search options, then don't use toggles instead show all categories with associated criteria grouped together—as if the final image had all the toggles open. In that case examples would be less important.

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.