Forms part 2 : Increasing conversions with good use of forms
•Download as ODP, PDF•
0 likes•298 views
Recommended
More Related Content
More from John Macpherson
More from John Macpherson (10)
Recently uploaded
Recently uploaded (20)
Forms part 2 : Increasing conversions with good use of forms
- 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