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.


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”.


Size Matters. For Form Fields, That Is.

It’s generally recommended that you design your form so that the fields are all the same size. This makes it look pretty.

Exceptions can be made for things that have a specific size, like zip/postal codes, or those individual phone number boxes.

But there is absolutely no reason to make the field 16 times bigger than it needs to be:

These fields are way too big.

In case you’re wondering, it’s not like the options in these lists span the full width. I checked all of them, and they all looked like this:

The field is way too wide.

Now, I could maybe understand this if the developer who built the form was just being lazy and set the field width to 100% of the container div or something crazy like that.

But if they had done that, then the text fields would not be normal sized:

These fields are normal sized... so why is the drop down so huge?

Oh, and if you look at the first screenshot above, you’ll see that the labels are actually squished into a smaller column and don’t span the same width as the fields (especially noticeable on the “Which products or services are you most likely to buy in the next 12 months?” field).

So I’m baffled. If you built this form, can you explain it to me? And if you’re building a form, please don’t do this.

go bowling or clean gutters

Like Bowling, You Should Avoid Gutters In Forms

“Where should I put the labels?”

This is a frequent question in form design. I won’t review the best practices here (watch for it in the Best Practices section), but suffice it to say that the form below doesn’t do it right.

Why is there so much space between the label and the field?

What is with that huge gutter?? It makes it really hard to move your eyes from the label to the associated field, leaving you to wonder if you’re typing the right information in the right box.

Maybe they took the space that should be between the radio buttons and their labels (just a few pixels would be nice) and added it to the gutter…

What should they have done? Make the gutter as small as possible (10-20px would be sufficient) and, just to make it even easier, right align the labels instead of left.