Sensible Forms: A Form Usability Checklist

I heard via WebWord that A List Apart had an interesting article on form usability. It is a very good article that’s definitely worth a read. Below is just my comment to the article and my own thoughts on the subject form usability.

Give them room to type

First want to say that I especially relate to the point on giving the users room to type:

Just because your name is Joe Tod doesn’t mean other users won’t need more space to enter their names.

I have been filling out many forms just to find out that the e-mail address that I type in is longer then the maximum size of the e-mail field. Ok, yes – I know that I sometimes use long e-mail addresses, but since I don’t like getting spam I bought a domain which I fitted with a catch-all e-mail address. Then when I visit a site that requires me to leave an e-mail address that I don’t plan to visit ever again, I just type in something like
www.somestupidwebsite.com-2005.22.12@my-spam-domain.com
Anyway… my point is that some people have long names. And why should you not want the French Hélie Denoix de Saint Marc form Wales with the e-mail address
helie.denoix.de.saint.marc@llanfairpwllgwyngyllgogerychwyrndrobwyll-llantysiliogogogoch.com
as your costumer?

Validation

Which bring me to the second issue on my I-hate-stupid-form-designers list – wrong validation:
<rant>I’ve seen a few forms where the developer though he had all the facts on valid characters in a domain-name (or the whole e-mail address for that fact). I don’t want a form telling me that my e-mail address isn’t valid because it doesn’t like the hyphens in my domain name!</rant>

Borders (not the graphical, but the physical ones)

Besides all the great points that this article makes, there is one that it misses completely (and I’m probably gonna get some bad comments on this one):
USA ≠ The Internet

As a non-US citizen I can’t make this point often enough. Some US websites whose audience extends the physical borders of USA forget that it can be very difficult for a user that doesn’t live inside the US to fill out the required choose-your-state select-box. Either provide the user with a country select-box and use some JavaScript to make the state select-box dimmed when the user chooses another country than USA or provide a “I live outside the USA” option as part of the state select-box (I personally like the first option).

The article also mentions asking for the user’s telephone number (e.g. 800 555-1212) and that one possible option is to split the telephone number input into three fields. But what about me? Danish telephone numbers is just 8 plain digits following each other without any fancy spaces or hyphens. Of cause I would probably also like to provide a county code (+45 for Denmark), but I’ve seen countless examples of websites that either:

  • Does not allow for a + (plus) in the telephone number and gives me an error when I try to submit (I can fix this by writing 0045 instead).
  • Strips the + of the beginning of the telephone number just before it saves it into its internal database without giving me the chance to change the + to 00 (two zeros). This in turn leaves owners of the website with an invalid telephone number.

Technorati Tags: , , , , ,

8 Responses to “Sensible Forms: A Form Usability Checklist”

  1. Brian Crescimanno Says:

    Hi Thomas!

    Thanks so much for tanking the time to add your thoughts here. I do, however, think you misunderstood my point about telephone number entries. My intent was to show that using the 3 separate fields was a *bad* option and that one should do the validation on the back end. I didn’t explicitly state how this would positively affect international users, but I’m realizing now as I’m getting many comments on it that I should have been more clear.

    You are absolutely right; and there are a lot of issues with US-centric websites out there which (unfortunatley) make a less pleasant experience for our overseas friends. I think the subject just might be large enough for another article. :)

  2. Kimberly Says:

    I have a question about the required field and using an asterick. I found some recommendations to place the asterick after the label or after the field which I found counter-intuitive. I’d like to see the askterick appear before the label so that a user isn’t forced to read every label or field and can simply look for the askterick. What do you think?

  3. justaddwater.dk | How to indicate required or optional form fields Says:

    […] I got a question from Kimberly, one of our reader, in the Sensible Forms: A Form Usability Checklist post where she asks where the best place to display the asterisk indicating a required field in af form is: […] I’d like to see the askterick appear before the label so that a user isn’t forced to read every label or field and can simply look for the askterick. What do you think? […]

  4. Gregers Says:

    Regarding the discussion on where to place the “required”-asterisk:
    I personally like to see it to the right of the field, this way it doesn’t blend in with the text, but stands out from the field, this is particularly clear if the designer has made the effort of making the fields end at the same place.

  5. Rey Mendoza,Jr. Says:

    Does the asterisk need to be another color which? usability principles may seem to agree with it but there are users who are color blind.

    Maybe a legend will help? But if I have to make a legend to have that simple character to be understood, am I not defeating the purpose of the asterisk as a tool to make completion of forms faster? I mean if it’s not that intuitive, it may not be serving it’s purpose.

  6. Thomas Watson Steen Says:

    Hey Rey

    Regarding asterisks, see my post: How to indicate required or optional form fields.

  7. rascunho » Blog Archive » links for 2007-12-05 Says:

    […] justaddwater.dk | Sensible Forms: A Form Usability Checklist I heard via WebWord that A List Apart had an interesting article on form usability. It is a very good article that’s definitely worth a read. Below is just my comment to the article and my own thoughts on the subject form usability. (tags: justaddwater.dk 2007 mes11 dia5 at_tecp forms validation blog_post form_design usability checklist) […]