Web Form Design Best Practices

It was not a very sexy title for a Tech Talk. But i was curious and it turned out to be an interesting talk. Little things that used to seem (to me) just a pure style preference actually would make a big difference in user experiences.

Luke Wroblewski is a free lance web designer and he worked on multiple redesigns for Yahoo and E-Bay. So he had real world data to back him up.

Here are a few things that I found interesting from his talk:

1. Top, Left, Right Aligned Form Labels
Top aligned form layout is the fastest. User takes the least amount of time to fill these up. So it is best for simple/familiar informations. If you want user to stop and think when filling out the form, then depends on how much time you want the user to take, use either Left Aligned (Slowest) or Right Aligned (in between of Top aligned and Left aligned)

2. Identify optional versus required fields
Minimize the special mark and notations to indicate a field is optional or required. So if there are more required fields than optional, then mark the optional field instead. Keep all the special mark in one vertical line (end of the input field box on the right, for example) so user can single out all the different fields in one glance

Leave out optional field all together. Don’t make it harder for users, no one likes filling out forms in the first place, keep it short.

3. Form Flow
Try to imitate real life conversations, for example, if you go in to the bank to ask for a loan, the clerk will engage you in a conversation first, why do you need a loan, what kind of loan, etc. He won’t start by asking for your name, gender, userid, etc.
Take a look at Yahoo’s new Sign in page for some idea on how people are adapting to this new approach.

And here is the complete presentation in pdf format: Best Practices for Web Form Design