• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Designing Great Forms

Designing Great Forms



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.



Total Views
Views on SlideShare
Embed Views



1 Embed 38

http://www.onlineaspect.com 38



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Designing Great Forms Designing Great Forms Presentation Transcript

    • Designing Great Forms Josh Fraser Co-Founder EventVue
    • 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
    • Why talk about forms?
    • Small changes can make a big difference
    • Left-aligned, left of field Average saccade time: 500ms
    • Right-aligned, left of field Average saccade time: 205ms
    • Left-aligned, above field Average saccade time: 50ms
    • Understanding your users LinkedIn advanced search
    • Understanding your users EventVue date input OR
    • 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.
    • 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
    • The conversion rule “ The conversion rate of a registration page is inversely correlated to the number of fields.” – Bill Flagg
    • Simplify
    • 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.
    • Time zones Use JavaScript to automatically detect the GMT offset and DST
    • 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
    • Profile pictures Replacing the file upload field Increased the number of users on EventVue who added a profile picture by 16%
    • Tags Give personalized suggestions that users can add with a single click. Increased the number of users on EventVue who added tags by 21%
    • 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)
    • Captchas Introduce an incredible amount of friction Are often used unnecessarily And are easily broken using advanced text recognition or cheap labor
    • 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
    • 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
    • Retain state
    • 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)
    • Use standard conventions Red for errors Green for success Yellow for warnings
    • Increase completion rates Delay the collection of information until later. Let people get value before making the big ask.
    • 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.
    • Increase completion rates Add a progress bar. Increased the number of EventVue users who completed their entire profile by 25%
    • Be obsessive about details
    • 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.
    • 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
    • Accessibility Important fields for screen readers: Fieldset Legend Accesskey <fieldset> <legend>Contact Information</legend> <input name='fname' accesskey='f' /> </fieldset>
    • 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' />
    • 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.
    • 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]; }
    • 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.
    • 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
    • Thank you! www.joshfraser.com [email_address]
    • Questions? www.joshfraser.com [email_address]