Design & UX - - By Emily Smith

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!