2

So I have a page where left sidebar takes 25% and the actual thing takes up 75% on the right.

Basically a user would select something from the main app and fill out the form in the left side bar and submit.

The problem is there are only 3 fields for the form. I currently put them at the top of the side bar, and I have 2 buttons at the bottom of the sidebar one for submit another for reset selection.

However, this would leave almost 1/2 to 2/3 of the sidebar blank. And I don't think I can easily fill up the space with say increase font size and/or increase margin between them..

Also I am putting the label on top of each field, this makes them fill up more space vertically but then they only take 1/2 of the space horizontally.

Any suggestion on how to improve the layout in this case?

15
  • Is there a reason this form is in the side bar and not in the 75% section? Jul 29, 2016 at 1:04
  • Please correct me if I am wrong, does the 25% sidebar is necessary and fixed for only those requirements you mentioned because if that is the only use with 3 fields, then you can go ahead and once user select one of the option, for that short time open the 25% sidebar, let the user fill the info and let them select one of the 2 buttons at the bottom and close the side bar, so that you can use the rest of the space (2) once user select something, instead of sidebar, show 25% drop down with 3 fields and 2 buttons. I hope this helps? Jul 29, 2016 at 2:36
  • Could you elaborate on the design of the whole thing? I think maybe we could work on something here :)
    – Wen G
    Jul 29, 2016 at 2:50
  • @adriennetacke the 75% is basically a google map with bunch of shapes, so I think having a separate form is better in this case Jul 29, 2016 at 16:38
  • @LoveProgramming Ah, that makes sense. Do you have a mockup so that we can see what you're working with? :) Jul 29, 2016 at 16:39

2 Answers 2

1

With what I understand so far, I think there's nothing wrong with the extra space. It is much cleaner and gives you more flexibility with the layout if you need to make any changes (add more fields, more options, etc).

If you're still concerned, I would try something like this:

Side Bar Form with few input fields

Make all of your elements a little bit bigger and leave some ample room between them. This takes up more space but probably doesn't feel as "empty" as your initial layout.

0

I think the form could be displayed horizontally, on the top or after the main app. A second option is to put it on a modal.

1
  • 1
    As I replied to others in comment, popup on top of popup is not an option Jul 29, 2016 at 18:43

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.