CHI-WEB Archives

ACM SIGCHI WWW Human Factors (Open Discussion)

CHI-WEB@LISTSERV.ACM.ORG

Options: Use Forum View

Use Monospaced Font
Show Text Part by Default
Show All Mail Headers

Message: [<< First] [< Prev] [Next >] [Last >>]
Topic: [<< First] [< Prev] [Next >] [Last >>]
Author: [<< First] [< Prev] [Next >] [Last >>]

Print Reply
Subject:
From:
"Lu, Cindy" <[log in to unmask]>
Reply To:
Lu, Cindy
Date:
Wed, 8 Jan 2003 17:38:23 -0500
Content-Type:
text/plain
Parts/Attachments:
text/plain (293 lines)
ORIGINAL QUESTION:

On Dec. 12, 2002, I posted the following issue and question:

"...our product team has used yellow as the field background to indicate that the field is required (this is Java-based desktop product with some HTML form imbedded in the screens). 

...I would like to propose using something else to indicate the field is required - "Required" in the field, asterisk, or bolded text label.

What's your opinion?  Are there any studies done to support how the required fields are marked?"

On Dec. 19, 2002, I sent another e-mail on this :
I just got an e-mail back from the development manager:
"We cannot put an * beside the label, because the labels in the code are not tied to a field. We have no way of knowing which label goes with which field. That is why we have always highlighted the actual field. When you see the yellow fields that means it is required."

I have received a lot of replies.  Thanks for all who have responded to my question.

SUMMARY OF THE REPONSES:
1. Color should not be used as the only cue to communicate functionalities with users.  In fact, yellow may be annoying to the user or cannot be displayed well on the screen. There other accessibility issues as well.
2. Use asterisk, bolded text, image with Alt tag, or note "required" to inform the user the user field is required.

SOLUTION:
Tie the label with the field and use asterisk at the label to indicate the field is required.

RESULT:
No result yet. I've been trying to convince the manager for the proposed solution but I have not got anything thing back from him due to the holidays and other factors.  I was told there would be a lot of work to do it.  I will report to the list when I get the result. 

ORIGINAL REPLIES:

===from Kilay Reinfeld =====================
I think yellow fields would definitely be noisy.  In my opinion I would
go with red asterisks and/or bolded text next to the field.  Seems to be
most people already know this.

====from Tricia Infante=====================
Our teams have done research in the field of ADA for our forms/applications,
etc. and we've moved toward using an asterisk before each required field,
this way reader programs can inform users prior to the field that it is
required.  We also are not able to rely on color as the only indication.

Hope that helps

====from Nick Gassman=========================
Cindy, my impression is that an asterisk by the field text is the most
common method in general use. I'm a strong believer in de facto
standards contributing to usability unless there's a good reason not to
use it in any given situation.

====from Branda===============================
There is a Section 508 guideline that says meaning
or functionality cannot be conveyed by color alone.
 I don't know if you're working on a government
site, or if the site has an accessibility policy,
but conveying "required field" by color alone would
violate a Priority 1 (minimum compliance) checkpoint.  

Of course, it's also just bad usability... what
about colorblind users?  Run your page through the
colorblind simulator at http://www.vischeck.com and
show that to your developers... while most
colorblind people can see yellow, there is such a
thing as blue/yellow colorblindess, where yellow
would wash out completely or appear gray.

I'm also curious to know if that field color even
*shows up* on all platforms and browsers. Forms
never behave the same in any two browsers.

====from Dey Alexander=========================
I thought that the use of asterisks was the 'de facto standard', but I'm
sure Caroline Jarrett could provide a more useful comment based on her
extensive experience in the design and testing of forms.

