designing great forms

Designing Great FormsDesigning Great Forms

Josh FraserCo-Founder EventVue

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: josh@eventvue.comBlog: www.onlineaspect.comTwitter: joshfraz

Why talk about forms?Why talk about forms?

Small changes can make a Small changes can make a big differencebig difference

Left-aligned, left of fieldLeft-aligned, left of fieldAverage saccade time: 500ms

Right-aligned, left of fieldRight-aligned, left of fieldAverage saccade time: 205ms

Left-aligned, above fieldLeft-aligned, above fieldAverage saccade time: 50ms

Understanding your usersUnderstanding your usersLinkedIn advanced search

Understanding your usersUnderstanding your usersEventVue date input

OR

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.

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

The conversion ruleThe conversion rule

“The conversion rate of a registration page is inversely correlated to the number of fields.” – Bill Flagg

SimplifySimplify

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.

Time zonesTime zones

Use JavaScript to automatically detect the GMT offset and DST

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

Profile picturesProfile picturesReplacing the file upload field

Increased the number of users on EventVue who added a profile picture by 16%

TagsTagsGive personalized suggestions that users can add with a single click.

Increased the number of users on EventVue who added tags by 21%

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)

CaptchasCaptchas

Introduce an incredible amount of friction

Are often used unnecessarily

And are easily broken using advanced text recognition or cheap labor

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

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

Retain stateRetain state

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)

Use standard conventionsUse standard conventions

Red for errors

Green for success Yellow for warnings

Increase completion ratesIncrease completion rates

Delay the collection of information until later. Let people get value before making the big ask.

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.

Increase completion ratesIncrease completion rates

Add a progress bar.

Increased the number of EventVue users who completed their entire profile by 25%

Be obsessive about detailsBe obsessive about details

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.

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

AccessibilityAccessibility

Important fields for screen readers:

FieldsetLegendAccesskey

<fieldset><legend>Contact Information</legend><input name='fname' accesskey='f' /></fieldset>

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' />

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.

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];}

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.

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

Thank you!Thank you!

www.joshfraser.comjosh@eventvue.com

Questions?Questions?

www.joshfraser.comjosh@eventvue.com