Forms part 2 : Increasing conversions with good use of forms

1.) Label Alignment

Right Aligned

• Plus: Completed quickly
• Plus: Work well if little vertical space
• Negative: Not suitable for long labels

Left Aligned

• Positive: User reads thoroughly
• Positive: Works well if little vertical space
• Negative: Not suitable for long labels
• Negative: Slower completion times – trade off with reading thoroughly if you want the user to take and submit forms error free

Top aligned:

• Positive: Fastest completion time
• Positive: Labels can expand
• Negative: More vertical space – makes the form higher

Floated Right:

Avoid – users read from left to right and not vice versa

Top and centred

Used on the Usable Efficiency site due to the design being centred on a pivot point. Wouldn't advise unless a short form with few fields.

2.) Relationships and blurring

Taken from an article written by Garret Dimon ( Apologies about pronunciation) on Digital Web Magazine

If you can see a relationship when your form design has been blurred, thats a good thing as it shows there is a clear path to competition.

3.) Adding an address and telephone number

Doing this gives the user more confidence in filling out that form, by giving the impression of a more substantial and valid business. Its suited to small businesses that sell a product or service and not a large corporation in which it could result in a large amount of phone calls and therefore resources required.

4.) Avoid visual noise

By removing noise such as lines and zebra rows it allows the user a clear path and little distraction from interacting with the web form. White space is much better than eye candy and noise.

5.) Avoid use Tables for form layout

There are no reasons for using tables for laying out html forms. They will blat the code and make layout inconsistent, as well as making them less accessible. Use floats and display:block.

6.) Do you really need a cancel or submit button?

Probably not required, how many users are going to fill in the fields then reset them? I think very few. It adds distraction to forms and provides no real use.

7.) Labels before form elements:

You want the labels to come before the input for accessibility reasons.

8.) Microcopy / Javascript tips:

• Use inline validation with straight to the point language.
• You can repeat the inline message a global message above the form with more lengthy descriptions is desired. Keep them consistent though.
• If its a tricky question provide an example of what the user has to enter in the field. They can then compare with what they have entered
• It's the web developers and not the users job to process details such as credit card numbers with or without the spacing. Make it as easy as possible for the user to enter their data.

Coding tips:

Theres no need for the type=”text" so

< input type=”text” name=”name” id=”name” value=”” />

Use:

< input name=”name” id=”name” value=”” />

With the type it defaults to text input

Internet Explorer 6 / IE7 - bug that doesn't hide negatively indented text

Add this to your css property:

 #submit { ....continued ..... color:transparent ; text-transform: capitalize; }

Resources:

These short tutorials only cover the tip of the iceberg. I highly recommend Web Form Design – Filling in the Blanks by Luke Wroblewski.