Sign-Up Form Patterns

by Luke Wroblewski July 9, 2008

Though, I've long advocated that Sign-Up Forms Must Die, for now they remain a staple of online life. Recently Smashing Magazine surveyed the landscape of sign-up forms by looking at patterns in 100 popular Web destinations and their registration forms . The data they extracted is a catalog of existing practices and as a result should not be considered design recommendations. However, it is interesting to see these trends and ultimately if they change over time.

  • the registration link is most often titled “sign up” (40%) and placed in the right upper corner of a landing page
  • registration forms tend to opt for a simplified layout to avoid distractions for users (61%)
  • most registration forms are one-page-forms (93%)
  • registration forms attract visitors by explaining the benefits of signing up (41%), 28% provide no additional information about benefits
  • titles of the input fields are highlighted bold (62%), rendered in color (20%), or plain text (18%)
  • right-aligned labels are used on 41% os registration forms surveyed, 30% used top-aligned labels, 29% use left-aligned labels
  • 54% of the forms surveyed required at most 5 input fields, 34% of the forms required 6-8 input fields, while 12% required over 9 mandatory input fields
  • 78% do not use asterisks to highlight required input fields
  • 62% of the forms had no optional fields at all, and 98% of the forms had less than 5 optional fields
  • 9% use a progress indicator to show to the users where they currently are and which steps are required
  • 86% of registration forms surveyed have input fields arranged vertically
  • 57% of the forms surveyed provided help text next to the input field, 10% of help text appears dynamically
  • Help text was most often placed: below the field (57%), on the right side of the field (26%), above the field (13%)
  • 30% of the forms surveyed displayed only an error-message at the top of the form (no input fields were highlighted), 29% had highlighted input fields with corresponding messages next to the input field, 25% used both error-messages and input fields
  • 22% used real-time validation with Ajax, 14% used JavaScript-error warnings
  • Only in 18% of the cases it was necessary to confirm the e-mail
  • In 72% of the cases it was necessary to confirm the password
  • 52% of the sites don’t use captcha
  • A Cancel button was used only in 8% of the cases
  • Left-aligned submit-buttons (56%), centered Submit buttons (26%), right-aligned Submit buttons (17%)

Complete articles on Smashing Magazine: