Here is a checklist of recommendations for form design. I extracted this from Luke Wroblewski‘s excellent presentation on Best Practices For Web Form Design; I took my favourite points, edited them, and arranged them into categories for easy reference. I use this checklist when designing and reviewing forms. For best results, view the original presentation and commit it to memory first.

Individual fields

Form label alignment

• For reduced completion times & familiar data input: top aligned
• When vertical screen space is a constraint: right aligned
• For unfamiliar, or advanced data entry: left aligned

Field lengths

• When possible, use field length as an affordance
• Otherwise consider a consistent length that provides enough room for inputs

Validation

• Employ flexible data entry
• Use inline validation for inputs that have potentially high error rates
• Use suggested inputs to disambiguate
• Communicate limits
• Avoid changing inputs provided by users

Help & Tips

• Minimise the amount of help & tips required to fill out a form
• Help that is visible and adjacent to a data request is most useful
• When lots of unfamiliar data is being requested, consider using a dynamic help system

Field groups

Layout

• Use the minimum amount of visual elements necessary to communicate useful relationships
• Consider tabbing expectations when laying out forms

Selection Dependent Inputs

• Maintain clear relationship between initial selection options
• Clearly associate additional inputs with their trigger

Actions

• Avoid secondary actions if possible
• Otherwise, ensure a clear visual distinction between primary & secondary actions
• Align primary actions with input fields for a clear path to completion

Form

Progress

• Illuminate a clear path to completion
• Map progressive disclosure to prioritized user needs
• Provide indication of tasks in progress
• Disable “submit” button after user clicks it to avoid duplicate submissions

Success

• Clearly communicate a data submission has been successful
• Provide feedback of data submitted

Errors

• Clearly communicate an error has occurred: top placement, visual contrast
• Provide actionable remedies to correct errors
• Associate responsible fields with primary error message
• “Double” the visual language where errors have occurred

Tags: usability, web development