I wanted to pass along the good word about a great book called Web Form Design. If you’re designing a website, good form design is essential. The book is over 200 pages- however, I wanted to share the “CliffsNotes” lesson in regards to alignment of text labels for a website form. This is the fast and furious version I put together (below), but go buy the book if you want the longer explanations and research/data behind the tips (i’m just trying to save you some time).

Label alignment is vital to form design and there are basic rules on when to use top-, right-, or left-aligned labels for input fields.

TOP ALIGNED
Use this method if you want to reduce form completion time for users. This design is quick and easiest for users to complete because the labels are close in proximity to the fields themselves. Users will quickly scan to see see the only direction their eye has to move to complete the form (down). The book goes into in-depth eye studies about top-aligned design- which prove it’s consistently the fastest type of layout / design to have users complete a form. Again, since it’s all compacted together, this makes it easy for users to see a clear path to completion.

RIGHT ALIGNED
This method is good users and the minimal vertical screen real-estate used. This method still allows for fast completion time, but not as fast as Top-Aligned.

LEFT ALIGNED
If you’ve got a form that you really want people to take special care and time in what data they are entering, Left-Aligned is the way to go. The amount of area the eye has to travel from the label on the left to the field on the right- this is the reason for this being the slowest of the options. However, if you have several ‘optional fields’ or ‘preference’ dialogs this is the best method to choose. Again, if you’re asking for specific uncommon data input (address information for example is NOT an uncommon data request).