Usable Form Labels

Monday 1 November, 2004 ( 2:46PM GMT)

When we label the elements of a form, what are the best terms to use?

Most of the pages on HTML Dog (except those on the Dog Blog) carry a contact form with four fields, simply labelled "Name", "Email", "URL" and "Message".

Absolutely none of these are required (although nothing will be sent if there is nothing in the "Message" text area) because I want people to get on and do what they like with the minimum of fuss. If someone wants to remain anonymous or make a comment that doesn't require a reply (and therefore their email address), I want to give people that option. I'm weird like that, I know - most web sites have some kind of requirements and validation. But whether you agree with this approach or not, it has thrown up some interesting issues regarding the usability of form labels.

The first problem arises with the "URL" field. This is a technical term and some people don't know what it means, which I gather from collecting instances of "?", "URL??" and "I don't know what this means" as the input for that field. URL is not a good term to use - a less technical and more generally understood term such as "Web address" would probably cause less confusion, methinks.

But even this might not be enough - some people type the web page that they are on, which I don't need to know because the form-to-email processing script puts that in the email for me anyway. Maybe "Your web address" might be better?

The bigger problem I have comes from the "Email" field. In a surprisingly large number of messages, people will not leave their email address, even when they require a response.

I have even had a few irate repeat messages along the lines of "I HAVE ASKED YOU THIS MANY TIMES, WHY WON'T YOU ANSWER ME?".

Erm, because I can't - I don't know your email address.

I'm sure that a large number are going to be from those who have simply overlooked or forgotten to fill in the field. But here's a completely unsubstantiated theory - what if there are web users who believe that their email address is automatically sent when a form is submitted? I think most people realise that web browsing and email are two different things and that there is no way of telling someone's email address from a sent form without the sender explicitly stating it. But it seems perfectly logical to me that relative newcomers may believe that their browser and their email programme are in someway intertwined in a single, universal, internet system. Just a thought.

This isn't really a question about whether you should gear up your forms to require one piece of information or another, validate it and alert the user if they have not filled it in (although I bet there'll be a comment or two about that). It's about what you should use as labels and how to make them easier to understand. Even if you validate it, you'll be doing yourself a favour by making things easier for users in the first place. The thing to keep in mind is that, as technically proficient web makers, there are many technical things that we take for granted.

Comments

Comment 1

I would add that the "URL" fields on forms like this should make it clear whether the "http://" prefix is required or not, since it does seem to vary from site to site, and might confuse the uninitiated yet further. I suggest that the best approach is to prefill the URL field with the "http://" so that it is clear that a fully qualified URL must be entered. But then that means that users who choose not to supply a URL won't be sure if they need to clear out the prefilled value or not, and you'll also need a couple of extra lines of server-side code (or client-side JavaScript) to filter out these dummy values. There are other similar alternatives, but none are particularly satisfactory. Any thoughts?!

