Forms

by Zack on June 8, 2009

Forms

Forms were one of the first interactive elements on the web and have enjoyed a lasting popularity. Some forms are easy to use while others are confusing. This article takes a look at some form basics and shows you how to make your forms more intuitive.

In most areas of user interface design there are many opportunities to be creative. This isn’t one of them. Forms are boring. Your forms will never be beautiful. The best a form can be is good and the rules for making good forms are finite and easy to follow.

11 rules for usable forms

Forms will never be a positive part of your UI; the best you can hope for is neutral. So here are 11 simple rules to make sure your forms don’t distract from the other great parts of your interface.

  1. Use a descriptive title.
  2. Give each field a simple descriptive label.
  3. Group relevant fields together.
  4. Make required fields clear with an asterisk, font change, or color change.
  5. Space the fields evenly and align them properly to the labels.
  6. Put your fields in logical order. Don’t put email address between first and last name.
  7. Give your form consistent label text, label sizes, and field sizes.
  8. Make different types of fields look different.
  9. Make it easy navigate with the TAB key.
  10. Group similar fields to make the form easier to navigate.
  11. Create buttons with clear text and grouping.

Forms are boring, but even boring design elements deserve a little love. Make your forms simple and neat and you’ll never go wrong.

Leave a Comment

Your Comment

Your Comment Preview

Previous post:

Next post: