Out of Order! Pay Attention to the Tab Order

Lots of people tab through forms. It’s faster than using the mouse to move between fields and form filler-outterers often get in a groove, especially for common forms like an address.

So when you change that order, it’s annoying.

We recently moved, so I had to update my address in a lot of places. One of those places was my cell phone provider, Fido.

First of all, the fields are just in a weird order anyway – it’s generally recommended to keep forms in one column. I suppose that if you go vertically first, they’re in a “normal” order. But if you tab through them, they go horizontally:

The tab order in this form is all wonky.

It took me way longer than it should have to fill out this form, because I had to enter my info in this order:

  • Apt/Suite
  • Postal Code
  • Street Number
  • City
  • Contact Number 1
  • Street Name
  • Province
  • Contact Number 2

That’s just crazy. Bad dog, Fido.


Labels Inside Fields… What was I supposed to put in here?

Putting the label for a field inside the field itself seems like a good idea – it doesn’t take up any extra space on the page and there’s no question about which field a label is associated with.

BUT. If you’re going to do this, you need to make sure that the label is still visible until the person filling out the form starts to type.

In this form from Shell, the label disappears as soon as you click into the field. So if you’re tabbing through the form and not paying attention to the next field before you hit tab (which is especially difficult given that the form is in two columns), you end up with a blank field wondering what you’re supposed to type in.

The form label disappears as soon as the field becomes active... that's no good.

Also, in-field labels should not look like the actual data being entered. Usually they’re a lighter shade of grey to indicate that they’re temporary.

Here’s a good write-up from UX Movement on how to pull off putting labels inside textboxes.

This form has a few other issues as well:

  • Two columns makes it harder to scan
  • Non-normal order of address fields: Mailing Address, Postal Code, Province/Territory… where does city go?
  • Everything is mandatory except the marketing opt-in. Don’t bother with asterisks, just mark the optional field.

One Of The Craziest Form Layouts I’ve Ever Seen

That’s a lot of columns…

This is a crazy form layout. That's it.

At least they tab in the “right” order (vertically, then horizontally).

Also, “Profession” and “Hobby”? These are required fields. Fine, I can get on board with profession, but hobby? I certainly have more than one. In retrospect, I should have said “posting examples of bad forms”.