PS - "URL's starting with" should be "URLs starting with" (no apostrophe, it's not possessive)

So said Marcus Tucker on Monday 1 November, 2004 at 3:52PM GMT.

Comment 2

Any one know how 'auto-fill' on a browser recognizes fields? I love using AutoFill to handle forms, and it seems that using fairly standard labels enables AutoFill (I'm using Safari now, but the same seems true for IE). In this form it AutoFilled 'Name' and 'Email' for me, but not 'URL'. So I suggest using labels that make AutoFill work, but I don't know precisely what those are.

So said Ben Brophy on Monday 1 November, 2004 at 4:29PM GMT.

Comment 3

Please fix your RSS feed of this blog! It has been broken for a long time (at least in Thunderbird). I get:

XML Parsing Error: undefined entity Location: http://www.htmldog.com/ptg/archives/000073.php Line Number 244, Column 21:© Vivabit Ltd. & Patrick Griffiths 2004 | Terms & Privacy | XHTML 1.1 | CSS | Dog Blog powered by Movable Type --------------------^

So said Garret on Monday 1 November, 2004 at 4:42PM GMT.

Comment 4

I would label an website address "Website" - not "url" or "Web address".

Marcus: You should never force a technical requirement on the user. It does not matter if the address is prefixed "http://", if you need it - add it server-side before sending or storing the address.

In regards to validating, then I have had some success with inline helping messages. These are displayed when the user exits that particular field. (example: http://www.baekdal.com/x/email.gif ). The advantage is that they do not see an error dialog, which often puts people off.

But, I still see some rather strange field values from time to time. The funniest ones is when they enter my email address, instead of their own :)

So said Thomas Baekdal on Monday 1 November, 2004 at 4:51PM GMT.

Comment 5

Yeah, "web address" might be better than URL, though just pre-filling the field with "http://" might give a nudge to your more clueful readers what it is you're driving at.

On the email issue, how about explicitly stating in the form, either at the top or beside the email field, something like "be sure to include your email address if you require a reply". Of course this requires your visitors to *read* your page before sending you their question, which won't always happen amongst typical short-attention-span surfers; but maybe the guy who KEEPS ASKING YOU WITHOUT GETTING AN ANSWER might, in desperation, read the site and find out why.

Another option - give your more obscure form <label>s a title= attribute which explains what's required. I've just tested it, and even IE6 displays a tooltip. You might need to add some visual cue to your users the the tips are there, though.

By the way, since you're talking about forms, have you looked at *this* form in IE6? You get "Comment:", then "t:" on the next line, then the comment <textarea>. Weird. You get more space to type into than you do on Mozilla, though. Something to do with floats and em sizing? (I've not peeked at the CSS).

So said Chris Hunt on Monday 1 November, 2004 at 4:57PM GMT.

Comment 6

I think that pre-filling the URL field will only help a very small number of users, where the confusion is whether or not to include the protocol prefix. I always do, as a rule, because my website is at a subdomain. For a www... address this is a stickier issue.

I would suggest something similar to Mr. Baekdal's solution, except to trigger a help message as soon as the user hovers over the field, rather than waiting for them to make a mistake. Often an example could be most helpful.

So said Dave Vogt on Monday 1 November, 2004 at 5:26PM GMT.

Comment 7

Dave, Actually it does both. It displays a help message for fields that requires one (email is currently not one of them), then if people still makes mistakes it displays the "error" message.

The "help" text is not displayed in a box,but next to the box itself. The reason for this is that peope do not notice that the box changes (if it contains both messages). They focus on the field itself, not the box.

I am still in the process of refining this approach, there are a lot of considerations to take into account (you pointed out one of them)

So said Thomas Baekdal on Monday 1 November, 2004 at 5:47PM GMT.

Comment 8

"Maybe "Your web address" might be better?"

How about "Your website's address"?

"In a surprisingly large number of messages, people will not leave their email address, even when they require a response."

Be sure to include your email address if you would like a reply. Replies cannot be guaranteed, but every effort will be made to get back to you.

Or something.

The hardest thing for people with web skills is they don't really understand how little the average user actually knows. You feel like you're belittling the user when you give a horribly obvious instruction, so you leave it out. If you can find a matter-of-fact way to state it, which is going to either be a "but of course, everyone knows that" or a "oh, good thing they mentioned that, I didn't know", there's your course of action.

We try to avoid the mechanics, but sometimes you have to mention them. Bet to do this succinctly, plainly and unambiguously, so even the uninitiated feel like they're in the know, and the web-savvy see it as merely stating the obvious.

So said Neal on Monday 1 November, 2004 at 6:00PM GMT.

Comment 9

Could you put
value="Example Name" onfocus="this.select()"
value="example@example.com" onfocus="this.select()"
value="http://example_website.com/" onfocus="this.select()"
value="Type your comments here" onfocus="this.select()"
with those 4 fields?

So said Peter on Monday 1 November, 2004 at 9:22PM GMT.

Comment 10

Never trust newbies to know anything.

And speaking of form fields, can you PLEASE add a 'Remember me function'? Thank you!!!

So said Dante on Tuesday 2 November, 2004 at 12:19AM GMT.

Comment 11

Why use a comment form at all? Just have a mailto link.
On the dog blog where comments are posted, I can see the need for a comment form rather than a mailto and an e-mail processing bot.
But on the other pages why use a form? For the people where the mailto wouldn't work (webmail users, users on a different computer)?

So said Will Rickards on Wednesday 3 November, 2004 at 6:06PM GMT.

Comment 12

I generally try to subtly show people how to fill out a form by splitting it into a couple of sections.
First section: Please enter your contact details. (I also include a preferred method on commercial sites)
Second section: Please enter your enquiry.

When it comes to the labels, it all depends on the traffic I think, if it is a site with traffic consisting of people less likely to understand technical terms I would put (your) in front of most labels, otherwise I think Web Address etc. is adequate.

I always include a contact email address at the top of the form so when all else fails if they cant use an email program, they may not be worth worrying about…;)

So said Nathan on Thursday 4 November, 2004 at 9:51AM GMT.

Comment 13

"Why use a comment form at all? Just have a mailto link."

1) Visitor is at a library or internet cafe. They do not have an email client set up.

2) Visitor is at a friend's house. They don't want to use their friend's email client.

3) Visitor is at work, and emails are monitored.

If you cannot have an email form, at least provide a valid email address the user can write down and use on their own machine later.

So said Neal on Friday 5 November, 2004 at 1:52AM GMT.

Comment 14

"Why use a comment form at all? Just have a mailto link."

4) Horrible spammers will harvest your address and bombard you with adverts for viagra and dubious money-making schemes.

So said Chris Hunt on Monday 8 November, 2004 at 11:55AM GMT.

Comment 15

I train a lot of computer users, whose expertise and experience varies enormously. Many users have no conception of the difference between their browser, their ISP, Yahoo, a website and a modem even.

Experienced and very clueful visitors will fill in a form while barely glancing at the field names. It's the not so clueful who read and need the field names / labels. I think the more clearly fields can be labelled or explained the better.

So said Miraz Jordan on Monday 22 November, 2004 at 7:53AM GMT.

Comment 16

Perhaps you could mark up the 'URL' part as an <abbr> ?

js and server side checking of the Email field would 'encourage'/force people to fill it in.

So said Chris Neale on Saturday 11 December, 2004 at 11:53PM GMT.

Comment 17

You seem to be a very knowledgeable blog person. I am interested in adding a form to my blog and have the results sent to my e-mail... good or bad idea? How do you write the html tag to send the message? Does the blog site have to have special features enable to support this? Any feedback would be very much appreciated!

So said Denise on Saturday 16 July, 2005 at 9:01AM GMT.

Usable Form Labels

Monday 1 November, 2004 ( 2:46PM GMT)

Comments

See Also