User friendly form design

There are two types of forms: User forms, e.g. for sign up, and Administration forms, to maintain data. They are quite different in purpose: The former must be simple and quick to fill in, whereas the latter should organize a lot of data in a reasonable way.

Guidelines

  • Simple is win.
  • Align forms vertically, one element below the other.
  • Never explain your form. If it is too complicated, redesign.
  • Skimp on lines and boxes. If you need them, something is wrong with your form.

A form element needs

  • Label. Above the field is faster, next to its right gives more overview
  • Field
  • Hint, only when useful, e.g. "may be a pseudonym"
  • Error message, e.g. "must not be blank"
  • Clear mark-up if it's a compulsory field.
    • Don't use asterisks
    • Label non-mandatory fields in grey
    • Have mandatory fields framed in a color

Structure

  • Highlight important elements, e.g. have a prominent Save or Sign Up button (using color, bold text, ...)
  • Fade out less important elements, e.g. present form hints in grey
  • For administration forms, you may split wide screens into two parts
  • Give Headings for parts of the form. This will help people to deal with them.

For your inspiration

Dominik Schöler