by Brenna Mae

Created on: April 12, 2009

Getting a visitor to fill out a form can be a hassle, but having a good form layout can help lead the process along. With a better design, a form can yield more results and of course, results are the reason they're up at all.

Whether it be for comments, a contact form, or registration, there are a set list of rules any designer should abide by when designing forms to get the most out of them. In this post, I'll list five

general rules, although more guidelines should be followed depending on the specific type of form.

1) Vertical, not Horizontal

It has come to be the standard in form design to be vertical and not horizontal. Why conform to standards? Creativity is fine in other areas, but a designer should be a conformist when it comes to form design.

When a user wants/has to fill out a form online, they want it to be done as quickly as possible. Get the message sent, and be done. This can be accomplished by providing the user with a familiar interface.

Along with similarity, the vertical design makes it easy to skim the fields for what should be input and what can be skipped.

Any form other than this is generally considered bad form design.

2) Borders and Background

The current styling any browser gives to a form is certainly outdated, and any designer would be tempted to spice it up. This is a great idea, but the thing to remember is simplicity and legibility.

You can style a form just like any other element in CSS, either directly in the <input> tag with the style attribute.

3) Alignment, Proximity, and Spacing

Alignment can be created in two ways: using a table, or placing the text above, below, or to the right of the input fields.
Tables can be tricky, and often times don't provide a great sense of alignment because our eyes automatically try to align the text labels.

Proximity and spacing are the next two features to consider. According to the arrangement of the code, an outline for this can be done simply. Put each label and corresponding field in one paragraph, and all the paragraphs in the form. This way, the styling of the paragraphs define the proximity between the label and field, as well as the other form elements.

4) Simplicity

That being said, here's another guideline: simplicity. As stated before, visitors don't like to fill out forms. Have only fields that are necessary.
In some cases, such as in the event of a registration form, you'll want more information from the user. Different tactics can be done to get this information in a user-friendly way. Breaking a form down would be one option, but a better option would be to keep to the basics, and let the user fill in the unneeded information later.

Also keep labels, buttons, error messages simple. Standard, simple, and to the point should be every form's motto.

5) Extra Aesthetics

Keeping usability and simplicity in mind, it's ok to add extra details. Add special header images, illustrations, or borders and backgrounds to make a form stand out from all others.

Learn more about this author, Brenna Mae.
Click here to send this author comments or questions.