Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Form Design: Best Practices to Improve Conversions

9,517 views

Published on

Slide presentation for the South Florida User Experience Meetup on Forms. Looks as login forms, form alignment, and best practices.

Published in: Technology, Business

Form Design: Best Practices to Improve Conversions

  1. 1. Form Design: Best Practices to Reduce Errors and Improve Conversions<br />Lauren Martin www.sitemotif.com<br />
  2. 2. Design Principles <br />Keep it Simple <br />Avoid unnecessary text and inputs.<br />Focused Goal<br />It should be easy to see what needs to be done to complete the form.<br />Be Clear<br />You never know the context of the user, make sure things are very clear and unambiguous.<br />Constantly Communicate<br />Inform users about what’s going on when it happens.<br />
  3. 3. The basics of labels, errors and layout.<br />Login Forms<br />
  4. 4. Clear, Obvious, Concise<br />Set proper expectations by letting the user know exactly what you are looking for. <br />
  5. 5. Locate, Inform, Assist<br />Error messages should inform the user Where the error happened, What the error was, and How to correct it.<br />
  6. 6. Clean, Focused, Apparent<br />Focus on the point. Provide users with a clear call to action and next steps.<br />
  7. 7. Interface Surgery<br />
  8. 8. Meetup.com<br />
  9. 9. WordPressBlog Dashboard<br />
  10. 10. Alignment and Orientation <br />Examples From:<br /> Web Form Design <br /> by Luke Wroblewski<br />Layout Best Practices<br />
  11. 11. Path to Completion<br />Minimize distractions by removing unnecessary elements<br />The scan line should have good visual spacing.<br />Provide a single path throughout the form<br />
  12. 12.
  13. 13. Top Aligned<br />Positives<br />Cleaner scan line, means more rapid processing and less effort<br />Label and input field are adjacent<br />Allows long labels<br />Horizontal space for grouping related fields<br />Studies show highest completion rates<br />Good for familiar data<br />Negatives<br />2x Increased vertical space.<br />
  14. 14. Top Aligned Labels<br />
  15. 15. Right Aligned<br />Positives<br />Close proximity between label and input field<br />Good for varied label widths<br />2x faster to complete as left aligned labels<br />Reduced vertical space<br />Negatives<br />Left rag of labels makes scanning less efficient <br />
  16. 16. Right Aligned Labels<br />
  17. 17. Left Aligned<br />Positives<br />Easy to scan labels is good for unfamiliar data<br />Reduced vertical space<br />Good for forms with sensitive data where you want users to slow down.<br />Negatives<br />Label and corresponding field are not adjacent<br />Long labels extend gaps between labels and controls causing visual “jumps”<br />
  18. 18. Left Aligned Labels<br />
  19. 19. Buttons<br />56% of Submit buttons are left aligned with the form. While only 26% are right aligned and 17% centered.*<br />You do not need a cancel button. The user can navigate else where if they are not longer interested.<br />Secondary actions should be separated from the primary action. This can be done visually by making the secondary action a less prominent link.<br />The primary action should be to the left of the secondary action.<br />* Smashing Magazine: http://www.smashingmagazine.com/2008/07/08/web-form-design-patterns-sign-up-forms-part-2/<br />
  20. 20. Examples<br />1. Primary Button, Secondary Link<br />2. Primary Button, Secondary Button<br />3. Primary Action on Right<br />
  21. 21. Redesign<br />
  22. 22. Forms are crucial to businesses and stand between the user and the companies product or service.<br />Improve Conversions<br />
  23. 23. How do you get to the form?<br />You should have a clear call to action on your homepage.<br />Use very clear links and leads. “Sign Up” is 2x more likely to catch your users eye over “Register”, “Join” and “Create Account”.<br />A signup link should be located in the top third of your page, preferably next to the login form.<br />
  24. 24. What’s on the form?<br />Users really do care about what your asking them.<br />For Example: Asking someone for their address is like saying, I’m going to send you stuff. If they are not ordering a product, this may immediately turn them away.<br />Context also matters. If I am just signing up for a clothing site, you should not be asking for my credit card number. If I am trying to purchase an order, then the context would be correct for purchasing information.<br />Try to keep it between 3-8 mandatory fields. Less is better.<br />
  25. 25. How is it organized? <br />Every form should have a name and a clear purpose<br />Always chunk information into logical groups<br />Each chunk should have a clear title summarizing the questions in that section<br />Try to avoid multi-page forms. However, if used always make it clear how many steps are involved and how far the user has gotten.<br />Use subtle visual cues like dividers to help group related content<br />Bold form labels for easier scanning.<br />
  26. 26. How are you helping them?<br />Provide hints and tool tips with additional information<br />Use examples of expected and allowed input<br />Use tip icons with rollovers and panels for explanations to the right of the input fields.<br />Use one line liner examples and info directly below input fields.<br />Highlight fields with errors, and display error messages in line or at the top of the screen.<br />Allow tabbing through the form and all controls.<br />
  27. 27. Improve your conversions.<br />Metrics should be used to measure completion rates, times, and issues.<br />Create multiple versions and do A to B testing to see which forms result in the highest conversion rates.<br />
  28. 28. Online Reading…<br />Smashing Magazine:<br />http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/<br />http://www.smashingmagazine.com/2008/07/08/web-form-design-patterns-sign-up-forms-part-2/<br />http://www.smashingmagazine.com/tag/forms/<br />http://www.smashingmagazine.com/2008/04/17/web-form-design-modern-solutions-and-creative-ideas/<br />http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/<br />Luke Wroblewski:<br />http://www.lukew.com/resources/articles/web_forms.html<br />Caroline Jarrett:<br />http://www.formsthatwork.com/<br />
  29. 29. Off Line Reading…<br />Forms that Work: Designing Web Forms for Usability<br />By: Caroline Jarrett<br />$44.95 on Amazon<br />Web Form Design: Filling in the Blanks <br />By: Luke Wroblewski<br />$36 on Rosenfeld Media<br />

×