From an accessibility point of view, showing meaning solely through the
use of colour is not recommended. Users accessing the form using a
screen reader, text browser or older browser that cannot handle CSS
[assuming you're handling the colour via CSS] would not be able to tell
which fields were required.  In addition, unless the yellow colour is
strong (in which case your comment about screen noisiness is valid),
users with poorly-adjusted or monochrome monitors may also fail to
distinguished between required and optional fields.

Cheers,
Dey

=====from Andrew C. Chase=====================
Hi Cindy,

My guess is, you've recieved quite a bit of mail about the statistics
and examples warning against just such as method as you have
described. So, I'm not going to bother tracking down any hard links to
reference.

I just wanted to throw my vote in against using yellow backgrounds for
your required fields. For one, there is the color-blind argument;
people's perception of colors vary from one person to another.
Additionally, a yellow background just doesn't get the information
across to the user, a subtle hit can work, but make it an estlabished
one that people can expect. An asterick would work great for this
purpose, but remember to explain the astericks meaning at both the top
and the bottom of the page. It's important to put the asterick at the
beginning of course, because this is not a paper document, scanning to
the bottom of a document takes more than an eye movement, it could
possibly require scrolling. To ramble on a littel longer; if you can,
I would try to use the full "required" text next to each required
field to further reduce any unnecessary cognitive load.

Salud,
Andrew

====from William Hudson=======================
If nothing else, I would be very careful about using a light background
colour for something meaningful. Many laptop displays make
light-coloured areas like this look the same as the rest of the page if
not viewed in optimal conditions and at the optimal angle. Asterisk
appears to be a very popular required-field marker and is something of a
de facto standard IMO.

==============================================

====from Mitch Gart===========================

> I just got an e-mail back from the development manager:
> "We cannot put an * beside the label, because the labels in 
> the code are not tied to a field. We have no way of knowing 
> which label goes with which field. That is why we have always 
> highlighted the actual field. When you see the yellow fields 
> that means it is required."
> 
> Well, I am not familiar with Java swings but I believe there 
> must be a way to do it. Is there anyone familiar with Java 
> can help me there?

It has nothing to do with Java.  What the manager is saying
is that some part of the software that is generating the label
is not aware whether the label is required.  But then some
other part of the software is aware, and is able to generate
a yellow field.

The solution is to change the software so the part that is generating
the text of the label is aware of what labels are required.  Then of 
course you can add the '*'.

=====from Kilay Reinfeld======================
If there is no way to put the *** then all I can say is to ensure that
all browsers will be able to see the highlighted fields.  I don't
believe a browser like netscape 4 will display the colored fields.  Let
me know how you go around this!!

====Larry Hull================================
You may be able to forget obtaining evidence concerning the color 
yellow. You are entirely correct that color should not be used as the 
only visual cue. Using a color to convey information effectively bars 
people with some color vision disabilities and possibly some with 
contrast disabilities and may lock out people who are unable to see 
the screen. i.e., anyone that use a screen reader and/or a Braille 
terminal. In your specific case where color is only a clue, the 
effect is to force everyone unable to determine which fields are 
required to fill out every field.

=====Ash Donaldson============================
This is not the only accessibility problem found with indicating
required fields on forms.  The use of an asterisk (character) can be
confusing for non-sighted users.  Coyne and Neilsen (2001) found in
their study "Beyond ALT text" that asterisks can pose a problem:

"DO NOT RELY ON ONLY AN ASTERISK (*) TO INDICATE REQUIRED FIELDS.
A screen magnifier reads an asterisk as star.  Some screen reader
users have learned that the word star means required field, but
several users in our study did not know this.  A few even said that
they didn't know why they sometimes heard the word star, and thought
it might be a bug in their screen reader.

You can still use asterisks to indicate required fields, as many
sighted users know this convention.  However, we recommend that you
also provide another indicator.  Bolded text might work for some
users.  Better would be to only request required information.  Other
than that, consider organizing the page so that all required fields
appear at the top of the form, and all other fields appear toward the
bottom."

Another suggestion (if you are bound, not by pure
usability/accessibility, but by the realities of marketing
requirements also) may be to use an image of a star (preceeding the
label) and have the ALT text read "required field"?

Cindy, I know that this does not address your problem in the GUI, but
I had to add my two cents for accessible web forms... ;-)

