- The document provides tips for designing great forms, such as right-aligning fields to reduce the time users take to find them, hiding optional fields until needed, and simplifying fields like automatically detecting time zones. - It emphasizes reducing friction by removing unnecessary clicks and fields, and increasing completion rates by using progress bars and sending reminder emails. - Additional recommendations include handling errors through JavaScript and on the server, being accessible, and obsessing over details like preventing double submits.

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: www.joshfraser.com Email: [email_address] Blog: www.onlineaspect.com 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)

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

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: http://toolbar.google.com/autofill_help.html ECML (Electronic Commerce Modeling Language): http://www.ietf.org/rfc/rfc3106.txt

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 http://www.onlineaspect.com/2007/05/18/how_to_build_great_forms/ Auto detect a time zone with JavaScript by Josh Fraser http://onlineaspect.com/2007/06/08/auto-detect-a-time-zone-with-javascript/ 10 Tips To A Better Form by Chris Campbell http://particletree.com/features/10-tips-to-a-better-form/ Label Placement in Forms by Matteo Penzo http://uxmatters.com/MT/archives/000107.php More Signup Power by Bill Flagg http://billflagg.blogspot.com/2008/04/more-signup-power.html Google Client Location http://code.google.com/apis/ajax/documentation/#ClientLocation The CAPTCHA Alternatives by Slobodan Kovacevic http://www.arraystudio.com/as-workshop/the-captcha-alternatives.html Inside India’s CAPTCHA solving economy http://blogs.zdnet.com/security/?p=1835

39. Thank you! www.joshfraser.com [email_address]

40. Questions? www.joshfraser.com [email_address]