Build Better Forms (Please)
April 21st, 2009A simple challenge to all developers building user interfaces: think for a moment before making a form overly complicated. The form below is for reverse phone number lookups:

This form contains three fields for what is basically one thing: a telephone number. There is some JavaScript in there that bounces focus from one field to the next as you type, which is convenient unless you need to go back to edit the last field.
You know what this form really does? It offloads data formatting / parsing work to the end user. It is trivial to write server code that extracts only the digits from a free form telephone field. There is no good reason to make the user think this hard to enter a phone number.
If you build forms, especially web forms, you need to watch Luke Wroblewski’s session from MIX09. Despite the unassuming title of "Web Form Design," the session contains a lot of tips about designing forms with users in mind:
http://videos.visitmix.com/MIX09/C17F
Luke’s guidance is infinitely more useful than this little rant of a post and is backed up by data.

