I'm redesigning a filter feature for my company, and I'm running into a problem where I have a surplus of space relative to the small amount of UI elements (see image). I initially thought about just spreading out the elements, but that disrupts the whole Gestalt thing about proximity.
Then I tried bracketing it on either side with space, but it just looks odd. Any ideas on how to mitigate this? Thank you! enter image description here

2 Answers 2


New UI with Create New Filter moved

My Assumption

The green plus icon would allow users to add and save new filters; adding to the three that are already there.

My Recommendation

I would move the Create New Filter UI to the empty space. It seems to me that adding any more than 3 filters would cause their space to crowd - this would make room for more filters on the left. As well, since you are using dropdowns then it makes sense to put it in the open space so that you don't have to cover current filters with a dropdown menu while making a new filter.

  • Thanks Mike W! THats a great suggestion, will give that a try. Thanks for the detailed answer
    – Conor
    Sep 21, 2018 at 21:05

You need to design not just one view, but to take into consideration of many other factors as you are just solving the problem of layout for a specific state.

For example, this looks like a desktop view but will you have other problems when it is displayed on a mobile device?

If we just focused on desktop view, how will this look when there are no filters created? Or when there is one default filter. Basically this is your empty state when you expect this area to be empty.

Another example is your "full state", where you have added many filters and the content overflows the space available (which means you might have a scroll bar on the right hand side).

I think the best way to tackle this problem is to look at all the combinations of designs and states required before focusing on this specific issue.

  • thanks @Michael Lai! This will be solely a desktop experience. Your consideration of empty states is an important one, and something I will be sure to keep in mind. Thanks again!
    – Conor
    Sep 27, 2018 at 14:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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