Tell me more ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.
up vote 3 down vote favorite
1

When I put a form into a main content area, I often find it looks awkward. In a typical content area of between 600-700px (like on this site), how wide should your form fields be? Contact forms or forms like this site do well with 100% width because they are expecting a fair amount of content, but for forms like login or registration, 100% width seems far too wide. Who is going to have a password that requires an input 700px wide? However, when I make narrower inputs, the remaining 200-300px gap to the right just feels awkward, especially when there is full-width content either above or below it.

Imagine that the following form is part of StackExchange with the current layout and width:

sample form

This gap feels awkward----------------------------------------------------------^

Does anyone else encounter this? How do you solve it elegantly?

share|improve this question

2 Answers

up vote 4 down vote accepted

The layout feels uncomfortable because it is unbalanced, like putting a filing cabinet on one end of a see-saw and nothing on the other.

Probably the simplest solution to this is to put the labels in line with their respective fields, instead of above them. Since we're not in a sidebar, there's no reason to be parsimonious with horizontals. Left-align the fields but right-align the labels, creating a strong vertical to tie the elements together.

Form Layout

Place the implied or actual (if you provide a differently-colored background to that div) rectangle in the horizontal space so as to achieve visual balance, and you have something that lives in the space without seeming lost in a sea of pixels.

share|improve this answer
1  
+1 - This might end up being the direction that I go. I prefer having the labels on top, but that doesn't seem to work visually with this particular form, so this could be the best option. – Virtuosi Media Jan 4 '12 at 5:39
Glad to help. We'd love to see you around GD more often. (hint, hint) – Alan Gilbertson♦ Jan 4 '12 at 6:55
1  
+1, especially for unbolding the labels. – jontyc Jan 4 '12 at 7:46
3  
@VirtuosiMedia I consciously work at not letting my personal preferences or likes get in the way of what a design needs. It's not something that comes easily to this highly-opinionated soul, but I've improved a lot over the years. :-) – Alan Gilbertson♦ Jan 5 '12 at 0:47
@AlanGilbertson - It is a tough skill to learn. ;P – Virtuosi Media Jan 5 '12 at 3:24
up vote 1 down vote

Double them up.

Name [ ] Username [ ]

Company [ ] Email [ ]

Password [ ] Password Again [ ]

If form fields don't work at 100% width I always double up the fields so that they fill the content and are still aesthetically pleasing.

share|improve this answer
2  
+1 - I see what you're saying and it's a decent idea visually. However, it makes the form harder to read and fill out because you have to travel back and forth across the screen. It can work for some parts of a form like an address or a credit card section, but grouping some of the fields in this form doesn't quite seem logical as the groupings are somewhat arbitrary. Also, from what I can tell from what I've read, the best converting forms are straight up and down. – Virtuosi Media Jan 4 '12 at 5:36

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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