Key Insight
Well-designed forms minimize cognitive load and physical effort by using proper sizing, clear labels, inline validation, and forgiving input handling.
Key Points
- •Touch targets must be at minimum 44×44px with 16–24px spacing between fields to prevent mis-taps
- •Labels belong above inputs-never rely on placeholder text alone, as it disappears on focus and fails accessibility
- •Ask only for essential information; every additional field increases abandonment by approximately 5%
- •Use appropriate input types (email, tel, number) to trigger the correct mobile keyboard and enable browser autofill
- •Validate inline as users complete each field-show errors immediately near the relevant input, not in a summary at the top
- •Apply Postel's Law: accept flexible formats for phone numbers, dates, and addresses, then normalize internally
Guidelines
- ✓Place one primary action button per view; make secondary actions visually less prominent (outline or text style)
- ✓Use sentence case for microcopy and specific action verbs ("Save Draft" not "Submit", "Create Account" not "Go")
- ✓Group related fields visually (name fields together, address fields together) using whitespace or subtle dividers
- ✓Disable submit buttons only when semantically appropriate-prefer showing validation errors on attempt
- ✓Pre-fill known information (country from locale, city from zip code) to reduce typing
- ✓Show optional fields explicitly rather than marking required ones-most fields should be required
Want to learn this interactively?
Experience hands-on experiments and test your understanding.
🔥
Practice this topic
Active recall - strengthens long-term retention