CssMySite

Introduction

My town just started online registration for their parks and rec department. This should be a great convenience for signing up for town programs. Unfortunately, it is not. After trying three times to sign up my son for baseball, I gave up, printed out the form and hand-delivered it to town hall.

Problem

Inconsistency is the root of all evil in forms - whether it's inconsistency with previous forms users have filled out on other websites or inconsistencies within the form itself.

Why is it important to have a consistent form?

It inspires confidence. By my third time filling out the form, I was wondering, "Is this registration going to work?", "Is he going to be signed up three times?" and "Do I really want to give these people my credit card number?" I printed out the form but if it had been an e-commerce site, I would have taken my business elsewhere.

Any time somebody has a question about part of the form or has to stop and think, they lose trust in the site. If they lose trust in a site, they won't buy what you are selling, stick around to read what you wrote or ever come back.

The Form

Program Information

Above the form is the information about the baseball program. The information is good but the images are huge - 2307x3072 and over 3MB each. They take a long time to download.

Top form - empty

1. Superfluous information

   This pagination says there are 21 results and page '1 of 1' is displayed. What results is it talking about? Forms? There's only one. Form fields? There are more than 21.

2. Misaligned label

   This makes me wonder about the developer's attention to detail.

3. Misaligned input field

   See #2.

4. Is this a link?

   Large font. Blue text. Is it a link or just some information?

5. Assumption of knowledge

   What does * mean? Usually it means required field but that is not specified.

Bottom form - empty

1. Misaligned radio buttons

   All input fields, including radio buttons and check boxes, should have their left edge lined up along an invisible, vertical line.

2. Different input field

   Why is this input field styled differently? Does it mean something?

3. Wrong input field

   Pity the parent who volunteers to be head coach and then changes his or her mind. There is no way to unselect a radio button.

4. Inconsistent information

   None of these fields are marked with an *. Are any required? Does * mean required or something else?

Top form - invalid values

1. Deviation from standard layout

   People expect forms to be in a certain order - name, address, city, state, zip code, phone number. Any deviation from that standard stops the flow of filling out the form, makes people have to think and, frankly, is quite irritating.

2. Auto-filling of form fields

   When the zip code is filled and the field loses focus, the city, state and country are automatically filled in. Typing is faster than waiting for the ajax (with a 'loading' indicator) to fill in the fields. Also those fields are editable, letting the user change them to invalid values.

3. Auto-format

   The phone number field is expecting the format 919-555-1212 but does not indicate that anywhere. When the field loses focus, '555-1212' turns into '555-121-1'. The field is not marked invalid until the 'Next' button is clicked - leaving people to wonder, "Why is my phone number invalid? How the hell did that dash get in there?"

Bottom form - invalid values

1. Auto-filling with invalid data

   The date format is not specified. When '04/28/00' is entered, it is correctly formatted to '4/28/2000'. However the age field is filled in with '108'. Unlike the other auto-filled fields, the age field is not editable.

2. Inconsistent information

   The required fields are not marked until 'Next' is clicked. Then a red * is put next to any required but empty fields. The top form has an always present black * to mark required field.

3. Inconsistent feedback

   The 'Required' or 'Invalid' text is placed under the invalid field instead of beside it like in the top form. This causes the form fields to jump as the 'Required' disappears once the field is filled in.

Bottom form - more invalid values

1. Wrong input field

   There is no indication on how the Grade should be entered - '3' or '3rd' or 'third'? A dropdown list would have been a better choice here.

2. Inconsistent formatting

   The Father's Day Phone, Mother's Day Phone and Physician Phone fields accept phone numbers in the format of 555-1212. All other phone number fields require the format 919-555-1212.

3. Auto-format

   The phone number is automatically formatted and is now invalid. It is especially confusing in this section because the other phone numbers do not need the area code.

End of the form

1. Inconsistent formatting

   The check box should be to the left of the label.

End of the Account information form

1. Inconsistent button placement

   The first image with buttons has 'Cancel' on the left and 'Save' on the right. The form for changing the Account information has 'Save' on the left and 'Cancel' on the right. Considering 'Cancel' causes you to lose all information, it should be in the same place on each form.

Conclusion

Forms need to inspire confidence. They do that by being consistent with themselves and other forms. Forms should be easy to fill out. The user should not have to think. They need to be able to trust that if they fill out the form, you will receive the information and do the right thing with it.