labels-inside-fields

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

Mandatory Optional Fields – Good Job, LinkedIn

I was trying to connect with a new colleague on LinkedIn. They know who I am, I know who they are, so I didn’t feel the need to include a “personal note”.

Handily, LinkedIn makes including a personal note optional – see the little grey “(optional)” beside the field label? This is the right way to do it, too. Rather than marking required fields, mark optional ones.

So I left it blank. And got an error.

Generally, I find telling people that something is optional and then surprising them with it being mandatory isn’t all that nice. Good job, LinkedIn.

55424-1012-2-2ww-m

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

male-sign

I Am Male. And Now I’m Angry.

I fill out a lot of forms. So I’m pretty good at tabbing through fields, and guessing at what key I should hit to get the right answer from a drop down menu.

For example, when I hit an age field, I’m pretty confident pressing “2” because generally the ranges are 18-24, 25-34, and so on, and I fit into the 25-34 range.

Or when I hit the expiry date for a credit card, if “04” doesn’t work, I’ll try “A” (for April) and then “4” (in case they didn’t include the “0”).

Probably the easiest one to figure out is gender. I am “male”, so I press “m”.

Didn’t work on this form:

What, "male" and "female" was too boring?

Who felt the need to “fancy up” these answers? They just make it harder to fill out the form. Don’t do that.

size-matters-2-7-12

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.

rules_1668_1668

Breaking the Rules… Or At Least Not Accepting Them

Every time someone submits a form online, they either implicitly or explicitly have to accept the rules/regulations/terms and conditions/privacy policy/whatever that the company asking for the data lays out.

So not surprisingly, this contest form has a required checkbox for me to indicate that I accept the rules and regulations of the contest.

Rules and regulations must be accepted for this contest.

I “forgot” to check it off. But this didn’t seem to bother the form – it happily submitted and told me I was registered in the contest.

I wonder what that will mean if I win…?

restrictions

Don’t Waste My Time With Specific Formats If You Don’t Need Them

Servers were born to take data in and process it. So requiring the person filling out your form to do the hard work of putting data into the right format is just mean.

This form specifies formats for both the postal code (e.g., G1H 5G6) and the phone number (e.g., 418 877-9286).

This form "requires" data in specific formats (but doesn't actually).

In an attempt to be ornery, I entered data in incorrect formats:

  • Postal code: G1H5G6 (no space)
  • Phone number: 4188779286 (no space or hyphen)

Lo and behold, the form accepted it. Obviously they don’t need data in a specific format, so why ask for it?

Do-Not-Enter-Floor-Sign-SF-0068

When Running a Contest, Don’t Accept Entries From People Who Can’t Enter

I hate finding an awesome sounding contest only to discover I’m not eligible because I’m not American. Well, the tables have turned on this one.

If you read the contest rules (which, by the way, are linked from the bottom of the page and load in the same window, so if you have already entered data and then click to the rules, you might lose what you’ve typed in), only Canadians can enter.

So why, then, is “Other” an option in the Province menu:

Only Canadians can enter... so what is "Other" for?

And for that matter, why are “United States” and “International” options in the Country menu??

Only Canadians can enter this contest...

This appears to be some sort of sneaky lead generation thing, because if you submit the form with US or International information, it happily accepts it and tells you that your entry into the contest has been received. That’s just not true.

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.

push-button-receive-bacon2

Instructions Should Be Written Where I Will See Them

I mentioned a few days ago (This Field is Really Really Required) that you don’t need to mark every required field if they make up the majority of the fields.

However, that doesn’t mean that you shouldn’t point out that all of the fields are required.

This form for a contest for some Quebec hotel does include an instruction that “you must fill in all of the boxes before the form can be sent,” (“all fields required” would be easier…), but they don’t show that instruction until you’re two thirds of the way through the form.

I'm not sure if all of the fields are required or not.

Add to that the potential confusion with the email invitations below – are they also required?

For kicks, I submitted the form without my address filled in (green box in the image above), and I left the email invitations blank too.

Boom. Pop up error message.

Error messages in pop ups are bad. Don't do this. Ever.

Pop ups are bad. Not just because they’re a PITA, but because the form filler-outerer then has to remember what the errors were when they close the pop up.

Side note: I remember being told a story about Vietnamese helicopters (or helicopters during the Vietnam War or something like that) that had emergency instructions printed on the inside of the door. If the pilots needed to eject, the instructions told them what to do. The first step was “Remove door and discard”… well of course once you do that you no longer have the instructions… you get my drift, and if you know the actual story please let me know.

Anyway, I have to remember that my address is missing, and they don’t highlight the field where the error occurred.

And apparently the email invites aren’t required.

My point here is that they should have put the original “all fields required” instruction at the top of the form so that it fell in my visual path, and they should mark the email invites as optional.