Form Labels: Top, Right or Left Align?

I've always consistently tried to use either top or right alignment, but it really goes deeper than just staying consistent. When design a form, the context of the input need to be taken into consideration first. Here are some questions I ask myself (in no particular order) while designing a form:

  • What task is the user trying to complete?
  • Is the form long or short?
  • Are there default values for any of the fields?
  • What data is essential to completing the form? What is not essential?
  • How will headers and sub headers be treated?
  • Will entry formatting or completion tips need to be incorporated?
  • How will error messages be handled?
  • How will required vs. optional fields be indicated?
  • How will primary and second action buttons be treated?
  • How much time do I have before the user bails?
  • What happens after the form is submitted?

While designing a form doesn't sound exciting, it is one of the most important aspect of web design. Designers usually want to focus attention on making the home page sexy. But as explained in this article, The $300 million Button, the placement of a button can literally cost or make you hundreds of millions of dollars.

Amazingly, there is not much written about web form design. The best resource I've found is Luke Wroblewski's book, Web Form Design: Filling in the Blanks. He gives some very thoughtful insights on forms and users.