0

One of the hardest UI things I tend to encounter is fitting a tall narrow rectangle with a short wide one. (In my current situation each rectangle is a sheet of controls.) It seems to be impossible to arrange it in such a way that looks nice and doesn't waste space. The only thing I can ever think of doing is floating them in their own windows. Currently I'm trying to put each one in its own tab control page, which helps a little since now they can overlap, but there's still a big empty space on at least one of the pages.

Is there a way to arrange them nicely? Is this a common problem with a common solution? If possible I'd like to avoid resizing them or separating them, but somehow I don't see avoiding that being possible.

enter image description here

Improve this question
2
  • What else is on the page besides the tall and short panel? Do you have a wire frame with the proportions of the rectangles relative to the screen? Without context there is no solution here, for almost totally obvious reasons.
    – tohster
    Commented Feb 26, 2015 at 5:19
  • Can you arrange a visual hierarchy between them? If one rectangle is pushed back so it's much less prominent than the other, they won't clash for attention so badly.
    – Racheet
    Commented Feb 26, 2015 at 10:15

3 Answers 3

Reset to default
1
  • Empty space is not necessarily a bad thing.
  • Less is more - Adding less important or unrelated content (third rect) is not recommended.
  • I think you need to review what type of content goes inside these rectangles and work with design elements such as type-hierarchy, information grouping to best suite the user needs.
Improve this answer
0

Another solution I've found is to, as I said in the question, put the two rectangles each on their own page of a tab control, but with the addition of having each page associated with its own size value. The tab control is then programmed to resize the window to the appropriate size for whichever control is currently being displayed. It's only slightly jarring to have the window suddenly resize when you switch pages, but the fact that the window is now correctly sized for its content is well worth it.

Improve this answer
-1

The best (only) solution that I tend to arrive at eventually whenever I have this problem is to add a third component of some kind to the form. The otherwise awkward gap is then filled in and the form no longer feels like it's wasting space.

enter image description here

Improve this answer
3
  • @tohster it's the only thing I've found that works in this situation. it's most certainly an answer to the question I was asking. if a better answer is posted I'll accept it. there's nothing wrong with answering my own question, especially if it's what solved it for me.
    – Dave Cousineau
    Commented Mar 3, 2015 at 22:54
  • @tohster the question is, what are options for dealing with the situation that you have the two rectangles that don't fit together? it may or may not involve using the space. why would you think that using the space is not allowed? it's not an optimal solution, of course, since you don't necessarily have anything to put there.
    – Dave Cousineau
    Commented Mar 3, 2015 at 23:47
  • rather than continue an unproductive discussion i'll remove my comments and (if you want to edit your question so i can remove the downvote) also remove the downvote. this certainly looks to me like a low-quality question but i don't want to spend the bandwidth debating it or unnecessarily penalizing you for it in case i'm wrong
    – tohster
    Commented Mar 3, 2015 at 23:55

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.