1

I have a really small UI control that looks strange next to a very large one.

enter image description here

enter image description here

This small control is what allows me to select the data to present in the list view.

The button on its right, opens a selector to allow me select another object.

It looks a bit weird to have such a small control next to a very large one.

I tried the following but without success:

  • add a label before it but it isn't aligned anymore with any of the corners (looked better)
  • expand it to full width, terrible because the button to open it is at the very right of the window

Please note that I have no way to change the design of control in itself.

Any suggestions?

2
  • To be honest I can't even tell which control you're talking about, the little dot inside a circle? What's the large control? I think if you just had a better icon for choosing the main tex, it would already be a lot clearer.
    – Big_Chair
    Aug 16 at 16:15
  • @Big_Chair I've added a picture explaining the different controls, the little dot inside a circle is the button that opens a selector to choose another object. As for the icon, this is expected, it's the actual texture being selected, it looks weird because it's a huge one.
    – aybe
    Aug 16 at 18:05
0

I have the beginning of an answer to this problem.

Adding a search field already makes the overall look less weird:

enter image description here

The whole space is now occupied and it doesn't feel that something's missing on the UI.

0

Taking a page from Spotify's design, which also shows a type of heading mixed with a long list:

Spotify's playlist view

I don't think there's anything wrong with making the selector a little bigger. Perhaps a font size of 24 would do the trick to make the header stand out a little bit, and therefore still a dominant object/first thing people see on the page, ensuring they're on the correct list.

I believe this is also a Nielsen Norman Group UX heuristic: recognition rather than recall. By making the font size and alignment the same, I think you're making users think it's part of the list; and even if they do know it's not part of the list, they would have to remember it each time they scroll down the list. That's not ideal.

If resizing the font size doesn't work out during the tests, maybe add some padding to that selector box. Maybe then add a label just before it, and align both of them to the right to align to the right grid and maintain a special visibility.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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