Getting forms right

Forms are an important part of any Web application requiring users to register. Registration forms are especially important because they're the first thing the user sees and not doing it right can (and will) make them leave before completing the registration. Here are a few tips for getting forms right:

Stick to the minimum

Remove all non-essential fields from your registration form. Think about what is absolutely needed for a user to be in working condition and then remove all the other fields. Consider putting a (non-intrusive) message on their first visit (or every visit) telling them to add more information about them -- give them a reason to do so, if it's useless for them, why are you asking for it? Very often, only asking for a user name, a password and an email address is enough. You may throw in the first and last name, but you rarely need more those 5 fields.

Keeping a registration form (or any other form for that matter) to the minimum speeds up the process and makes for a much more enjoyable experience: a good way to start a relation with a new user.

Keep it organized

Fields related to each other should be together while fields not related should be clearly separated. Group similar fields together and give them their own section. Filling the form will be more efficient and the user won't be confused. Think about how most fields are done and stick to standards, people are accustomed to standards and like familiarity. You wouldn't put a phone number field in between the first and last name, so think about the layout of your form.

Field navigation

This one is fairly simple but often forgotten. Don't mess with my focus and make sure the tab order is intuitive.

Don't mess with my focus

Do not change focus from one field to another automatically, the tab key is easy enough to reach, I can do it myself when I'm done with this field. Most forms do not change focus automatically, so when I'm done with a field, I press tab and it takes me to the next tab. But if you decide you want to help me and change focus automatically, I still press the tab key so this results in my skipping a field and having to go back using the much less pleasant Shift + Tab key combination. Just don't do it, it's less work for you anyway.

Tab order

Just keep it simple, from left to right, top to bottom (unless for a different culture). Don't skip fields, skip everything else (ex: help links, "Forgot my password" links, etc.).

Don't make me pay for your lack of parsing skills

This is most often apparent for phone number fields or postal code fields (Canada). Phone number can be entered using plenty of different methods: using parenthesis to separate the area code, using a dash or space to separate groups of number, or not using anything at all. In the end, a phone number is a series of digits so you can just remove every special character and format the remaining digits in any way you like (ex: (123) 555-1234). Don't force the user to enter the number the way you want, you can easily parse its input, just validate the field to make sure it has enough numbers (and not too many) to make a valid phone number. Most importantly, do not use more than one field for the phone number, 3 fields (one for the area code and two for the local number)  is overkill and you can do with one.

Postal codes suffer from the same symptoms. Don't force the user to put a space between groups of digits and don't use more than one field. Just make sure it's valid for the countries you support or trust your users and let them enter what they want (also a good way to deal with your users). Anyway, who's to say that the postal code they entered is valid? H0H 0H0 will pass most Canadian postal code validators, but it's not an existing postal code.

Validate user names using Ajax

If user names must be unique, don't wait until the user submits the form to make sure the user name is available, it's annoying especially since password fields have to be re-entered (unless the validation is done using JavaScript which it should in addition to be validated server-side). Instead, do as most major websites do nowadays and add a little button that will check if the user name is available via Ajax (you can even offer suggestions). It's convenient and more enjoyable for the user especially if your website has a big user base and every "cool" user name has been taken.

Michel Billard's profile picture

A web developer's musings on software, product management, and other vaguely related topics.