Notes from form podcast:

http://www.uie.com/brainsparks/2011/01/18/spoolcast-answered-your-top-questions-on-web-form-design-with-luke-wroblewski/


Field Repetition
Email

  • Only 1-2% of emails addresses are mistyped - small amount of people.
  • Most people catch their mistakes if people can see the input so make the input field clear and long enough to see the whole address to help reduce errors
  • Or allow people to change the email address on the confirmation page and correct their mistake.

Password

  • The only people who benefit from these strong passwords with lots of requirements are IT teams.
  • The result is a password you never remember which in turn makes it less secure as your likely to write it down on a post-it.
  • Let people see what they are doing on password so they can catch mistakes.
  • 99.9% of the time we do not have someone looking over our shoulder when entering a password.
  • Make the default shown and give an option to hide it.


Accepting Terms of use

  • Pages and pages of legal docs which can change often
  • Biggest move forward was removing the checkbox to accept the t&C and looking to make the ‘Continue/submit’ button the action to accepting the t&cs.

Do help links in forms help completion rates?

  • Simple answer yes, if people are likely to have stopping points and you have some simple information that can help them complete it then yes.
  • e.g. credit card info need on a free account to verify an account - added help text to reassure people on the screen as they were getting to the confirm screen and clicking back on the browser and loosing all their details worrying they’d picked a non-free account.
  • Help text adjacent and visible to where it is relevant is best but if it gets too wordy best broken down and displayed in context as and when the help is needed.

Bets practice after you’ve completed a form

  • Often you just get a success message.
  • Can sometimes call for more e.g. posting a blog post you’d like to see the blog post to check it’s posted correctly.
  • Don’t leave user with a dead end if you can’t do above. Let people have next step actions and inform them of the process e.g. we’ll respond within 15mins, you’ll receive an email with a confirmation code and a link to follow and complete.

Conditional dependant input

  • Hide irrelevant form controls from people who don't need them. Only ask for necessary info, don’t ask for the sake of asking.

Mad libs approach

  • Sentence or paragraph of text and you fill in the blanks. huffduffer.com sign up form example
  • Found that mad libs forms are performing well in correct use. One extreme example, conversion went up 25-40% increase in enquiries from A/B testing with other tweeks.
  • Take the time to think about the wording and keep it concise, make it more of a dialogue. Limited fields, say 5 or 6 at a max.
  • Can also double as a nice welcome to the website instead of being greeted by a sign up form.
  • Can be an ice breaker - e.g. sending a quick message, makes it less intimidating to get in touch.
  • Again the  size of the input field is important, make sure people can see their full input.

Filed size

  • Affordance - make the field size match the size of the expected data , make sure its long enough to see all the data
  • Making all the input fields bigger can help reduce errors as people can see everything more clearly.
  • Set expectation of the type of input you would like from the user. e.g. if you would like a long answer then allow enough room and encourage users to complete the field. For a short answer, have a short field and indicate any limits and why.
  • example - Wii form to order wrist strap. Learning curve on this form was more difficult than the learning curve of the wii. The serial number field was 8 characters long, the Wii serial number is 11 characters long so had to keep resubmitting as couldn't see the mistake being made.