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

• Check smashingmagazine.com Show archive.org snapshot on form usability.

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

• We build reliable cloud solutions with Infrastructure as code
• We are experts in security, Linux and databases
• We support your dev team to perform

Read more Show archive.org snapshot