Bad Forms – WHY?

Forms.

So easy to get right, yet so often poorly constructed.

Today I came across this gem with a contrast ratio of 1.26:1, as in barely above 1:1 which is invisible. Gray on white should always have contrast checked.screen shot of a form fields with light gray text on white

Other form infractions include

  • Using placement text as labels. Once a user starts typing, it’s no longer clear what information was requested or what format the data should be in.
  • When tabbing through the form, there is no visual indicator when you’re on a select field or a button.
  • I just don’t see the point in trying to reinvent the form experience. In this case, they’ve chosen a skeuomorph design, attempting to recreate a paper form experience digitally.
  • I like the address suggestion but it’s not possible to tab to it and select anything.screen shot of the address field with a drop down of address suggestions
  • I could not tab through the t-shirt size options and select anything using the arrow keys, even though these were coded as radio buttons.
    screen shot of the t-shirt form field with circles for each sizeUsing the browser inspector, I unhid the radio buttons and then could tell that after I made a selection, I was tabbing through the radio buttons.
    screen shot of selected radio button for shirt size
  • It was really hard to tell if I could tab to the submit button without visual indication. Adding a button focus style with the inspector showed that it was getting focus.

So much has been written about the IA of good forms, the proper markup of form elements and form usability, it’s amazing to me designers don’t follow a known pattern for an account creation process. It’s not the time to get fancy.