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*****@juliet remblay.com.inv alid> 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*****@juliet remblay.com.inv alid> 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*****@juliet remblay.com.inv alid> 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*****@juliet remblay.com.inv alid> a écrit dans le message de
news:10******** *****@corp.supe rnews.com

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

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

[Jukka K. Korpela]

Brian <us*****@juliet remblay.com.inv alid> 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/