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?

  • Is there a reason this form is in the side bar and not in the 75% section? – adriennetacke Jul 29 '16 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? – Sourabh Rangdal Jul 29 '16 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 '16 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 – LoveProgramming Jul 29 '16 at 16:38
  • @LoveProgramming Ah, that makes sense. Do you have a mockup so that we can see what you're working with? :) – adriennetacke Jul 29 '16 at 16:39
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
    As I replied to others in comment, popup on top of popup is not an option – LoveProgramming Jul 29 '16 at 18:43

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.