Stop Helping Me Fill Out Forms!

I’ve been filling out a lot of online forms lately, and have noticed a trend that should stop NOW. Too many programmers have decided to “help” us fill out the telephone number by automatically tabbing between fields.

For example, registration forms often list the telephone number fields like this:

My expectation is that I will click in the area code box, type my area code, then press tab to get to the next box. But in many cases the programmer has decided to be helpful by automatically tabbing me out of the area code box as soon as I have typed three digits. So what happens? I type three digits and hit tab, but as soon as I type the third digit my cursor is automatically tabbed to the second box, so my tab actually takes me to the third box.

I then have to delete what I typed in the third box and move my cursor back into the second box. They haven’t saved me a keystroke, but instead have cost me several extras.

I understand what they’re trying to do, but my expectation as a user is that I will always need to press tab to move between the fields in a form. It’s impossible for me to anticipate that a certain field won’t require a tab to to move to the next field, so auto-tabbing is completely unhelpful and counter-productive.

Here’s where it get worse.

Some implementations actually refuse to let me click in a box once I’ve entered the required number of digits. So if I make a typo in the area code field, it’s now impossible for me to click in that box and correct the error. Their logic assumes that any three digits in that field means I’m done with the field forever and want to be tabbed to the next field. This is incorrect and maddening, as I have to completely reload the form and start over.

Helpful isn’t always helpful

Back in the old days (i.e. the ’90s), forms were dumb. You filled in information, pressed the “Submit” button and hoped it all worked out for the best. Today, tools like Javascript and AJAX make it much easier to have a robust form experience. Values can be checked for validity before the form is submitted. Hints can be given within text fields to help you understand what kind of data to enter. Parts of the form can be shown or hidden depending on selections you make. (For example, when creating a team on TeamSnap we immediately hide the Zip Code field if you select a country other than US or Canada.)

But programmers can also be too helpful, and the above phone number example is just one case of how a little less logic would make the user experience better. We don’t need help entering phone numbers. Auto-tabbing is terrible user experience.

Sweating the details

We spend a lot of time at TeamSnap thinking about little details like this, because we know our customers are trying to save every minute that they can. If we can save you a click — such as the “Save and Create Another” button when entering a new game or event — we’re going to do it. But only when it makes logical sense and doesn’t end up being counter-productive.

Got your own thoughts on interface? Let us know what little things we can do to make TeamSnap even slicker for you. Or post your own least-favorite worst practices from the world of interface design.