Web design tips: Best practices for designing forms

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

VerticalIt 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:

Wrong:

Horizontal

Wrong:

Partly Horizontal

As you can see, the forms above look confusing and unorganized. Sure, the user could figure them out with ease, but even this much lack of organization makes for an ugly form.

2. Borders & Background

Border and BackgroundThe 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, or like I’ve done below.

The styling below says that for every input element in a form, create a 1px solid border with the color of #ccc, and a background with a color of #f9f9f9.

form input{
border: 1px solid #ccc;
background: #f9f9f9;
}

I’ve just used simple grays, but any colors can be used. Be sure to pay attention to text color, contrast between the border and background, etc. The goal is to create a bit of aesthetic appeal while keeping usability in mind.

3. Alignment, Proximity, and Spacing

AlignmentAlignment 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.

I’m going to put the text labels above the fields, but below or to the right is fine too. If the text is not on the left, the input boxes will line up to the left, creating alignment on both of their sides.

Proximity and spacing are the next two features to consider. From the way I have this form coded, we seem to already have a good general sense of these two. What I’ve done is put the input field and appropriate label in a paragraph, and a separate paragraph for each couple.

A simple line break <br /> is the only thing separating a label from it’s appropriate input field.

<form action="" method="post">
<p>
<label for="firstname">First name:</label><br />
<input type="text" id="firstname">
</p>
<p>
<label for="lastname">Last name:</label><br />
<input type="text" id="lastname">
</p>
<p>
<label for="firstname">Email:</label><br />
<input type="text" id="firstname">
</p><p>
<label for="lastname">Website:</label><br />
<input type="text" id="lastname">
</p>
<p>
<input type="submit" value="Send">
<input type="reset">
</p>
</form>

SpacingLet’s work on the proximity and spacing a bit more. We still want the field label to be close to the input field, but we should add a bit of padding. A bit of tweaking to the paragraph element’s CSS and we get a more customized spacing situation.

Our form looks perfectly aligned now, and is overall visually appealing. Because we used all text fields, our fields are automatically the same width. It doesn’t always work out that well though. If you add a textarea, it’s likely that the default size is going to align well.

It’s easy to adjust the height and width of form fields with CSS, just as you would with any other element. The following CSS below would made every input element exactly 250px, so you don’t have to worry about percentages and default HTML size attributes.

form input{
width: 250px;
}

4. Simplicity

It looks like we have a pretty good form design going on now, but there are still a few more points to make. Although I won’t be altering the example form above anymore, I realize that anyone reading this post could be creating a form for any reason.

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. Below are some excellent examples of designers who made adding visual elements work for their forms.

Web Designer Wall

Swifr

Alex Cohaniuc

6 Comments

  1. Gillian April 1, 2009
  2. iPollesion April 1, 2009
  3. Dayna April 2, 2009
  4. Andrew April 2, 2009
  5. Kayla April 3, 2009
  6. Web Design Company India June 29, 2009