Web Forms that Don’t Make People Angry

There’s no better place to take care of your site visitors than an online form. This is the one place where they’re voluntarily sending you information, and maybe even payment. Decrease form abandonment and make somebody’s day by considering these three execution guidelines:

Don’t Ask for What You Don’t Need

  • Is it information you need? Great, ask for it.
  • Is it information you don’t need but could really value from? Only ask if you’re providing value in return.
  • Is it information you don’t need but think is interesting? Don’t even think about it.

Sales usually doesn’t like this one. Their argument goes something like this: “But, they’re already filling out information on the site. If we just ask for their phone number along with everything else, then we can call them. Think of the profits!”

A phone number is just an example, and you might have a legitimate reason for requesting it. But always weigh the value to your company against the cost to the people filling it out. Information is not free and you are asking them to trade the permission to contact them for something.

Long complicated forms are just fine as the length is justified by a clear purpose and the value to the user is substantial. Some examples would be a college application or listing a house on a real estate site.

Where Will the Answers Come From?

When creating a form, consider this question for each field: where is the person filing this out going to get this piece of information?

It’s not unlikely that the person using your form will have to go hunting for information instead of pulling everything from memory. It might be an address, a driver’s license number, or the confirmation key they wrote down on a piece of paper and put . . . somewhere.

Even if something is coming straight out of their brains and into your web site, that doesn’t mean that it’s a fast process. Think of a college essay, or an entry for a poetry contest, or a particularly thought-provoking question that requires a short and witty answer; all of these require forethought.

If the form is long and they can’t save their progress, then you need to let them know what difficult or time-consuming info they should have ready before they start. Getting to page two and then having the system timeout while you’re hunting for a scrap of paper is no fun.

Develop Thoughtfully

A beautiful and well-planned form can be made maddening with shortsighted implementation.

  • Avoid too many formatting instructions. Every list of instructions is another barrier to getting the form completed. Don’t require phone number formatting unless it’s legitimately crucial for the back-end system. Instead of giving a long list of password requirements, consider displaying the strength of the password while it’s being typed along with a suggestion of what might make it stronger.
  • Consider progressive disclosure. Let’s say that you are creating an urban multimodal (i.e. bike/train/walking/car) transportation site. Instead of including ten multi-choice questions about biking habits that include “I don’t own a bike” as the last option, you can create one question that says “Do you own a bike?” and only reveal the other ten questions if they do own a bike. It’s extra work but it’s more respectful of your visitors’ time.
  • Beware unhelpful error handling. “Record unable to be updated” means nothing to your average web user other than “something went wrong and I don’t know how to fix it!” If usernames can’t include symbols, then as soon as someone types “%,”  turn the field border red and reveal text that says something like “Oops! Only letters and numbers allowed.” The more responsive and detailed the error messages, the more quickly the person can fix the issue and move on.

Once you know your form promotes efficiency and does its job well, you can focus on creating extra enjoyment!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://twitter.com/jaronoff Josh Aronoff

    Great read! I tell people this all the time, now i have further proof. :) Thank you!

  • http://twitter.com/thecybertramp cybertramp webdesign

    Good article. Some nice tips there.

  • Html5based

    Awesome article, Surely I will be changing my submit form at http://html5based.com/submit-your-site/

    Thanks

  • http://www.LambertKlein.com Lambert Klein

    You can also make some answers optional. This way they have minimal obligation with the option to add more if they desire.
    Lambert

    • http://www.practicalux.com Peter

      You have to be a bit careful with adding optional fields. Many users just take a quick look at a form to see how many fields there are. If it looks too long, they’ll abandon. They may not take the time to look and see which fields are optional.

  • Anonymous

    The mark on end of question with asterisk (*) will also help to differentiate the form importance to complete the form.

  • http://twitter.com/cjforms Caroline Jarrett

    Very nice to see an article about forms that gives enough attention to factors that users really care about.

  • http://pulse.yahoo.com/_BEPIAGYQG5ITDA4HYR5MUDNTOE David Quinn

    Annoyances:
    1. Making you enter email twice. Unlike password, one can see email typed. If they don’t check and don’t get confirmation, they’ll retry if they really care.
    2. Separate field for First and Last name.
    3. Whisking you to another page for an error message, then not remembering all your form input when they send you back.
    4. Not able to tab field to field.
    5. Changing normal order of City State Zip.
    6. Asking for country when they only operate in one place.

    • OtherRob

      Gotta disagree with you about #2. As someone who’s spent way too much time separating first and last names from one field — and trying to figure out how to separate names like “F. John Smith Jones” — I strongly disagree with you there. And, as a user, I just don’t find separate fields that burdensome at all.

    • Altrent2003

      #2:
      > Le Guadec Jean
      > Krishni Bharathu Lakavath
      Can you tell me how programmatically you’re going to identify the first/last name of those names?

  • guest

    Brilliant! Especially the title! I haven’t heard the term ‘form abandonment’ before. As an end-user, I love the idea that I’ve abandoned the badly-designed form rather than just got angry and quit. It deserved to be abandoned! Now we just need the same guidelines for phone helpdesks that don’t make you angry.

  • Chris Lucas

    This is a great article. We try and educate users of our online form service – http://www.formstack.com – about many of these same principals. Conditional Logic (showing/hiding fields) is an easy way to make long forms easily digestible and can also increase conversion rates dramatically by only showing fields that are pertinent to that user. Thanks for a well-thought out post

  • Pingback: Formulários web que não irritam as pessoas | Codeworks - Artigos