This document discusses ways to increase form conversions through good form design. It covers best practices for label positioning, avoiding visual noise, not using tables for layout, comment question microcopy, and bonus coding tips. The full video providing additional details on these topics can be found at the listed URL.

1. Episode 5
Forms : part two:
Increase your conversions with good use of form
Video at:
http://www.mediasurgery.co.uk/video-episodes/forms-part-2-increasing-conversions-with-good-use-of-forms
5 1/10

2. 1. ) Label positioning
Right aligned
Quickly completed
Work well if little vertical space
Not suitable for long labels
5 1/15

3. 1. ) Label positioning
Left aligned
Labels are thoroughly read
Work well if little vertical space
Not suitable for long labels
Slower to complete
5 2/15

4. 1. ) Label positioning
Top aligned
Quickest completion times
Labels are very flexible in width
More vertical space
5 3/15

5. 1. ) Label positioning
Floated right
Avoid – people in the western
world read from left to right
5 4/15

6. 1. ) Label positioning
Top and centred
OK for short forms
In UE it fits into design
Slower completion rates
Increases vertical height
5 5/15

7. 2. ) Relationships and blurring
5 6/15

8. 3. ) Add address and telephone number
If small business
Increases users confidence
Not always required
If large business could
mean a lot of calls
5 7/15

9. 4. ) Avoid visual noise
5 8/15

10. 5. ) Don't use Tables for laying out forms
Use floats and display:block
5 9/15

11. 6. ) Do you really need a cancel / reset button?
5 10/15

12. 7. ) Labels before form elements
5 11/15

13. 8. ) Comment question : Microcopy
Use inline validation with short, straight to the point language
Can also use header message with the longer messages if possible
If tricky question - use an example – 1234 4321 1234 5431
Javascript highly recommended for long and hard to complete forms
But for instance - UE - a typical user will have filled in a blog
comment section many times. On to do list.
Make it as easy as possible for the user – for instance space in
between credit card numbers. Its the web developers job to figure
out the problem not the user!
5 12/15

14. 9. ) Quick bonus coding tips
5 13/15

15. Resources
Web Form Design – Filling in the Blanks – Luke Wroblewski
5 14/15

16. What now ?
Please Tweet about the episode and follow UE on Twitter
Sign up to the RSS feed on the left
Video at
http://www.mediasurgery.co.uk/video-episodes/forms-part-2-increasing-conversions-with-good-use-of-forms
5 15/15