Search panel in condensed area or listed

Question

I have a web form where I show filters and result pane.

For the moment (1st picture), all filters are grouped into an area, like in 2 vertical columns. I use chosen for select lists.

The suggestion (2nd picture) could be to put all filters in horizontal line, and could take form of drop-down. When user select an item in the dropdown, the selected item would appears just under filters.

The problem is that I think that the vertical menu and the new horisontal are too mutch.

Any ideas to help me to decide? Improovments to suggest?

Thanks

Answer 1

If the logic allows, split the interface into three columns.

Alternatively spread filters horizontally and group frequently used filters on one side.

Answer 2

For me, solution 1 is better

Your first solution will likely prove more usable. People tend to scan labels, and with your second approach they cannot benefit from that, they will have to keep reorienting on a dropdown each time.

It's simply impossible to tell what is behind the dropdown if there are no descriptive labels. It's also difficult to find specific items back because you have no label that identifies groups of items. Your users will have to keep rechecking what's underneath each dropdown until they find what they need.

Yes, solution 2 takes less space, but will take more of your users' time. The benefit of solution 1 is that it's quick to set-up and alter if necessary, as it requires less clicks overall and can be scanned relatively easy.

You can opt to collapse the filter once it's active to give users more room for their primary task.

Answer 3

I find second view more comfortable. Placing filters inline horizontally takes less space and more for results. And yes, you can still use labels.

My two cents on "People scan pages". They do, but try this questions:

• What kind of app is this? Is it enterprise?
• Are users likely to find what they need using filters and without using filters at all? How important are your filters?

If its enterprise and you are going to display huge amount of data, users will need to go trough training (assuming they should already have some technical knowledge), anyways you'll use same pattern in other screens where people will get familiar with interface. If most important data is on top (ex. notifications), filters are not that important and horizontal should be ok. Two (or even three) vertical columns could work out for a web shop when displaying products.

Hope this helps you ask yourself more questions and weight out the solution.

Answer 4

Out of two options you provided, 2nd one looks simple & space efficient.

Ref below screenshot.

I made few changes to your design. 1. Add proper label for fields. 2. For multi choice fields, you can simply show no. of conditions applied in that particular field to show how much conditions applied.

Your question seems confused a bit. Top section has filter as its heading & search as its CTA button. If it is a filter, showing instant result is best option or if it is advance search option, you can have that search button.

Answer 5

As per the scenario you have mentioned, option 2 suits best. As of the horizontal filters are in trend right from e-commerce to all sorts of enterprise applications, and users are habituated to it. if its an enterprise application you have a plus point and you will spend less time in training users.

Also, it provides large amount of space, if the data in result section is more. Else you can use it to display some other related information.

Check the following link might that help you, https://baymard.com/blog/horizontal-filtering-sorting-design