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.

Killer form design


Published on

Learn the basics of killer web forms. Does your form scare away your visitors? Does it confuse them? Does it intimidate them? Do you know what your form conversion rates are and how to make them better? Could your signup rate be improved?

This presentation will discuss the basic elements of good form design. From the questions you ask, to the way you ask them, from layout to error handling and validation.

Published in: Business, Technology

Killer form design

  1. 1. Killer Form Design<br />By: Lauren Martin<br />@lorielue #SOFLUX<br />
  2. 2. The Conversation<br />Well, hi there.<br />
  3. 3. Please take out a piece of your own paper, and write the following information:<br />Your full name (with middle name)<br />Your mothers maiden name<br />The city that you live in<br />Before we get started…<br />
  4. 4. The Conversation<br />What’s your name?<br />Hello<br />Bob<br />Hi<br />What is your address … Bob?<br />What is your address … Bob?<br />Um ..<br />Don’t follow me<br />Why?<br />
  5. 5. “ /<br />”<br />A form is a sort of conversation […] without those opportunities to for clarification <br />-Caroline Jarrett<br />
  6. 6. …If you actually wrote something down, please put it somewhere safe and destroy it later…<br />
  7. 7. Ladies and Gentleman<br />A demonstration please…<br />
  8. 8.
  9. 9. Pop QUIZ! … with prize!!!<br />What popular flash cards did Stephen Anderson recently create?<br />Shout Out to Stephen Anderson for letting me borrow his browser demonstration<br />on twitter @stephenanderson<br />
  10. 10.
  11. 11.
  12. 12. Ask expected questions before unexpected ones.<br />Don’t ask question’s beyond your relationship unless you have to, then provide a reason why your asking it.<br />You can always get extra information later.<br />Group the conversation into natural breaks.<br />Is there somewhere else you can get the information?<br />Consider the context, and the relationship.<br />People care about what you ask them.<br />Your form is a conversation<br />
  13. 13. Surgery<br />Stand back, I’m going in!<br />
  14. 14. A Prototype to Play With:<br />
  15. 15. Okay<br />Okay<br />Email should be plenty<br />Password reset sent to email<br />Okay, but later…<br />Most likely required for test, not training materials<br />Boat info optional, kill it.<br />Boat info optional, kill it.<br />Boat info optional, kill it.<br />Optional, Kill it<br />Okay<br />
  16. 16. Round 1: The Conversation<br />
  17. 17. But… What about…<br />Layout, colons, required field indicators and the kitchen sink..<br />
  18. 18. Layout<br />Left Aligned<br />Right Aligned<br />Top Aligned<br />
  19. 19. Wait.. <br />We’re forgetting something.<br />
  20. 20. Where do people look?<br />Quick Glance<br />Glance<br />Longer Glance<br />Looked longest<br />Left Aligned<br />Right Aligned<br />Top Aligned<br />
  21. 21. Quicker is better, right?<br />According to a study by Penzo<br />
  22. 22. Is it a short form?<br />Is the information really easy to fill in?<br />Do you have to gather answers?<br />Do you want to fill in the form?<br />Is the information requested, what you expected?<br />Is the information sensitive?<br />Have you filled out this form before?<br />Speed Racer, slow down! <br />
  23. 23.
  24. 24. Layout<br />Left Aligned<br />Right Aligned<br />Top Aligned<br /><ul><li>Easy scanning.
  25. 25. Make sure inputs are close enough
  26. 26. Good for unfamiliar information
  27. 27. Harder scanning.
  28. 28. Watch out for long and wrapping labels.
  29. 29. Good for repetitive or familiar information
  30. 30. Hard scanning.
  31. 31. Great for short forms
  32. 32. Good for familiar information
  33. 33. Watch out for groupings.</li></li></ul><li>Required Indicator, and Colon Position Don’t really Matter<br />Best practice is: <br /><ul><li>Required Indicator Left or Right of label, or Left of input.
  34. 34. Yep, Labels have Colons</li></li></ul><li>Looks Matter<br />Fact: Pretty things are perceived as being easier to use.<br />
  35. 35. Clowns and Models Both Wear Makeup<br />Vs.<br />
  36. 36. Use the grid system, line things up.<br />Use consistent spacing.<br />Keep advertising and distractions away from the form.<br />Support scanning and visual hierarchy.<br />Groupings should be clearly separated.<br />Primary action should be visually prioritized.<br />Good contrast, font family, and size for readability.<br />It’s The Little Things You Do<br />
  37. 37. Round 2: Visual Design<br />
  38. 38. Before and After<br />
  39. 39. Did it help??<br />How do you know if your changes are making a difference?<br />
  40. 40. Trust but Verify<br />Gorilla Usability Testing<br />Metrics and Analytics<br />Customer Support Call Logs<br />Analyze Response Data<br />
  41. 41.
  42. 42.
  43. 43. Vs.<br />
  44. 44. What about Errors<br />Please try again.<br />
  45. 45. Slide not found. Error ID234JHDU78CAS. <br />Please try again after jumping up and down on one foot and calling customer support.<br />Ok<br />Cancel<br />Back<br />
  46. 46. Error Prevention & Error Detection<br />Try to help the user prevent errors.<br />Generally, wait until the user tries to submit the form before presenting errors.<br />Explain why the error occurred, where, and how to fix it.<br />Be polite, and avoid jargon.<br />Don’t make color your only cue.<br />Avoid pop-ups.<br />
  47. 47.
  48. 48.
  49. 49. Pop QUIZ!<br />So did you learn anything today?<br />
  50. 50. What does this need?<br />
  51. 51. Forms that Work: <br />Designing Web Forms for Usability<br />By: Caroline Jarrett<br /><br />Recommended Reading<br />
  52. 52. Thanks!<br />Please submit all questions via the form.<br />Questions?<br />Twitter: @lorielue #SOFLUX<br />Slides:<br />