Forms part 2 : Increasing conversions with good use of forms

277 views

Published on

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
277
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Forms part 2 : Increasing conversions with good use of forms

  1. 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-forms5 1/10
  2. 2. 1. ) Label positioning Right aligned Quickly completed Work well if little vertical space Not suitable for long labels5 1/15
  3. 3. 1. ) Label positioning Left aligned Labels are thoroughly read Work well if little vertical space Not suitable for long labels Slower to complete5 2/15
  4. 4. 1. ) Label positioning Top aligned Quickest completion times Labels are very flexible in width More vertical space5 3/15
  5. 5. 1. ) Label positioning Floated right Avoid – people in the western world read from left to right5 4/15
  6. 6. 1. ) Label positioning Top and centred OK for short forms In UE it fits into design Slower completion rates Increases vertical height5 5/15
  7. 7. 2. ) Relationships and blurring5 6/15
  8. 8. 3. ) Add address and telephone number If small business Increases users confidence Not always required If large business could mean a lot of calls5 7/15
  9. 9. 4. ) Avoid visual noise5 8/15
  10. 10. 5. ) Dont use Tables for laying out forms Use floats and display:block5 9/15
  11. 11. 6. ) Do you really need a cancel / reset button? 5 10/15
  12. 12. 7. ) Labels before form elements5 11/15
  13. 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. 14. 9. ) Quick bonus coding tips5 13/15
  15. 15. Resources Web Form Design – Filling in the Blanks – Luke Wroblewski5 14/15
  16. 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-forms5 15/15

×