Luke Wroblewski: Best Practices For Form Design

Why does form design matter?

• How customers "talk" to companies online
• Commerce, access (membership), engagement
• Form redesign can change bottom line

Design principles

• Minimize the pain - nobody likes filling forms in. Smart defaults, inline validation, forgiving inputs.
  
• Illuminate a path to completion
  
• Consider the context - Familiar vs. foreign. Frequently used vs. rarely used.
  
• Ensure consistent communication - Errors, Help, Success. Single voice despite many stakeholders

Multiple Data sources

• Usability Testing
• Customer support
• Best practices
• Site tracking

Design patterns

• Information + Interaction + Feedback

Information

• Layout:
• Top Aligned - when data being collected is familiar; Spacing/contrast is vital; Require vertical space
• Right Aligned - Clear association between label/field; More difficult to scan labels; Fast completion times.
• Left-Aligned - when data is unfamiliar (advanced preferences); less vertical space; enables label scanning; slower input
• Ebay registration form redesign 2004. Had to re-report earnings ($$$)
• Indicate required form fields only if a few are required.
• Text > *
  
• Try to avoid optional fields.
• Associate indicators with labels.
• Field Lengths: Appropriate field lengths provide enough space for inputs (shorter for zip code, longer for address).

Content Grouping

• Use minimum visual seperations
• Use relevant groupings to organize forms

Actions

• Not all form actions are equal: Reset, Cancel, Go Back are secondary; rarely use!. Save, Continue, and Submit are primary actions. (small link vs big button). See eBay Cancel/Confirm.
  
• Distinction between actions is important.
• Keep continue/cancel/go back, etc. close together.
• Align primary action beneath primary form flow.

Help & Tips

• Useful when: Asking for unfamiliar data, recommended ways of filling in data.
• Don't overkill!
  
• Automatic; User-activated (? link); Pop-ups;
  
• Help visible and adjacent to a data request is most useful.

Interaction

• Path to Completion: Remove unnecessary barriers; Flexible data input (phone number formatting); Defaults; Alignment; Save progress.
• Tabbing: Remember to account for tabbing behavior; Use the tabindex attribute.
• Progressive Disclosure: Not all users require certain options; Prioritize; Advanced dialogues; Gradual engagement (geni.com);

Feedback

• Inline validation: Provide direct feedback as data is entered - use for potentially high error rates; User name picking; Valid input suggestions; Maximum characters;
  
• Errors: Get people out of errors as fast as possible; Clear communication - prominent error message; Way to fix problem; Use dual visual imagery (not just red text), especially on long forms;
  
• Progress: Give people feedback as actions load; Disable submit button upon submission;
• Success: Put in context, on updated page or revised form;
  

Wufoo
Form Assembly
icebrrg

Book (2008)