Designing Effective Forms

Designing Effective Forms

Mike Hall | 8/09/2009

Filling in forms is one of the more complex interactions undertaken by users online and if you want a good completion rate, you have to design forms which are easy to fill in and don’t turn users away.

1. Break longer forms down into manageable chunks, using tabs, pages or a wizards.
2. Clearly show progress through longer forms.
3. Further break down individual tabs or pages in to meaningful field sets.
4. Design fluid, well aligned from. Poorly aligned forms can be perceived as more complex and harder to fill in than neater better aligned forms.
5. Minimise eye movement needed to complete form. Closely associate labels with fields, preferably with the label directly above the form element and left aligned. If this is not possible, right align the label to the left of the element.
6. Don’t expect people to remember things whilst filling in the form. If the answer to a question is dependent on the answer to a previously asked question or selected state, remind them of their selection when required.
7. Be consistent in terms of layout, as well as tone of voice.
8. Provide examples of what is expected, e.g. email@domain.com for an email address.
9. If you don’t need it, bin it! The simpler the form, the higher the completion rate. Keep it simple, unnecessarily complex forms are a real turn off.
10. Avoid forcing people to repeatedly switch between mouse to keyboard (where possible).
11. As with all online content, avoid abbreviations and acronyms.
12. Use white space to help ‘chunk’ forms, taking care not to use too many unnecessary visual elements.
13. Remove unnecessary distractions and page elements that will temp the user to leave mid form.
14. Clearly mark all mandatory fields.
15. Check the whole form once submitted and return all validation error messages at once, with clear in-page validation.

tags: Web Design