skip to main content

TAMU Webmaster's Blog

Information and insight from the A&M Webmasters

Conference Followup – Web Form Design

July 28th, 2008 by Erick Beck

I didn’t get a chance to attend this session in person, but people I talked to at the conference said it was a good presentation. I’ll therefore pull out some of the choice items from the session slideshows provided.

Consider forms a way in which your customers communicate with you. How you organize the structure of forms on the page matters. The proper structure for the form can decrease the time required for the user to fill it in by up to 10%. Make your design as painless as possible for your user.

Use natural content breaks to structure the layout of your page. As a corrolary, use clear and obvious separators between sections. If there is too much information being requested, don’t be afraid to break up the form over several pages. Just keep in mind if you do that you will need to show the user their progress and end destination.

Don’t overwhelm the user with visual noise. They are thinking hard enough to recognize what information to fill into each input area. Use the minimum amount of visual elements necessary to communicate useful relationships. The primary goal of each form is completion — don’t turn users away by making it so complicated or so visually chaotic that they decide it isn’t worth continuing.

For long and complex forms covering multiple pages, keep users informed of their progress (such as by providing bread crumb indicators. The bread crumbs should indicate not only steps completed but also steps remaining. Consider letting them know on the first page how much time they should expect to spend filling in the form.

Keep in mind that many people use the TAB button to navigate forms via keyboard. Consider using the <tabindex> tag to provide the proper order for form completion. This can become particularly important if the form spans multiple columns.

Form Layout
As stated earlier, form layout matters. Each layout has been shown to be most effective in different circumstances.

Top-aligned labels (above your input fields):

  • Used when data being collected is familiar to the user
  • Minimize time to completion
  • Require more vertical space
  • Spacing or contrast is vital to enable efficient scanning
  • Flexible for localization and complex inputs
  • Lead to fastest completion time

Right aligned labels (to the left of input fields, text flush right):

  • Establish a clear association between label and field
  • Require less vertical space
  • Make it more difficult to just scan labels due to left rag
  • Fast completion times
  • Form completion times cut nearly in half

Left aligned labels (to the left of input fields, text flush left):

  • Useful when data required is unfamiliar
  • Enable fast label scanning
  • Provide a less clear association between label and field
  • Require less vertical space
  • Changing label length may impair layout
  • Excessive distances between labels inputs forced users to take more time

Best practices summary:

  • For reduced completion times and familiar data input: use top aligned
  • When vertical screen space is a constraint: use right aligned
  • For unfamiliar, or advanced data entry: use left aligned

Field lengths also affect the layout of a form. Be sure to allow enough room in your field for the user to fill in their answer. But also keep an eye on the aesthetics of the form layout. Seemingly random length fields one after another can create distracting visual noise. Consider using a constant length for all form fields that is long enough to accommodate data entry into all of them.

If the majority of fields on a form are required, it makes more sense to mark those which are optional. If the majority are optional, then you should mark the ones which are required. Try to avoid optional fields — if the information is optional do you really need to be collecting it?

When errors occur in submitted data, provide an easy solution taking as few steps as possible. Hilight the incorrect fields so that the user knows immediately what needs to be fixed. Consider an AJAX solution that validates the field as data is entered instead of having to wait for submission.

If the form has been submitted without error, confirm the success for the user. Clearly communicate that a data submission has been successful and provide feedback as to the data submitted.

For large text areas that have a limited number of allowed characters, consider putting a javascript counter below the field that indicates the number of abailable characters allowed.

For forms that are large and complex consider eliminating fields that are optional, or which can be obtained later or inferred. For example, there is not need to ask for credit card type because the card issuer is defined by the card number itself. Leaving it in might simplify life on a shorter form, but for longer ones leave it off and pull out the value through back-end processing.

Monday, July 28th, 2008 Miscellaneous
Share this article

No comments yet.

Leave a comment