Improving websites and the way you build them
Twitter < < Back to home pageEpisode 5 :: 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 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
- Its 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 doesnt 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.
Comments
Leave a comment