Form Usability and UX goodness


When we’re designing forms there are some simple things to keep in mind with regards to the UX and usability side of things that will make them that much better for our audiences.

Good Usability has two very useful articles about validation and preventing issues on web forms, well worth a read.

Alistapart has an article regarding inline validation that shows us the wonderfulness of using real-time inline validation vs. validating by submission. By giving people an indication that their input is correct (or not) while they are filling in a form results in a far greater success rate and of course there is a much better experience for users.

I also came across an excellent article at UX Matters about not putting hints inside text boxes. In a nutshell: when a text field has content — whether example content or actual content — users will often perceive that field to be filled in and skip over it.

Some other excellent websites to read where UX/Usability is concerned:

DiggTwitterSlashdotFacebookShare

, ,

  1. #1 by Jemmy Cottler on September 17, 2010 - 14:03

    Hi, Its very useful articles about validation and preventing issues on web forms. Well done!

  2. #2 by Debbie on September 21, 2010 - 00:30

  3. #3 by Maria on November 30, 2010 - 16:06

    Jemmy Cottler :

    Hi, Its very useful articles about validation and preventing issues on web forms. Well done!

    Just have to agree here , and thank you for introducing smashingmagazin to me , very nice source.

  4. #4 by Bryan Malinak on March 28, 2011 - 09:12

    Super-Duper blog! I am loving it!! Will be back later to read some more. I am taking your feeds also

  5. #5 by Sarah on April 19, 2011 - 07:48

    I implemented inline validation on a couple of my forms to test it out and what a difference! By tracking how many people started completing forms compared to actually submitting then we saw that inline validation increased submission rates by almost 60%. That meant we got a lot more feedback from our readers than ever before.

  6. #6 by Amber on April 21, 2011 - 01:44

    Sarah :

    I implemented inline validation on a couple of my forms to test it out and what a difference! By tracking how many people started completing forms compared to actually submitting then we saw that inline validation increased submission rates by almost 60%. That meant we got a lot more feedback from our readers than ever before.

    Wow we didn’t get that big of an increase when we implemented inline validation, but that is fantastic. How extensive were the forms you were using?

  7. #7 by Johnny on April 30, 2011 - 04:14

    After implemented inline validation on forms to test it i am surprised by its performance. This is really nice :) By tracking how many people started completing forms compared to actually submitting then we saw that inline validation increased submission rates. We are getting more feedback from our readers than before.

  8. #8 by JT Cooper on May 3, 2011 - 08:40

    It is refreshing to find a post that actually does help our IM efforts without having to redo and redo. We are also getting more and better feedback from our readers than we ever have in the past . Thanks for taking sharing with us.

  9. #9 by Dave on May 5, 2011 - 14:10

    Thanks for the suggestion not to put hints inside text boxes. It’s one of those things that is brain-dead simple when you pointed it out, but probably answers why we are having problems (and complaints) with getting our forms filled out. We’ll make the switch and see what happens.

  10. #10 by Emmitt on May 13, 2011 - 13:56

    I found the post on form validation very helpful. I agree with you that you can give users a much better experience if they get immediate feedback when filling out a form.

  11. #11 by Heidy on May 21, 2011 - 02:54

    Its important to always keep the user in mind and remember that if are confused in any way, they’ll usually bolt from a site! I know I do :) .

  12. #12 by Jenn on May 26, 2011 - 07:34

    I just started using inline validation on one of my forms on a new site that I am developing just to test it. The inline validation actually increased the submission rate by 30%. This really surprised us. Thanks for the info.

  13. #13 by David Hamill on June 3, 2011 - 17:26

    It’s great that you’re all getting more people through your forms by using inline validation.

    I’d urge you to have a look at your forms for fields that can be removed altogether. If you consider that inline validation may be reducing (I’m going to pick numbers out of the air here) the dropouts from 10% to 3% for each question that you ask on your form. How about if a question wasn’t asked at all? That’d be 10% to 0% by removing it completely.

    Just a thought. Thanks for the link love John.

  14. #14 by Alex Taylor on September 26, 2011 - 15:09

    I’m using inline validation greatly for my forms, but now I need to specify a validation condition for two fields and I didn’t find anything in the documentation, as it seems that validation using class attributes is only on a per-field basis. Is there any way to do it?

  15. #15 by John on September 26, 2011 - 17:41

    David Hamill :

    Thanks for the link love John.

    No worries, keep writing the good articles and I’ll keep reading them :)

    Alex Taylor :

    validation using class attributes is only on a per-field basis. Is there any way to do it?

    If you’re ready to move to HTML5 style syntax, you could try the HTML5 style form validation attributes. Modern browsers will understand what you mean, and there are JavaScript polyfills available for those that don’t. (See http://blog.mozilla.com/webdev/2011/03/14/html5-form-validation-on-sumo/)

  16. #16 by Marina Kountsevitch on October 4, 2011 - 13:44

    Great article. I would like to add some tips about validation. For web consistency, always use an asterisk (*) to indicate a required field, and in red if the background color allows. It can also help to display a message for what the asterisk means, although many web users will know automatically. This is the most consistent and non-intrusive way for indicating what is required and what is not.

Comments are closed.