form label

[Brian]

I'm wondering what the group thinks is the best way to display the
<label> element. The default rendering in Moz and MSIE/Win (probably
others, too) only changes the mouse cursor (that's a strange term) from
text-select to default (an arrow). That, to me, is too subtle, and is a
bit like "mystery meat" navigation. The user must hover the mouse before
they know there was something special.

Simon Willison suggested changing the cursor to pointer used for links.
I don't like that approache for two reasons: one, it confused links with
labels; and two, it still suffers "mystery meat" syndrome.

I've decided to add underlining to my labels, at least on a trial basis.
The advantage is that it gives the user a clear indication that there's
something different about that text. The danger is that it, too, could
confuse visitors into thinking there's a link. The only distinguishing
characteristic is the color: black for <label>, and the user's default
link color for <a>. But then, there's no real danger to a user clicking
on a label. It will only change focus to the associated field.

Here's an example:

http://www.bonfete.biz/contact/

Any thoughts?

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[Neal]

On Wed, 25 Aug 2004 13:09:49 -0400, Brian
<us*****@julietremblay.com.invalid> wrote:

I'm wondering what the group thinks is the best way to display the
<label> element. The default rendering in Moz and MSIE/Win (probably
others, too) only changes the mouse cursor (that's a strange term) from
text-select to default (an arrow). That, to me, is too subtle, and is a
bit like "mystery meat" navigation. The user must hover the mouse before
they know there was something special.
Yet there are form controls available, so the label not being clearly
identified as having special powers doesn't really reduce functionality
like true mystery meat. Rather, it fails to notify the user that there is
anything special.
Simon Willison suggested changing the cursor to pointer used for links.
I don't like that approache for two reasons: one, it confused links with
labels; and two, it still suffers "mystery meat" syndrome.

I've decided to add underlining to my labels, at least on a trial basis.
The advantage is that it gives the user a clear indication that there's
something different about that text. The danger is that it, too, could
confuse visitors into thinking there's a link.
I don't like either for the same reason.
The only distinguishing characteristic is the color: black for <label>,
and the user's default link color for <a>. But then, there's no real
danger to a user clicking on a label. It will only change focus to the
associated field.
No danger, no, but...
Here's an example:

http://www.bonfete.biz/contact/

Any thoughts?

.... I'm thinking this just feels awkward to me to use. Not the ideal
solution, I think.

Perhaps a dotted under-border, then if the user expects a tooltip you can
add title to tell them this is a label for a form item. Or something along
those lines.

What's hard is the typical user knows links are underlined, so a solid
underline is going to bear similarity to a user experience, for good or
bad. But I can't imagine most people are aware of how form labels work at
any level, and besides browsers don't really do anything special to them
so how would they? Since there's no commonly-known UA behavior to work
from with these, we're inventing whatever usability-friendly method we use
from scratch, which means no pages will do it the same, which means the
users won't ever have a way that they're most used to.

Interesting topic.

[Brian]

Neal wrote:

Brian wrote:

<label> element. The default rendering in Moz and MSIE/Win
(probably others, too) only changes the mouse cursor (that's a
strange term) from text-select to default (an arrow). That, to me,
is too subtle, and is a bit like "mystery meat" navigation.
Yet there are form controls available, so the label not being clearly
identified as having special powers doesn't really reduce
functionality like true mystery meat.

Well, ok, but if you lose the funtionality of the label because it's not
apparent, then there is something missing.

Simon Willison suggested changing the cursor to pointer used for
links.

I've decided to add underlining to my labels

I don't like either for the same reason.

Well, poo! :-p

Here's an example:

http://www.bonfete.biz/contact/

Perhaps a dotted under-border, then if the user expects a tooltip you
can add title to tell them this is a label for a form item. Or
something along those lines.

Not ideal. What should one put in the title that isn't device specific?
i.e., "click this text to focus on the 'email' input" is awkward, and
far too concerned with the mechanics, which is a bad idea. What if the
user does not use a mouse? Will they understand "focus"? Or "input"?
besides browsers don't really do anything special to them so how
would they?
The problem as I see it is that there is a limted number of things we
can do to distinguish text, and we've already expended our reserve:

underline -> links
dotted bottom border -> abbr and acronym
italics -> emphasis, definition, book title, foreign words, etc.
bold -> strong emphasis
Since there's no commonly-known UA behavior to work from with these,
we're inventing whatever usability-friendly method we use from
scratch, which means no pages will do it the same, which means the
users won't ever have a way that they're most used to.

Yeah, that's the really awful part of it. I suppose it's no worse than
before <label> was added. But it pains me, because <label> is one of the
few elements that truly enhances a page and adds usability, especially
for selecting those tiny checkboxes and radio buttons.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[Neal]

On Wed, 25 Aug 2004 15:12:26 -0400, Brian
<us*****@julietremblay.com.invalid> wrote:

Neal wrote:

Perhaps a dotted under-border, then if the user expects a tooltip you
can add title to tell them this is a label for a form item. Or
something along those lines.
Not ideal. What should one put in the title that isn't device specific?
i.e., "click this text to focus on the 'email' input" is awkward, and
far too concerned with the mechanics, which is a bad idea. What if the
user does not use a mouse? Will they understand "focus"? Or "input"?

That's just it - what terminology could you use that would be more
universally applicable AND understood than "Try clicking me ;)"? (Which I
kinda like, except that some users don't click.) As it's a tooltip, it
seems this would be more appropriate a place than any other to put
something dealing with the machanics.
I suppose it's no worse than
before <label> was added. But it pains me, because <label> is one of the
few elements that truly enhances a page and adds usability, especially
for selecting those tiny checkboxes and radio buttons.

All the old Myst players will click anywhere anyway, so they'll find it
fine. It is a shame though. Those buggers are too useful to be left with
no recognizable rendering.

[Brian]

Neal wrote:

Brian wrote:

I've decided to add underlining to my labels, at least on a trial
basis.

http://www.bonfete.biz/contact/

... I'm thinking this just feels awkward to me to use. Not the ideal
solution, I think.

Perhaps a dotted under-border, then if the user expects a tooltip you
can add title to tell them this is a label for a form item.

I decided to change it to a dashed border. That's different than <abbr>
and <a href...>. The disadvantage is that MSIE/Win cannot do dashed
border, so it'll still be solid in that (cough)piece of s***(cough)
browser. I changed the color of the border to something a bit more mute.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[Brian]

Neal wrote:

Brian wrote:

Neal wrote:

Perhaps a dotted under-border, then if the user expects a tooltip
you can add title to tell them this is a label for a form item.
Not ideal. What should one put in the title that isn't device
specific?

That's just it - what terminology could you use that would be more
universally applicable AND understood than "Try clicking me ;)"?
(Which I kinda like, except that some users don't click.) As it's a
tooltip, it seems this would be more appropriate a place than any
other to put something dealing with the machanics.

Eh, I don't like mechanics anywhere. Title != tooltip, even if browsers
present them as such. Who knows what might come along to change that
rendering.
All the old Myst players will click anywhere anyway, so they'll find
it fine.

You've lost me. What is "Myst"?
--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[Neal]

On Wed, 25 Aug 2004 20:56:37 -0400, Brian
<us*****@julietremblay.com.invalid> wrote:

Neal wrote:

All the old Myst players will click anywhere anyway, so they'll find
it fine.

You've lost me. What is "Myst"?

http://www.mismatch.co.uk/myst.htm

It's a classic game, the graphic rendering was considered
state-of-the-art. If you're into thoughtful logic games try it.

[Pierre Goiffon]

"Brian" <us*****@julietremblay.com.invalid> a écrit dans le message de
news:10*************@corp.supernews.com

http://www.bonfete.biz/contact/

Err, in french we say "bonne fête" instead of "bon fête"

[Jukka K. Korpela]

Brian <us*****@julietremblay.com.invalid> wrote:

I'm wondering what the group thinks is the best way to display the
<label> element.

I think the first question should be "why". That is, what do we try to
achieve by changing the element's appearance?

There are various things that <label> elements may do to help the user.
I _just_ learned that for a text field, you can click on the label, too,
in order to focus on the field! But I don't think that's a particularly
useful feature (though not harmful either).

More importantly, users may need to be helped to see the _association_
between labels and fields. But in the most common designs, the
association is pretty obvious anyway, since each line or row contains one
label and one field.

This leaves, in my opinion, the feature that you can toggle the setting
of a radio button or a checkbox by clicking on its label, as mentioned
elsewhere in the thread. This is something relevant especially to people
with motoric disabilities or motorically challenged situation (try
clicking on a ridiculously small radio button using a portable computer's
excuse for a surrogate for a mouse, while sitting in a moving bus).
And users may even expect, from other user interfaces, that clicking on
the label affects the setting.

For this, I think putting the radio button or the checkbox in a bordered
box together with its label, with a distinctive background color for the
box, makes the situation as clear as possible without being too explicit.
(You could always write some text on the page, explaining how people can
click on the labels, but this gets awkward, especially since you would
then mislead many people who use browsers where things don't work that
way.) There are some examples of this approach at
http://www.cs.tut.fi/~jkorpela/forms/kbd.html

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Brian]

Pierre Goiffon wrote:

Brian a écrit

http://www.bonfete.biz/contact/

Err, in french we say "bonne fête" instead of "bon fête"

Wait til I tell the client (my sister) that one! :-D

We've already prepared a page on this:
http://www.bonfete.biz/about/name

In case you don't want to read it, here's the story: In the U.S., where
this company is based, people are familiar with "bon", from the phrase
"bon appetit" if nothing else. However, people are not familiar with the
feminine form, "bonne". Thus, my sister named her company Bon Fête.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[Nick Kew]

In article <41***********************@news.free.fr>,
"Pierre Goiffon" <pg******@nowhere.invalid> writes:

Err, in french we say "bonne fête" instead of "bon fête"

Pierre, don't let it worry you. They mangle English too.

(They being usually 'merkins; I don't know if that incluses Brian)

--
Nick Kew

[Harlan Messinger]

"Nick Kew" <ni**@hugin.webthing.com> wrote in message
news:9r************@webthing.com...

In article <41***********************@news.free.fr>,
"Pierre Goiffon" <pg******@nowhere.invalid> writes:

Err, in french we say "bonne fête" instead of "bon fête"

Pierre, don't let it worry you. They mangle English too.

(They being usually 'merkins; I don't know if that incluses Brian)

The Brits mangled both languages so much after 1066 that they got fused
together and are known now as Middle English.

[Brian]

Nick Kew wrote:

"Pierre Goiffon" <pg******@nowhere.invalid> writes:

Err, in french we say "bonne fête" instead of "bon fête"

Pierre, don't let it worry you. They mangle English too.

(They being usually 'merkins; I don't know if that incluses Brian)

Those does incluses me. I being 'merkin. Shute, I been malined now.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[Nick Kew]

In article <10*************@corp.supernews.com>,
Brian <us*****@julietremblay.com.invalid> writes:

(They being usually 'merkins; I don't know if that incluses Brian)

Those does incluses me. I being 'merkin. Shute, I been malined now.

Hehe. I meant to put 'They' in quotes, to indicate better that 'they'
and merkins were separate entities with no direct relationship beyond
the fact that a high proportion of the worst offenders are 'merkin:-)

As Harlan points out, the Brits have a longer history of it ...

--
Oook!

[Pierre Goiffon]

"Brian" <us*****@julietremblay.com.invalid> a écrit dans le message de
news:10*************@corp.supernews.com

Err, in french we say "bonne fête" instead of "bon fête"

Wait til I tell the client (my sister) that one! :-D

We've already prepared a page on this:
http://www.bonfete.biz/about/name

Oh well, good :)

[Pierre Goiffon]

"Nick Kew" <ni**@hugin.webthing.com> a écrit dans le message de
news:9r************@webthing.com

Err, in french we say "bonne fête" instead of "bon fête"
Pierre, don't let it worry you. They mangle English too.

I sure mangle french too :D In fact, I often sees foreign people speaking
and writing french better than me... damned. It"s a very nive language but
pretty hard.
(They being usually 'merkins; I don't know if that incluses Brian)

I didn't find even in my french-english dictionnary the word "merkins", so I
can't understand :/ Someone to explain that to me please ?

[Pierre Goiffon]

"Jukka K. Korpela" <jk******@cs.tut.fi> a écrit dans le message de
news:Xn*****************************@193.229.0.31

I'm wondering what the group thinks is the best way to display the
<label> element.

I think the first question should be "why". That is, what do we try to
achieve by changing the element's appearance?

There are various things that <label> elements may do to help the
user. I _just_ learned that for a text field, you can click on the
label, too, in order to focus on the field! But I don't think that's
a particularly useful feature (though not harmful either).

Yes it's useful !! Nowdays you've got pretty complex applications on the
web. For now, the vast majority of this complexity is in the back office web
pages... And sometimes you can find a lots of checkboxes ! So its very very
usefull then to be able to check them using the label, it's really time
saving : don't need to point exactly in the checbox...

This is very common in UI, but in a web context <label> is used for that
just since a little time. So users are not used to be able to check a
checkbox or a readio button clicking on its associated label... And you have
to show her/him that he can do it, otherwise she/he will continue to point
exactly to the form object. The best I can see now is to use the CSS cursor:
pointer for labels... Underlining labels is I think a bad solution : you
have to keep the underline form to their common uses (links and "important"
text)

[Brian]

Pierre Goiffon wrote:

"Nick Kew" <ni**@hugin.webthing.com> a écrit

I often sees foreign people speaking and writing french better than
me...
I know what you mean. After returning from a study abroad program in
Paris, I was hanging around with this Haitian. I was quite surprised
that she used subjunctif imparfait, which is not so common in France,
and even subjunctif plus-que-parfait. (!) I didn't know there was such a
thing until she told me. Her French was very formal.

(They being usually 'merkins;

I didn't find even in my french-english dictionnary the word
"merkins",

Ha ha, no you won't find that word. Nick made it up. Or maybe it's
something Brits use, I don't know.
so I can't understand :/ Someone to explain that to me please ?

American. Just drop the first syllable, and slur the rest of it
together. You know, the way you French people say, "je ne sais pas".
;-) (To the non-Parisians in the group: it sounds almost like "chez pas".)

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[Brian]

Pierre Goiffon wrote:

"Jukka K. Korpela" a écrit

There are various things that <label> elements may do to help the
user. I _just_ learned that for a text field, you can click on the
label, too, in order to focus on the field! But I don't think
that's a particularly useful feature (though not harmful either).

Yes it's useful !! Nowdays you've got pretty complex applications on
the web. For now, the vast majority of this complexity is in the back
office web pages... And sometimes you can find a lots of checkboxes !
I think J.Korpela was saying that <label> isn't really necessary for
input boxes and textareas. And I think he's right. So for the form on
bonfete.biz, I could just ignore it. But I was asking specifically for
checkboxes and radio buttons.
So its very very usefull then to be able to check them using the
label, it's really time saving : don't need to point exactly in the
checbox...
I think we're all in agreement on this point.
This is very common in UI, but in a web context <label> is used for
that just since a little time. So users are not used to be able to
check a checkbox or a readio button clicking on its associated
label... And you have to show her/him that he can do it, otherwise
she/he will continue to point exactly to the form object. The best I
can see now is to use the CSS cursor: pointer for labels...
Underlining labels is I think a bad solution : you have to keep the
underline form to their common uses (links and "important" text)

The "pointer" is also used for links, so this seems to be at least as
bad. And it suffers from mystery meat syndrome, as I mentioned earlier.
The <label> is not very useful if users have to guess that it will do
something, and hover their mouse to find out. An underline would tell
them there's something there just by looking. The underline should be
the same color of the label text, and certainly different than link text.

But I see your point about confusing them. I've changed to dashed green
bottom border. And I may yet adopt J.Korpela's solution of a border
around the label and associated input.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[Jukka K. Korpela]

Brian <us*****@julietremblay.com.invalid> wrote:

I think J.Korpela was saying that <label> isn't really necessary for
input boxes and textareas.

Oh, I seem to manage to get misunderstood quite successfully. :-)

What I referred to was the particular effect that clicking on a label
focuses on an input box (or textarea). I cannot find it useful, though I
might miss something.

But using <label> is useful for other purposes, such as helping speech
browsers to associate labels with fields - and perhaps for styling
purposes as well.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Brian]

Jukka K. Korpela wrote:

Brian wrote:

I think J.Korpela was saying that <label> isn't really necessary
for input boxes and textareas.
Oh, I seem to manage to get misunderstood quite successfully. :-)

No, I think I'll take the fall for this.
What I referred to was the particular effect that clicking on a label
focuses on an input box (or textarea).
That's what I was trying to say, but I overgeneralized. Our discussion
was limited to visual (gui) browsers.
I cannot find it useful, though I might miss something.
I'm with you on that one. For screen browsers, it's just as easy to
click inside an input text box as that input's label. As you mentioned,
and as I tried to convey, the <label> element is more useful elsewhere,
e.g., checkboxes or radio buttons.
But using <label> is useful for other purposes, such as helping
speech browsers to associate labels with fields - and perhaps for
styling purposes as well.

That, too. :-)

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/