Are you losing conversions because your forms suck?
Have you ever been frustrated by a web form? Me too. And lately I’ve been on a bit of rant because I’m finding more and more forms that suck. So I’m going to show you some examples of recent sucky forms that I’ve found so that you don’t make the same mistakes. You will lose conversions if your form sucks – unless you’re giving me something incredibly valuable, I’m not wasting my time.
Most of these examples come from contests I’ve recently entered. That’s really their only saving grace – the fact that I’m willing to put a lot of energy into filling the form out because there’s the potential that I could get something awesome.
We like to call this the “vending machine in the desert” phenomenon. If there’s only one vending machine for thousands of sandy, sandy miles, I’m going to do whatever it takes to get a cold drink out of it. But if there are 17 vending machines side by side (read: you and your competitors all offering a white paper), I’m going to go with whatever’s easiest.
Um, what should I put in here?
This Air Miles contest form is pretty simple – one field. I like it. But, um, what do I type in there? I tried my email address several times – not only did it not work, it didn’t show any text at all! After I accidentally hit some numbers, I figured out that the field only accepted numbers as entry… but I still didn’t know what to put in there.
Only when I submitted the form without typing anything in did it tell me in the error message that I needed to enter my Air Miles collector number. This never even occurred to me because this was a WestJet contest. But clearly I should have been able to figure that out on my own with no label on the form field.
Oh, you mean I have to fill out that field too?
If you take a look at this entry form for a JetBlue contest, surely you’ll agree with me that it looks like you either have to fill out your Last Name and TrueBlue number or your email address. And we’d be wrong.
Apparently, you have to fill out your Last Name and either your TrueBlue number or your email address. The problem here is that the designer hasn’t used good Gestalt psychology to group related items (in this case the TrueBlue number and email address fields) together.
Hang on, which of these fields is required?
You’re probably used to seeing asterisks beside fields that you have to fill out, right? Me too. So when I was zipping through this Travelocity contest entry form, I did a double take when I saw the asterisk beside the Apt/Suite field. Now, I live in an apartment, but normally I put the number in the regular address field.
Did you notice the tiny little “*Optional” in the bottom left corner below the CAPTCHA? No? Me neither. But that’s the instruction that fields with asterisks are optional. If you really really want to mess with conventions and switch the asterisk to optional fields, at least put that somewhere where I’ll notice it – in my visual path (not only is it not on my visual path as I scan through the form, but it’s actually below an image that’s going to act as a visual barrier too).
As an added annoyance, the phone number field also requires specific formatting (##########), but fails to mention that until you do it wrong.
Help? What’s wrong here?
If an error can’t be avoided, at least give me some information that will help me fix it. Apparently IBM is too good for that though.
I was creating an account for some software at work, filled out the form correctly (as far as I could tell). And got this error message: “We’re sorry. The information provided is not valid. Please try again.”
Any chance you could tell me what isn’t valid? I’m pretty sure that I know my name, address, phone number, etc. better than you do, IBM. So obviously I’ve made a formatting mistake or something somewhere. But since I couldn’t figure it out, I gave up.
How do you make sure your forms don’t suck?
Start by making sure you’re not making the same mistakes these guys are:
- Confusing or missing labels
- Grouping form elements in a way that doesn’t make sense
- Not clearly indication what’s required and what’s not
- Displaying useless error messages
I promise that I’ll follow up with a form best practices blog post.
If you have form questions, I’d love to hear them. Leave a comment below and I’ll reply. If it’s an especially awesome form comment or question, I might even write you your own post.
If you have examples of forms that sucks, tell us about them in the comments below. The more examples we have of what not to do, the better we’ll be at doing it right.