Left Aligned Labels
No one likes to
fill out forms
Top Aligned
Field Length
* so make them
   "as" painless
   as possible

Right Aligned Label
Web Form Design
What form
will I 
choose?
List top competitors
Required/Optional
• Try to avoid optional fields 
• List at most 30% of fields (required/optional)
• Text is best description
• Associate indicators with label (not field)
Why does
form design matter?
Actions
Content Grouping
This is the main way customers "talk"
Users vs Businesses
 Best for when data being collected is familiar 
  • Minimal time to complete (mobile sites)
  • Requires more vertical space  :) 
  • Spacing is vital
  • Not good for long forms
Best for when there is a clear association 
between label and field 
 • Less vertical space (more room above the fold)
 • If labels are of inconsistent length, can be 
    hard to read
 • Fast completion time
Best for when data required is unfamiliar 
• Enables better label scanning
• Less clear association between label and field 
• Requires less vertical space than top aligned
• Difference in label lengths
Top Aligned
1. Short timeframes 
2. Familiar data input 

Right Aligned 
1. Limited verical space 
2. Simple data

Left Aligned
1. Limited vertical space
2. Complex data
If possible*, best to have
field length possible

Need enough room for
field completion
• Minimum amount of groups as necessary
• Limited styling of groupings
• Group relevant data


Path to Completion
Top Aligned
1. Short timeframes 
2. Familiar data input 

Right Aligned 
1. Limited verical space 
2. Simple data

Left Aligned
1. Limited vertical space
2. Complex data