Your SlideShare is downloading. ×
Designing Great Forms
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Designing Great Forms


Published on

Here are my slides for my talk at The Ajax Experience back in 2008.

Here are my slides for my talk at The Ajax Experience back in 2008.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Designing Great Forms Josh Fraser Co-Founder EventVue
  • 2. Hi. I’m Josh. I’m the co-founder of EventVue. Find me on the web at: Website: Email: [email_address] Blog: Twitter: joshfraz
  • 3. Why talk about forms?
  • 4. Small changes can make a big difference
  • 5. Left-aligned, left of field Average saccade time: 500ms
  • 6. Right-aligned, left of field Average saccade time: 205ms
  • 7. Left-aligned, above field Average saccade time: 50ms
  • 8. Understanding your users LinkedIn advanced search
  • 9. Understanding your users EventVue date input OR
  • 10. Contextual user interfaces Good forms show what you need to see at the moment you need to see it and not a minute sooner. Hide optional fields and reveal them using CSS & JavaScript.
  • 11. Reduce friction You introduce friction with unnecessary fields, extra clicks and text labels that take a long time to read. The more friction you have, the harder it is to get the user to YOUR desired destination
  • 12. The conversion rule “ The conversion rate of a registration page is inversely correlated to the number of fields.” – Bill Flagg
  • 13. Simplify
  • 14. Location Ask users for their zip code instead of their city and state Use the google.loader.ClientLocation property from the Google AJAX API to automatically detect the users country, city, state and lat/lng.
  • 15. Time zones Use JavaScript to automatically detect the GMT offset and DST
  • 16. Credit card types Why make the user select their credit card type from a drop-down? Starts with a 3 it’s American Express Starts with a 4 it’s a Visa Starts with a 5 it’s a MasterCard Starts with a 6 it’s a Discover card
  • 17. Profile pictures Replacing the file upload field Increased the number of users on EventVue who added a profile picture by 16%
  • 18. Tags Give personalized suggestions that users can add with a single click. Increased the number of users on EventVue who added tags by 21%
  • 19. External content Automatically find your users content around the web: Twitter (Twitter API) Blog (MyBlogLog API) Facebook profile (Facebook Connect) LinkedIn profile (LinkedIn API) Website (From any of the above)
  • 20.  
  • 21. Captchas Introduce an incredible amount of friction Are often used unnecessarily And are easily broken using advanced text recognition or cheap labor
  • 22. Instant feedback Tell me exactly what you’re looking for - Use onfocus to show tips Tell me ASAP if I did something wrong - Use AJAX calls to handle error checking
  • 23. 3 way to check for errors
    • Only check on the server
    • Check with both JavaScript and server side code
    • Use AJAX calls for error checking
  • 24. Retain state
  • 25. Things to check Field isn’t blank or of the wrong type Passwords match Email address is valid (use both regexp and an MX lookup) Credit card number is valid (LUHN formula)
  • 26. Use standard conventions Red for errors Green for success Yellow for warnings
  • 27. Increase completion rates Delay the collection of information until later. Let people get value before making the big ask.
  • 28. Increase completion rates Send emails when people bail out half-way through. Be sure to retain state so people can pick up where they left off.
  • 29. Increase completion rates Add a progress bar. Increased the number of EventVue users who completed their entire profile by 25%
  • 30. Be obsessive about details
  • 31. Handling double submits Use JavaScript to submit the form. Disable once it’s been used once. If JavaScript is disabled, display a warning message. Check for duplicate submissions on the server as well.
  • 32. Google toolbar auto-fill Google toolbar auto-fill: ECML (Electronic Commerce Modeling Language):
  • 33. Accessibility Important fields for screen readers: Fieldset Legend Accesskey <fieldset> <legend>Contact Information</legend> <input name='fname' accesskey='f' /> </fieldset>
  • 34. Labels and tabindex Use labels to associate descriptions with fields – especially with checkboxes. Make sure your tabindex is in the correct order <label for='fname'>First Name</label> <input type='text' id='fname' name='fname' tabindex='1' />
  • 35. Auto-tab Use auto-tab to automatically move to the next field when you reach a specified # of chars. Great for phone numbers, social security numbers, etc. Enforce a strict format without breaking up the flow of entering data.
  • 36. Auto-tab <input type=&quot;text&quot; name=&quot;areacode” tabindex=&quot;1&quot; maxlength=&quot;3&quot; /> function autoTab(e) { if(this.value.length == this.getAttribute(&quot;maxlength&quot;) && e.KeyCode != 8 && e.keyCode != 16 && e.keyCode != 9) { new Field.activate(findNextElement(this.getAttribute(&quot;tabindex&quot;))); } } function findNextElement(index) { elements = new Form.getElements(&quot;my_form&quot;); for(i = 0; i < elements.length; i++) { element = elements[i]; if(parseInt(element.getAttribute(&quot;tabindex&quot;)) == (parseInt(index) + 1)) { return element; } } return elements[0]; }
  • 37. Auto-focus Automatically focus on the first form field when you load a page. Be sure to exclude hidden or disabled fields. Only use on pages where filling out the form is the primary action.
  • 38. Resources How to Build Great Forms by Josh Fraser Auto detect a time zone with JavaScript by Josh Fraser 10 Tips To A Better Form by Chris Campbell Label Placement in Forms by Matteo Penzo More Signup Power by Bill Flagg Google Client Location The CAPTCHA Alternatives by Slobodan Kovacevic Inside India’s CAPTCHA solving economy
  • 39. Thank you! [email_address]
  • 40. Questions? [email_address]