Here’s a little secret that I’d like to share with you:  Most people just aren’t all that thrilled by forms. They  don’t like filling them in, they don’t like thinking about them, and they certainly don’t like the idea of having to design them.

by Caroline Jarret

If you already had to make some kind of form for a site or application you know that designing the right form it’s not that straightforward. If you ask to much information – users don’t like, if you don’t make them pretty -  users don’t like, if you don’t choose the right layout -  users get confused, and so on.

So why it’s so important to invest in forms? Usually forms are a way users register on your website, buy something, etc. All core tasks of a website. If forms are difficult to use, ugly or ask too much information, users won’t make the step of filling them. Users will just quit the task, get out of your site and move to a nice and friendlier one.

So I leave you here some guidelines to consider when designing forms.

1. Choosing the layout

Choosing the right layout may vary depending on the length of your form and the space available on the page. The type of layouts generally used are:

• Top aligned labels: this type of layout increases readability but requires more vertical space. If your form is long, choosing this type of layout may not be a good idea.

source: https://secure.wufoo.com/signup/1/

• Right aligned labels: this is one of the most used layouts nowadays. It allows an easy association between label and input field, however the labels’ readability is reduced.

source: http://www.linkedin.com/

• Left aligned labels: because labels are left aligned, their readability increases. That’s why this type of layout is used on forms that require users to pay extra attention on what is being asked. This layout has the disadvantage of being difficult to associate label and input field.

source: Gmail

2. Validation and errors

Validation and errors display is a must on every form, however you must be careful on how you present it. Regarding validation, presenting feedback as data is entered is usually the best approach. If it’s clear and concise, it provides a very good contextual feedback. But be careful to not overdo the validation. Use it only on fields with potentially high error rates.

Errors occur when the data entered is not all valid. Errors must be avoided by using inline validation and/or help tips. However they eventually occur, and when that happens users must clearly know where and what is the error and how to fix it. The best approach is to place a block on the top of the page with a list of the errors or/and, on the form, highlight the fields with errors (usually with a red contour).

source: http://en.wordpress.com/signup/?blog=1

source: https://www.linkedin.com/secure/register

3. Success or Error messages

One of Nielsen’s 10 Usability Heuristics is Visibility of system status. This heuristics says that “The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.” Success and error messages serve exactly the purpose of providing feedback to users about the form submission. For example, if you just bought something online you want to know whether your order was well submitted or not. That’s why that on the end of every form submission users must see some success or error message, usually accompanied by some illustration.

Besides the topics I cover on this post, there are other issues you must take into account, like, for example, form styling. In an era where design is so valued you mustn’t present forms like a set of text and boxes. You must beautify the form so the users feel the magic.

Useful resources:

• http://www.viget.com/advance/password-fields-are-annoying/
• http://dzineblog.com/2009/11/18-impressive-web-form-validation-scripts-to-enhance-user-experience.html
• http://www.lukew.com/resources/articles/web_forms.html
• http://www.stcsig.org/usability/topics/forms.html
• http://www.alistapart.com/articles/sensibleforms
• http://www.formsthatwork.com/Home
• http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/
• http://www.smashingmagazine.com/2008/07/08/web-form-design-patterns-sign-up-forms-part-2/