When Good Forms Go Bad: Improving Your Online Forms

Do you hate filling out online forms? Most web users do. Forms are critical to companies collecting our personal information so they can “convert” us into something—a new lead, a direct sale, a happy existing customer, a new employee. That’s why forms matter, and why they won’t be going away anytime soon.

But do forms have to alienate the end user?

In theory, no company intentionally creates bad forms that frustrate users. But it happens far too often.

Take, for example, the online job application. This is a form I know all too well. In a previous job at a software company that develops recruitment management solutions, my role was to test the usability of our form-driven online applications. All that time spent watching people fill out forms convinced me of how frustrating a bad form can be.

Let’s look at a specific example. This form is on the career website of a major corporation. The Software-as-a-Service (SAAS) provider this corporation uses to manage their online recruiting is a leader in the recruiting/talent management space with some big name clients. Why am I setting up this example with such a disclaimer? If you guessed it’s because you are about to see some crazy bad form design, you are correct!

Anatomy of a bad form

Here is a screenshot of the first form I am presented with when I attempt to apply for a job. The first thing I notice is the size and length of the form. Then I notice that of the 21 form fields, only 11 are required.

When I scan a form for the first time, I count the question marks that pop-up in my head:

1. Why do you need all of this information and should I trust you with it? Since this is your first contact with me, do you really need everything but a DNA sample?
2. The form instructs me to “Pls enter legal name.” “Pls”? Does this form have a speech and/or spelling problem? “Legal” because it’s on my birth certificate or Social Security card? Legal in what country?
3. Why do they care about my Middle Name and Nickname? Is the recruiter going to call me and say, “Hey, Melisa Kay Zachrich, we have a job for you”?  Can’t I pass this on in person if I’m hired and want you to call me something other than my first name?
4. Why is Phone Type required but Phone Number is not? Why not have Primary Contact Number and Secondary Contact Number fields instead? If they are going to text me or provide mobile alerts, then maybe cell vs. non-cell is important—but if it’s not, don’t ask me for it.
5. Is “Address 3/City” just another way of saying “City”? It’s a required field, so I feel like I need an explanation for the unusual field name.
6. You make me enter all of this information, and then tell me to upload my resume, which contains most (if not all) of this information. Why the duplication—do you just hate me?
7. Email isn’t a required field…but “Can you easily access your email for status updates?” is required. So, yes, I can access my email, but what does it matter, since you didn’t require me to give it to you?!

I feel like I could pen a novel detailing all of the things wrong with this form. And don’t get me started on form validation! For the sake of brevity, I’ll move on.

How could this form be improved?

Even just a handful of changes to this form would save the user time, not to mention a lot of frustration. Here are a few recommendations:

1. Tell me right off the bat why you need my personal information, and reassure me that it will be kept private.
2. Ask only for the information you absolutely need, and request that information only once. If I’m being funneled through some sort of process (which I obviously am in a job application), there will be later opportunities for you to collect the rest of the information you need.
3. Design your form in a way that makes it easy to scan vertically. Vertically scanning the asterisks indicating required fields on this form forces your eye to jump all over. Instead, place the * at the end of the label and right before the data entry field, making it easier to vertically scan and more strongly associating it with the field. (In a vertical layout where the label is above the field, place it before the label and not after.)
4. Chunk and label sections. This form is collecting both contact information and job related information (like resume and cover letter). These should be separated into sections and labeled.
5. Group related fields together. “Email” and “Can you easily access your email for status updates?” are related and should appear together.
6. Question the best use of form controls. If the above two fields were grouped together and email was required, why not place 2 radio buttons beside it with “Yes” or “No” for the access question? Default it to yes since you are requiring email and since it’s probably safe to assume in this situation most people will not mind if you email them about a job they applied for. (However, if this were a marketing email, default it to no. The point is, think it through first.)
7. Use correct tab indexing and, when possible, group fields in a way that supports minimal device switching (mouse to keyboard).
8. Design your form in a way that offers a clear vertical path to completion. This can be accomplished by minimizing vertical alignment points (think about layout) and proper placement of the submit/cancel button.
9. Use smart defaults whenever possible and research field usage. (If 97% of people do not enter data in Address 2, make it a button that says “Add Additional Address Line” for the 3% who need it).

People want to feel that their time is valued.

If you really want to bring them into your fold, give a great deal of thought to how and what you are communicating to them via your forms. A good experience is more likely to result in a new lead/customer/employee than a bad experience is.

And if you want to take your form design to the next level, read the brilliant little book Web Form Design: Filling in the Blanks by Luke Wroblewski. Independent usability organizations have tested Luke’s recommendations on real end-users and found them to be spot on.