Designing Great Forms
-
Upload
josh-fraser -
Category
Technology
-
view
1.311 -
download
3
description
Transcript of Designing Great Forms
![Page 1: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/1.jpg)
Designing Great FormsDesigning Great Forms
Josh FraserCo-Founder EventVue
![Page 2: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/2.jpg)
Hi. I’m Josh.Hi. I’m Josh.
I’m the co-founder of EventVue.
Find me on the web at:
Website: www.joshfraser.comEmail: [email protected]: www.onlineaspect.comTwitter: joshfraz
![Page 3: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/3.jpg)
Why talk about forms?Why talk about forms?
![Page 4: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/4.jpg)
Small changes can make a Small changes can make a big differencebig difference
![Page 5: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/5.jpg)
Left-aligned, left of fieldLeft-aligned, left of fieldAverage saccade time: 500ms
![Page 6: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/6.jpg)
Right-aligned, left of fieldRight-aligned, left of fieldAverage saccade time: 205ms
![Page 7: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/7.jpg)
Left-aligned, above fieldLeft-aligned, above fieldAverage saccade time: 50ms
![Page 8: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/8.jpg)
Understanding your usersUnderstanding your usersLinkedIn advanced search
![Page 9: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/9.jpg)
Understanding your usersUnderstanding your usersEventVue date input
OR
![Page 10: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/10.jpg)
Contextual user interfacesContextual 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.
![Page 11: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/11.jpg)
Reduce frictionReduce 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
![Page 12: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/12.jpg)
The conversion ruleThe conversion rule
“The conversion rate of a registration page is inversely correlated to the number of fields.” – Bill Flagg
![Page 13: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/13.jpg)
SimplifySimplify
![Page 14: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/14.jpg)
LocationLocation
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.
![Page 15: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/15.jpg)
Time zonesTime zones
Use JavaScript to automatically detect the GMT offset and DST
![Page 16: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/16.jpg)
Credit card typesCredit card types
Why make the user select their credit card type from a drop-down?
Starts with a 3 it’s American ExpressStarts with a 4 it’s a VisaStarts with a 5 it’s a MasterCardStarts with a 6 it’s a Discover card
![Page 17: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/17.jpg)
Profile picturesProfile picturesReplacing the file upload field
Increased the number of users on EventVue who added a profile picture by 16%
![Page 18: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/18.jpg)
TagsTagsGive personalized suggestions that users can add with a single click.
Increased the number of users on EventVue who added tags by 21%
![Page 19: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/19.jpg)
External contentExternal 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)
![Page 20: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/20.jpg)
![Page 21: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/21.jpg)
CaptchasCaptchas
Introduce an incredible amount of friction
Are often used unnecessarily
And are easily broken using advanced text recognition or cheap labor
![Page 22: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/22.jpg)
Instant feedbackInstant 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
![Page 23: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/23.jpg)
3 way to check for errors3 way to check for errors
1) Only check on the server
2) Check with both JavaScript and server side code
3) Use AJAX calls for error checking
![Page 24: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/24.jpg)
Retain stateRetain state
![Page 25: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/25.jpg)
Things to checkThings 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)
![Page 26: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/26.jpg)
Use standard conventionsUse standard conventions
Red for errors
Green for success Yellow for warnings
![Page 27: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/27.jpg)
Increase completion ratesIncrease completion rates
Delay the collection of information until later. Let people get value before making the big ask.
![Page 28: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/28.jpg)
Increase completion ratesIncrease 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.
![Page 29: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/29.jpg)
Increase completion ratesIncrease completion rates
Add a progress bar.
Increased the number of EventVue users who completed their entire profile by 25%
![Page 30: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/30.jpg)
Be obsessive about detailsBe obsessive about details
![Page 31: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/31.jpg)
Handling double submitsHandling 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.
![Page 32: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/32.jpg)
Google toolbar auto-fillGoogle 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
![Page 33: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/33.jpg)
AccessibilityAccessibility
Important fields for screen readers:
FieldsetLegendAccesskey
<fieldset><legend>Contact Information</legend><input name='fname' accesskey='f' /></fieldset>
![Page 34: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/34.jpg)
Labels and tabindexLabels 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' />
![Page 35: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/35.jpg)
Auto-tabAuto-tabUse 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.
![Page 36: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/36.jpg)
Auto-tabAuto-tab<input type="text" name="areacode” tabindex="1" maxlength="3" />
function autoTab(e) { if(this.value.length == this.getAttribute("maxlength") && e.KeyCode != 8 && e.keyCode != 16 && e.keyCode != 9) { new Field.activate(findNextElement(this.getAttribute("tabindex"))); }}
function findNextElement(index) { elements = new Form.getElements("my_form"); for(i = 0; i < elements.length; i++) { element = elements[i]; if(parseInt(element.getAttribute("tabindex")) == (parseInt(index) + 1)) { return element; } } return elements[0];}
![Page 37: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/37.jpg)
Auto-focusAuto-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.
![Page 38: Designing Great Forms](https://reader030.fdocuments.in/reader030/viewer/2022020718/5486d92fb4af9fc0438b472e/html5/thumbnails/38.jpg)
ResourcesResourcesHow to Build Great Forms by Josh Fraserhttp://www.onlineaspect.com/2007/05/18/how_to_build_great_forms/
Auto detect a time zone with JavaScript by Josh Fraserhttp://onlineaspect.com/2007/06/08/auto-detect-a-time-zone-with-javascript/
10 Tips To A Better Form by Chris Campbellhttp://particletree.com/features/10-tips-to-a-better-form/
Label Placement in Forms by Matteo Penzohttp://uxmatters.com/MT/archives/000107.php
More Signup Power by Bill Flagghttp://billflagg.blogspot.com/2008/04/more-signup-power.html
Google Client Locationhttp://code.google.com/apis/ajax/documentation/#ClientLocation
The CAPTCHA Alternatives by Slobodan Kovacevichttp://www.arraystudio.com/as-workshop/the-captcha-alternatives.html
Inside India’s CAPTCHA solving economyhttp://blogs.zdnet.com/security/?p=1835