Form Fundamentals

Text inputs, checkboxes, radio buttons, and the like are the primary way a site gets any in-depth information about its users. Forms are almost inescapable in any interactive web application and an absolute constant in any situation where shipping, credit card, or identification information is needed.

So, with such a vast importance, it is critical to think about forms from a usability standpoint as well when developing web pages. Here are a few guidelines –

1.)  Don’t use them if you don’t need them. You might want all the information you can get out of a user, but resist this urge. Never intend on calling someone? Don’t ask for a number. Don’t ship items? Only ask for a billing address, and even then – only maybe. When it comes to developing web forms less is always best. Know ahead of time what you need from users and stick to only that.

2.)  Label placement is a trade-off between completion speed and understanding.

  • Use top aligned labels for information that is relatively mundane. Names, addresses, phone numbers, etc. can be entered rapidly by users. Aligning labels at the top allows for better scanning and thus quicker completion times and thus a happier user who doesn’t have to spend time wading through forms. This alignment naturally takes up a lot of vertical space and so isn’t best with long forms.
  • Right aligned labels have a stronger connection between label and field, but are less easy to just scan as the eye has to re-orient itself for each line. The completion times for right-aligned labels are relatively quick. They also require less vertical space than top-aligned labels but generally are not suited to anything more than just one, maybe two columns of fields and labels.
  • For information you want users to take their time on and understand, use left aligned labels. When you want driver’s license numbers, employer ID numbers, or anytime information is unfamiliar, slow down the user a bit with left aligned labels. Using this alignment tends to have a problem with label-field association as the label can be pretty far from its field if it’s a short word amidst some longer ones.  Fortunately, this type of label can be used sparingly.
Top Alignment
right aligned labels
Right Alignment
left aligned labels
Left Alignment

3.)  Know the difference between checkboxes and radio boxes

  • Checkboxes are for when your user can select one or more items
  • Radio buttons are for yes/no, this/that, white/black, male/female selections. Choices are mutually exclusive.

4.)  If you must use a cancel/reset action make it less noticeable than the primary action on the page. Pages should clearly indicate how one gets to completion, and by having the cancel or back button on the same visual hierarchy of the Go, Save, or other main-action buttons, you introduce some degree of confusion. Personally, I don’t like using these secondary actions at all because most web users are acquainted with the back button on their browsers and having them is just one more thing on a page usually taking up space.

5.) Why use so many *Required tags? This goes along with #1, but get rid of fields you don’t really need instead of indicating that they are simply not required. If you need a non-required field, denote that instead of indicating alllllllllll the fields that are required.

These are just a few guidelines, but most importantly when designing forms and form layouts, remember less is more. Faster completion times means you’ll likely get better data and have happier users. No one raves about good forms on a website, but people do notice when they have to fill out pages of information that doesn’t seem relevant.