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:

  1. Grouping required and optional fields in different groups (fieldsets)
  2. 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:

  1. People using a screen reader (mostly blind people)
  2. People using a magnifying glass (electronic or IRL)
  3. 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:

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:

  1. Asterisk next to either label or field marking the field as required:

    Yahoo
    Yahoo! Registration - Asterisk before label

    IBM
    IBM Create Account - Asterisk before label

    The Washington Post
    The Washington Post Register - Asterisk before label

    Spread Firefox
    Spread Firefox Create Account - Asterisk after label

  2. Bold label marking the field as required:

    Technorati
    Technorati - Bold is required

  3. The word “optional” or “required” in brackets next to either the field or the label:

    Bugzilla
    Bugzilla Create Account - The word optional after the field
    Here all labels are bold and does not mean that the field is required!

    Wikipedia
    Wikipedia Create Account - The word optional after label
    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: , , , ,

22 Responses to “How to indicate required or optional form fields”

  1. Brian Crescimanno Says:

    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.

  2. ds.phorce.com » Blog Archive » Interesting Follow Up Says:

    […] 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. […]

  3. Hemanshu Says:

    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.

  4. Brian Crescimanno Says:

    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.

  5. Thomas Watson Steen Says:

    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.

  6. Hem Says:

    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.

  7. Hemanshu Says:

    That was me, above :)

  8. David Says:

    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.

  9. Jesper Rønn-Jensen Says:

    Very insightful article and comments here. I’d just update with the screenshots from Simplyaccessible you mention in your article, Thomas:

    simplyaccessible: error messages

    simplyaccessible: required field

    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.

  10. D.zigns Design/Development » How to Show Whether Form Fields are Required Says:

    […] 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. […]

  11. bart Says:

    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.

  12. justaddwater.dk | Time to revise our blog purpose Says:

    […] How to indicate required or optional form fields […]

  13. Lori Says:

    I found this article, and subsequent discussion, to be very helpful — thanks to all who contributed!

  14. SR Says:

    Thanks for this list. I have always hard time designing forms but this article is very useful to sort some of my issues.

  15. justaddwater.dk | How To Align Labels On Form Fields Says:

    […] How to indicate required or optional form fields […]

  16. rascunho » Blog Archive » links for 2007-12-05 Says:

    […] 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) […]

  17. Opus Says:

    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.

  18. Brandon Says:

    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.

  19. Johnathen Says:

    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.

  20. Patrick Says:

    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.

  21. jim voorhies Says:

    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.

  22. UX Designer’s Quick Reference | butlerhouse Says:

    […] How to Indicate Required or Optional Form Fields – Thomas Watson Steen […]