Merry Christmas all!

====from Nick Gassman=========================
On Mon, 23 Dec 2002 09:39:38 +1000, Ash Donaldson wrote:

The original question was (I think) about a Java app, but since we've
got onto web forms...

>"DO NOT RELY ON ONLY AN ASTERISK (*) TO INDICATE REQUIRED FIELDS.
>A screen magnifier reads an asterisk as star.  Some screen reader
>users have learned that the word star means required field, but
>several users in our study did not know this.  A few even said that
>they didn't know why they sometimes heard the word star, and thought
>it might be a bug in their screen reader.
>
If you use an asterisk to indicate a required field, you must include
some text that is close by to explain what the asterisk means. As this
will be read out by screen readers, it will be explained just as well to
non-sighted as to sighted users.

>You can still use asterisks to indicate required fields, as many
>sighted users know this convention.  However, we recommend that you
>also provide another indicator.  Bolded text might work for some
>users.

Why is bolded text any more obvious if it's not explained? If it is
explained, then you can explain asterisks just as well. Is bolded text
read out any differently by screen readers from non-bolded? Is it
understood any better by non-sighted users? Use of multiple methods is
just as likely to confuse people.
>
>Another suggestion (if you are bound, not by pure
>usability/accessibility, but by the realities of marketing
>requirements also) may be to use an image of a star (preceeding the
>label) and have the ALT text read "required field"?

If you want to adopt something like this, you're better off using an
html asterisk and a separate image (which could be transparent) with an
alt tag. If you rely on images to communicate critical information, or
as action buttons, then you're at risk if images don't download, or are
slow to load. A transparent image won't be seen by sighted readers, but
the alt tag will be read out.

You can also use the html 'link text' tag. Make the asterisk a null
link, and the link text tag will then work like an alt tag on mouseover.

====from Ash Donaldson========================
Nick wrote:
> Why is bolded text any more obvious if it's not explained?

I agree entirely.  The point I believe that Kara was trying to make is
that we shouldn't rely entirely on one cue to indicate mandatory
fields.

Ash wrote:
> use an image of a star (preceeding the label) and have the ALT text
> read "required field"

Nick responded:
> If you want to adopt something like this, you're better off using an
> html asterisk and a separate image (which could be transparent)
> with an
> alt tag. If you rely on images to communicate critical
> information, or
> as action buttons, then you're at risk if images don't download,
> or are
> slow to load. A transparent image won't be seen by sighted
> readers, but
> the alt tag will be read out.

To clarify, I meant to use an image of the asterisk (I called it
a 'star') with an ALT tag attribute that reads "required field".  This
way, users of screen readers will have field labels precursored
with "required field", and that 'annoying bug' (screen reader
reading "star") will be removed.  The image would only be a few bytes,
and if it didn't load, the ALT text would remain.  As an adjunct, if
the asterisk image is in a different colour (such as the population
stereotype of red), sighted users will reap the benefits of an easily
scanned visual convention.

Sorry about being vague in my last post.  'Tis the season... ;-)

Of course, probably a better option with required fields is to simply
do away with images and asterisks and explicitly have the
text "required" (or whatever word tests well with the localised target
audience) appended (in red) to the label i.e.
First name (required):
Middle name:
Last name (required):
Cons to this may be cognitive load of word recognition (internal
vocalisation slowing the user down) v. symbolic representation (faster
cognition once learned), and visual layout (visual designers,
marketers and managers so often hate to see forms cluttered with
words).

Anyway, enough from me.  Merry Christmas everyone! :-)
=======================END=====================

    --------------------------------------------------------------
    Tip of the Day: Use the archives to research common questions
     CHI-WEB: www.sigchi.org/web POSTINGS: mailto:[log in to unmask]
              MODERATORS: mailto:[log in to unmask]
       SUBSCRIPTION CHANGES & FAQ:  www.sigchi.org/web/faq.html
    --------------------------------------------------------------

ATOM RSS1 RSS2