What's your "state" of mind?
Ok, we all know there's a special place in hell for people who design bad forms. You know the kind I mean, where they give a six inch long line on a piece of paper for your zip code, but only give you a two inch wide space to write in your address. Everyone's been frustrated by these kind of forms and I THOUGHT the web might do something to end this. Unfortunately, it seems that the same people designing those bad paper forms have moved over to the web.
If you've been doing much running around on the web lately, you'll know that an awful lot of people are asking for you to fill out some form to get access to their website, register software or whatever. I happen to have a quite LONG street address and I've found that a large number of these forms just won't take it. Usually, when a form has this restriction it also seems to allow only one line for the address and gives no place to put an apartment number. I find this pretty annoying because the post office in my area refuses to deliver mail if the address isn't complete.
Another very common user interface problem with these web forms is the pop-up menus used for entering the state abbreviation. If you happen to live in Texas, when you come to one of these pop-ups you can't just type TX and move on. Because the pop-up is only sensitive to the first character you type, you end up with TN. The only way to get TX into this field is to go to the mouse, pop up the menu and scroll down through all fifty states to Texas. I find this kind of annoying, there's no real reason to have a pop-up menu for a TWO CHARACTER item. Even the slowest typist in the world can type TX faster than going to that pop-up menu.
People also persist in doing inconvenient things to the user to get data formatted right. Some web pages ask for telephone numbers and force you to type the area code, 3 digit prefix and the other 4 digits in three separate fields. This is much harder than just typing in the number into one field and forcing these field sizes isn't too friendly to people from outside the US who want to ender their phone numbers. I've seen people do the same thing with zip codes (a 5 digit field plus another 4), this is also bad for people outside the US who's postal codes have different formats.
So what are my suggestions for happier web forms?
1. Ask the person what country they are from, a pop-up menu may actually be a good idea here, with the default setting being where you get the most number of people from. Knowing the country first will let you put up forms that will help insure you get the postal codes and phone numbers right later.
2. Ask the person for their zip code . By using a very simple database the post office provides, you can easily fill in the state abbreviation and city name from that. This will help prevent errors in your database like inconsistent spellings of city names, or incorrect state abbreviations. I've analyzed databases before that had literally dozens of miss-spelled or oddly abbreviated versions of even fairly simple city names like Chicago or Los Angeles. Enough errors of this kind can make a database almost useless and these errors are very expensive to correct. Almost everyone knows their zip code, you can't misspell it and if it's entered wrong the user will immediately know in the next step because the wrong city and state name will appear. For people outside the US, you can do the same trick with other countries postal codes, or if you don't get a lot of foreign visitors you can use a set of forms where people enter this information by hand.
3. After getting their Zip code, display a form with the city/state/zip already filled in. Make sure this form has at least TWO address lines of reasonable length (32 characters minimum) and make sure the field on the web page is wide enough to hold all the characters without scrolling. One thing that may help with keeping your database clean would be to handle post office box numbers specially, asking people to check a "this is a PO-Box number" checkbox and then enter just the box number. This will prevent you from having dozens of different PO-Box abbreviations in your database. I strongly suggest that fields for phone numbers, be a single wide field for the whole number, without requiring any special punctuation. You may want to have a separate field for the "extension" number.
4. Once you have all the information, you should verify it, do a little reformatting and then present it back to the user for a double-check. Some things you will want to do are strip off leading and trailing blanks, remove any double spaces (ie: if someone puts two spaces between words instead of one) and check to make sure the user hasn't changed the state abbreviation to something illegal. Phone numbers should be stripped down to nothing but digits, then examined and properly reformatted. US phone numbers are easy to do this to, all other foreign ones follow simple patterns too. For US numbers you can do a consistency check to see if the area-code of the number matches the state the user says they are in.
5. Do a duplicate-check in your database, compare things like names, E-Mail, Phone numbers and so on. For security reasons you may not want to report the results of this check to the user, but you always want to run this check and possibly allow a system operator to eliminate duplicates. Because people change computers, forget passwords and re-install software, they may frequently sign-up on your site more than once. You don't want to collect duplicate entries. Sometimes people enter their addresses a little differently each time, so they are a poor field to compare against, check name, phone number, e-mail and zip-codes can quickly turn up close matches.
These are all pretty simple techniques and will help make your forms quicker to fill out and less frustrating for the user. They will also greatly reduce the amount of bad or inconsistent data in your databases, making them faster and cheaper for you to use. This is particularly important if you plan to use the data for sending actual physical mail.
Of course, what we really need is a browser function where you can enter all this information once, and just click a button to send it to a properly equipped web page, but that would be a little too simple I suppose...