How to indicate required or optional form fields
I got a question from Kimberly, one of our reader, in the Sensible Forms: A Form Usability Checklist post where she asks where the best place to display the asterisk indicating a required field in af form is:
[…] I’d like to see the askterick appear before the label so that a user isn’t forced to read every label or field and can simply look for the askterick. What do you think?
The short answer is: It depends on the graphical design as long as you remember the disabled users.
I would like to say that there is generally two ways of showing required and optional fields:
- Grouping required and optional fields in different groups (fieldsets)
- Indicating next to each field or label if this field is required or not
There can be many design reasons why one of the above ways can’t be used in a given situation. So I will not say that one should always be used instead of another (even though design should never out-rule usability!), but there is still drawbacks and benefits with both versions.
The general rule should of cause be that whatever version is used, disabled users should have just as fair a chance as normal users to see which fields that are required and which that isn’t. This is a highly difficult subject with lots of ifs, buts’ and maybes and you have to take the different groups of people into account:
- People using a screen reader (mostly blind people)
- People using a magnifying glass (electronic or IRL)
- Non-disabled people (the rest of us)
On this subject I find the guide “Required Form Fields” from Simply Accessible very useful. Remark: If you use the trick with showing the asterisk to the right of the field even though it is physically located inside the label, you just have to remember that this doesn’t help people that depend on a magnifying glass, since they won’t necessarily see what’s located all the way to the right.
Another point could be that if you use actual words like “required” or “optional” a screen reader would say these out loud giving a clear indication to the blind user. Using an image of an asterisk with the word “required” inside the “alt” attribute could also be a solution since I would imagine that most screen readers read “alt” attributes out loud as well. On the other hand using bold to indicate a required field might create issues with screen readers since there is no textual indication that a given field is required.
Examples: Grouping required and optional fields
Many popular websites take this approach. Of a few can be mentioned:
- The New York Times
Click on thumbnail to see larger image - All phpBB forums
- Basecamp by 37signals
- Freshmeat
Some even have different pages for each group of fields creating a wizard like effect (Amazon for one)
Examples: Indicating next to field or label if required
This category is a bit more diverse. You can imagine an endless amount of different ways to indicate that a specific field is required, or you can turn the tables around and indicate that a field is optional. There generally is 3 popular ways of doing this:
- Asterisk next to either label or field marking the field as required:
- Bold label marking the field as required:
- The word “optional” or “required” in brackets next to either the field or the label:
Bugzilla
Here all labels are bold and does not mean that the field is required!Wikipedia
Here the asterisk actually means something else than “required”!
Conclusion
Looking at the examples that use an asterisk to indicate a required field it’s clear that common practice is to color the asterisk in a different color than the text in the label. All of my examples above use a shade of red to do this. The color red has a special effect on the human brain so that it is noticed before other colors and given a stronger weight. As a non-disabled user I prefer to quickly skim a form to get an idea of which fields I am required to fill out. Using the red color helps me do this. UPDATE: Brian Crescimanno has brought an important fact to my attention which he also wrote about in his A List Part article:
I advise against using the color red to denote required fields, because red most often indicates an error or warning. […] so pick a color that will not be confused with error messages.
I would always try to group form fields into fieldsets so required and optional fields are separated – remember to clearly state if a group is required or not. If this isn’t possible due to design or logical issues I would use the word “optional” (or “required” – whatever makes the most sense) in brackets next to the label. My last option would be to use asterisks if using actual words would be a design issue.
I would never use bold to indicate required fields since this potentially could cause misunderstandings with people using screen readers. I would never show a required/optional indication to the right of the field – always next to the label.
Technorati Tags: usability, accessibility, forms, screen reader, screen readers
March 29th, 2006 at 18:56 (GMT-1)
Nice follow-up to my initial article and I thank you for pointing me to it.
A couple of comments:
I completely agree with the statement to never use bold fields and especially the concept of grouping your required elements together. It almost always makes far more sense to group required fields–the marketing departments are the ones who will complain. Keeping the optional fields separated makes it easier for users to avoid filling them out.
Avoiding using the asterisk is a good suggestion as well–one that I’m definitely coming around to. Obviously, design issues sometimes mandate that it is used over a “required” tag.
Again, I’ll point out that I don’t like using the color red to indicate a required field (though it is becoming common practice). Everywhere else you look, red is generally indicative of an error. People already make a strong correlation between the color red and a problem to be corrected. I think its unfortunate that this bad practice has become commonplace.
As far as the placement of the “required” label–you’re spot on. Unless design issues *absolutely* force you to move it to the opposite side, always include it with the label.
Nice write-up here, I like the direction.
March 29th, 2006 at 19:01 (GMT-1)
[…] Thomas Watson has written an interesting follow-up to my article published in A List Apart. While I still disgaree with the red color being used to indicate required fields, the post provides some sound advice. I’ve also added some comments of my own. […]
March 29th, 2006 at 19:37 (GMT-1)
I shall post an elaborate comment on this post on my blog tomorrow morning (it’s late in the night right now), but I did have a quick opinion.
How about also adding a color-based indicator to indicate required fields? It needn’t be red or a stark color, but a subtle background color for those field rows (or input boxes) could also help increase the awareness of those fields having the significance of being required? This would also solve the problem for weak sighted users as well.
More on this later on my blog.
March 29th, 2006 at 19:52 (GMT-1)
Hemanshu,
This is a cool idea for input boxes–but it really doesn’t communicate the real message. “Why is the box a different color?” is likely a more common response than “oh, this box is shaded so it is…required?”
More important, however, is the issue of required fields which are not some form of text-input box. Also, if the color is subtle, low-sight users may not notice the difference anyway. And screen readers don’t much care what color the text boxes are, so it doesn’t help them either.
Hands down, the best way to maintain accessibility is to flat out state that the field is required.
March 29th, 2006 at 22:17 (GMT-1)
Brian,
You are right about that the red color might lead some users to wrongly think of an error. Didn’t think of that when I wrote the article – even though you so clearly pointed it out in your article on A List Apart ;)
… maybe I should update the post with this point.
March 30th, 2006 at 07:32 (GMT-1)
The sleep did me in, as the comment was half baked.
The idea was to have differently colored filed backgrounds in addition to the asteriks positioning as mentioned in simpleaccessible.org link in the post, where it’s physically placed after the box, but the screen reader gets around to reading it right after the filed label.
This way it benefits all three kinds of users. As for the subtle color, I simply meant not using a harsh color (bright red or pink of blue *grin*), but by subtle I don’t mean that the gradient is so low that it is missed.
March 30th, 2006 at 07:33 (GMT-1)
That was me, above :)
April 3rd, 2006 at 11:16 (GMT-1)
Another issue about using bold: A lot of bold fonts looks very similar to non-bold with cleartype and some other screen effects. Obviously this is an error desing but it happens.
May 23rd, 2006 at 10:24 (GMT-1)
Very insightful article and comments here. I’d just update with the screenshots from Simplyaccessible you mention in your article, Thomas:
I think that also illustrates the importance of visualising multiple states. To indicate required form fields is one thing (and is mostly important before you enter in the fields). To indicate error messages happens when things have gone wrong, and that’s another situation in another state.
The ideal form fields must support both situations.
May 25th, 2006 at 06:14 (GMT-1)
[…] R/3 How to Show Whether Form Fields are Required Posted by Smiley Cat: Christian Watson’s Web Design Blog on 8 Apr 2006 9:50 am. Filed under WebDevelopment. Just Add Water has a useful article on techniques to show whether form fields are required or optional. Personally, I tend to put an asterisk next to the label of the required field, or write (required) after the input box, depending on the layout of the form (although, on reading the artcicle, my second approach seems to be questionable). One good point is not to use bold to indicate required fields as this causes accessibility issues. […]
June 21st, 2006 at 13:59 (GMT-1)
As you stated yourself, “The color red has a special effect on the human brain so that it is noticed before other colors and given a stronger weight.” In that case red color should be used to indicate any type of information that is important or crytical in completing a task. This includes errors, required fields, special instructions, etc.
August 14th, 2006 at 23:10 (GMT-1)
[…] How to indicate required or optional form fields […]
August 7th, 2007 at 23:53 (GMT-1)
I found this article, and subsequent discussion, to be very helpful — thanks to all who contributed!
August 16th, 2007 at 16:30 (GMT-1)
Thanks for this list. I have always hard time designing forms but this article is very useful to sort some of my issues.
November 18th, 2007 at 17:29 (GMT-1)
[…] How to indicate required or optional form fields […]
December 5th, 2007 at 21:41 (GMT-1)
[…] justaddwater.dk | How to indicate required or optional form fields I got a question from Kimberly, one of our reader, in the Sensible Forms: A Form Usability Checklist post where she asks where the best place to display the asterisk indicating a required field in af form is: (tags: justaddwater.dk 2007 mes11 dia5 at_tecp usability forms validation required_field form_design blog_post) […]
December 11th, 2007 at 23:49 (GMT-1)
Using an asterisk is fine for labels in a form. But what about headers in a table?
Say you are filling in a table, but not all the columns are necessary. Do you put an asterisk in the required columns’ header?
I don’t remember seeing this in any application or website. Should this be done?
Thanks.
January 25th, 2008 at 21:47 (GMT-1)
I disagree with the comments regarding not using RED to indicate a required field. IMHO, using RED to indicated a required field is functionally similar to indicating a warning or an error.
The fact is, the form is telling the user to “be WARNED” that they MUST provide input in that field or an ERROR will occur; of course the error is usually very mild and would only result in the form not being able to be submitted until completed but it would still be an error.
In other words, in this context, the RED text is warning the user that they could generate an error.
February 25th, 2008 at 21:30 (GMT-1)
Are we usability gurus forgetting that about 15% of the population have some form of colour-blindness and don’t see red the way you think? I encourage you to visit http://www.wellstyled.com/tools/colorscheme2/index-en.html and see just how different red looks to the different forms of colour-blindness. There are also online tools to show you what your images look like to colour-blind people. I strive to design sites that don’t rely on colour to relay information to the user. IMHO the site should be equally usable in B&W and with all your CSS stripped away. Although, I mostly design sites used by government agencies and they have strict guidelines for accessibility.
June 11th, 2008 at 00:49 (GMT-1)
I have to disagree with the ALA article on not using red because of its reserved use for errors. I think that is exactly why it is such an effective color for the required asterisk…it is showing that unless you enter information in this field you will generate an error. (I just looked up and see that Brandon wrote almost the same thing, oh well this is typed already).
It is important to note that a red asterisk is an asterisk first and red second….meaning that being colorblind does not prevent you from understanding this message.
September 1st, 2009 at 18:03 (GMT-1)
We’ve seen recent studies (CXpartners) that seems to indicate users never look at the standard * indicates required fields text when they’re fillling out forms. It’s just a form and they fill it out, assuming you only ask for what you need. One thing I’ve seen that looks like a good option is having the text box initially contain the word Optional in gray if the field is optional.
October 18th, 2010 at 01:07 (GMT-1)
[…] How to Indicate Required or Optional Form Fields – Thomas Watson Steen […]