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.
Posted by Dominik Schöler to makandra dev (2011-11-29 09:53)