Need some ideas to re-design this UI

Hi,

In my web application I have some kind of filter div where you can select territories and service teams, which are then shown in an other div in a Gantt.
I am not very pleased with the design but I also do not have a better idea.
As it is a business app it should stay straight and clean and not become too playful.
The color is corporate design so I need to use it (But maybe I can make it a little bit less aggressive as it is by now?

image

Does anyone has a nice idea?

1 Like
  • everything is too crammed together, it can’t “breathe”
  • the word “select” is superfluous
  • The heading doesn’t align with the content in any way, that makes it look off
  • instead of all/none, maybe add a checkbox called “all” that checks/unchecks all others when checked/unchecked
  • for the order I would go alphabetical, first the first column, then the second column, rather then spreading it out. Ie not
A B
C D

But rather

A C
B D

It feels more natural that way

1 Like

Yes that’s my biggest problem. Many of the users only have a 13“ laptop. So I cannot make it as big as I would like to.

True…

That’s a good hint. That’s a perfect example for „you do not see the problem if you already have taken 1000 looks at it“.

Hm this will save space but I am not sure if it’s self explaining that you can also deselect all by first selecting and then deselecting.

Hm, I would normally read from left to right and then go to the next line.

If your screenshot is actual size, then the text is much too small. I do not feel that the options are too crammed but are they too close together for touch screen users?

Consider customising the appearance of the checkboxes, including making them larger, for example like this (Google for other methods):

Consider putting a small corner radius on each panel to more clearly show the area of each panel.

Is the ‘None’ button needed?

Personally I don’t feel the heading needs to align to anything; in fact it may be slightly better if it doesn’t.

There’s nothing wrong with the corporate colour but in your screenshot it does not work well with that background image.

1 Like

Thanks for the accent-color. I didn’t know that before. I will definitely use it.
Backgroun image is the image of my desktop. It’s not part of the browser window so don’t worry about that :slight_smile:

I agree with a lot of what Remon said.

  • Line up the heading with the checkbox
  • add some padding in to give a little more negative/white space, especially between the columns
  • if using columns, then top to bottom, then left to right would feel more natural to me…
  • the all/none buttons are clunky and take up a lot of space. Moving to a select all checkbox will seem cleaner, and I’d even suggest thinking about moving it into the purple box to give the white box more space. There’s a lot of wasted space there.

Clearing out what’s needed will actually allow you to use a bigger font size while taking up less “space”.

2 Likes