Usability Fail

I love examining forms online for usability. Yes, I know, strange, but it makes me feel better when I do something wrong. I back up and try and figure out what clues I followed to get to that dead end.

Recently ran into an interesting one while trying to sign up with Meetup.com.

A student recommended the site to me, even though (or perhaps because) she knows I’m an introvert. And it is a good way to see different meetups in your area and maybe practice that magical skill: networking.

As an introvert, I don’t go out much, but I know that networking would help me professionally. So, I decided to join Meetup.com.

I clicked the sign up link and started to fill out the form and was greeted with this error:

markup.com error: This cannot be an email address

Granted, I had only glanced at the form when I started filling it in. I’ve filled in hundreds of sign up forms, usually they ask for an email address and sometimes they ask you to verify that email address, so that’s what I thought was happening here. Also note that the only text above the form field (Or, sign up using email) mentions email.

And there’s nothing to help me figure out what I’m supposed to put there. The error text tells me what it shouldn’t be, but if it can’t be an email address, what is it supposed to be?

Here’s the form before anything is entered:

empty form showing the your name field name

Ah, that first field is for my actual name. Okay. Now I know how to fill out the form at least, but I had to delete what I’d entered to figure that out.

How Do We Fix It?

I know most people would just fill out the form and move on, but I’m an experience designer/web developer/strange person. I want to know what I would do to make it better.

Better Labels?

First of all, maybe labels for the input fields? I have to admit, I’m old-fashioned, I like clear labels.

example of clear labels

Better Error Message?

But, I do understand with mobile first (which I agree with and heartily recommend Mobile First by Luke Wrobleweski from A Book Apart) that we may want to put the labels in the form field to save some precious space.

How about a better error message? Don’t tell me what I did wrong, tell me what I should do to fix it. Error Message 101, really.

example of better error message

Voila, problem fixed. I might still feel a little stupid for not reading the form before I started to enter something, but I wouldn’t stare at the form wondering what I was actually supposed to put there.

Leave a Reply