Web Form Design best practice

One of the major ele­ments of web design that often gets over­looked is form design. I will admit that I have been guilty in the past of neglect­ing this major part of web design. It is only recently since I have been read­ing the work of Luke Wrob­lewski that I remem­bered how impor­tant this is. One of the many rea­sons we don’t spend enough time design­ing forms is because “Forms Suck!”. No one likes fill­ing in a form. As a web designer it is our job to make the process as quick as pos­si­ble for the user.

Here are some of the top form design tips I have picked up:

1. Get rid of fields that are unessential
2. Keep your labels on top of your input boxes
3. Make your sub­mit (action button) button clear and left align with the form
4. Get rid of can­cel but­tons and allow peo­ple to save progress on longer forms
5. Use input masks to indi­cate what needs to be entered into the field
6. Help text should go under the input field  if required
7. Save peo­ple time and use smart defaults

Pay­ing atten­tion to the details of form design can have a very big impact.

Luke Wrob­lewski

What ele­ments do you think makes for good form design?