forms part 2 : increasing conversions with good use of forms
If you can't read please download the document
TRANSCRIPT
1/10
5
Episode 5
Forms : part two: Increase your conversions with good use of forms
http://www.mediasurgery.co.uk/video-episodes/forms-part-2-increasing-conversions-with-good-use-of-forms
Video at:
5
1. ) Label positioning
1/15
Right aligned
Quickly completed
Work well if little vertical space
Not suitable for long labels
5
1. ) Label positioning
Left aligned
Labels are thoroughly read
Work well if little vertical space
Not suitable for long labels
Slower to complete
2/15
5
1. ) Label positioning
Top aligned
Quickest completion times
Labels are very flexible in width
More vertical space
3/15
5
1. ) Label positioning
Floated right
Avoid people in the westernworld read from left to right
4/15
5
1. ) Label positioning
Top and centred
OK for short forms
In UE it fits into design
Slower completion rates
Increases vertical height
5/15
5
2. ) Relationships and blurring
6/15
5
3. ) Add address and telephone number
If small business
Increases users confidence
Not always required
If large business could mean a lot of calls
7/15
5
4. ) Avoid visual noise
8/15
5
5. ) Don't use Tables for laying out forms
Use floats and display:block
9/15
5
6. ) Do you really need a cancel / reset button?
10/15
5
7. ) Labels before form elements
11/15
5
8. ) Comment question : Microcopy
Use inline validation with short, straight to the point language
If tricky question - use an example 1234 4321 1234 5431
Can also use header message with the longer messages if possible
Javascript highly recommended for long and hard to complete formsBut for instance - UE - a typical user will have filled in a blogcomment section many times. On to do list.
Make it as easy as possible for the user for instance space inbetween credit card numbers. Its the web developers job to figureout the problem not the user!
12/15
5
9. ) Quick bonus coding tips
13/15
5
Resources
Web Form Design Filling in the Blanks Luke Wroblewski
14/15
http://www.mediasurgery.co.uk/video-episodes/forms-part-2-increasing-conversions-with-good-use-of-forms
5
What now ?
Please Tweet about the episode and follow UE on Twitter
Sign up to the RSS feed on the left
Video at
15/15