Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

This seems subjective, and it is; a client of mine would like me to highlight the required fields on the web forms in their application with a red asterisk, and I'm looking for an alternative since red asterisks usually mean there's an error to me.

How do I let a user know which fields are required? (One per answer, please.)

UPDATE: This is to indicate which fields are required before validation/postback occurs.

share|improve this question
1  
    
@rick schott : wonderful! I'll just go ahead and close this now... –  Ryan Shripat Aug 25 '10 at 20:11
2  
Is it really the same question? This one seems to be about indicating required fields before validation. –  Patrick McElhaney Aug 25 '10 at 20:46
1  
I say edit the question to be clear, then we can have before and after required field validation questions. –  rick schott Aug 25 '10 at 20:51
    
@Patrick McElhaney @rick schott : Updated to make requirement clearer. –  Ryan Shripat Aug 26 '10 at 2:39

11 Answers 11

up vote 34 down vote accepted

Since 95% of all fields are required at techinsurance.com, my decision was to simply use bold to indicate that a field is required and write the word (optional) next to the optional fields to reduce clutter.

e.g.

First Name

Last Name

Business Phone Number

Mobile Number (optional)

And perhaps just as important are the error messages themselves. I made them as obvious as possible...

required field...

alt text

with error...

alt text

These decisions were made after years of having a website with the semi-traditional red asterisks to indicate a required field. These asterisks worked most of the time. The problem was when there was a validation error. Some of our pages can be pretty long and the red validation errors just wouldn't stand out on the page enough when it was already cluttered with red asterisks. I know this because occasionally people would get frustrated enough to call us about it. But all indications show that the new (above) design fixed the problem.

share|improve this answer
2  
+1 for experience. –  OverMachoGrande Aug 26 '10 at 1:28
    
Good! I was really against red as an indicator of requirement. –  Ryan Shripat Aug 26 '10 at 2:40
    
+1 for not asking lots of optional questions, +1 for annotating the exceptions rather than the rule, and +1 for not shouting that something was optional. –  Erics Oct 17 '11 at 8:58
    
Very clean, very clear. I love it! Thanks :D –  BazzPsychoNut Dec 28 '12 at 18:47
    
Using bold labels can also cause problems. –  Angavar Mar 1 '13 at 22:14

I feel that the best way to do this is actually spell out the word "required" after the input field. This sentiment is also reflected in Web Form Design by Luke Wroblewski: http://www.lukew.com/ff/entry.asp?725

While the example link talks about optional fields instead of required fields, I believe the principal remains the same - users prefer to have it written out for them as opposed to including visual indicators.

Additionally, something to look at may be indicating the fields that are options instead of the fields that are required. To me, whichever is the exception is the one that should be noted. For example, if you have 10 fields, and 8 of them are required, instead of writing "Required" for 8 fields, write "Optional" for the 2 exceptions. But if only 2 are required, write "Required" by those 2, since they are the exception.

share|improve this answer
    
+1 - very interesting. –  Ryan Shripat Aug 26 '10 at 2:48
    
We've looked at alternatively annotating required vs optional, but found users got confused. They'd see "* = optional" on one form, and later see a "*" against a field in another form and assume it too was optional ... only to get yelled at for leaving a required field empty. –  Erics Oct 17 '11 at 9:01

Red asterisks are often used as required, so your client is really not wrong. If you choose another color, such as orange or something that fits the site design, that should be fine.

share|improve this answer

Another solution is to split the form into two sections, putting all the required fields together, and then labeling the entire section "Required".

share|improve this answer
3  
Good in theory, but it breaks up the flow of the form. "Address 1" is required but "Address 2" is optional. "Home Phone" is required, "Work Phone" is optional. –  OverMachoGrande Aug 26 '10 at 1:27
    
@Robert Fraser: I agree. Good idea though. –  Ryan Shripat Aug 26 '10 at 2:46

This is surely the wrong place to post this, but don't overlook an extended definition of "requiredness" - that is, when requiredness of an element is conditional of the use (selection, filling, etc.) of another element.

Example, field A is optional. However, if field A is indeed filled by the end-user, then field B is required.

How would we annotate or group the elements fields to indicate that? Should we?

PS. Remember that color alone is an unreliable channel for conveying information. Some of us cannot easily distinguish between read and green, and red may convey different things to folks of differing cultures.

share|improve this answer
    
Don't show field B unless user has entered detail into field A? –  Erics Oct 17 '11 at 9:03

This question can be more problematic than you might first imagine.

For example, some posters have suggested using asterisk to signify "required", the problem with this is that some websites actually use the reverse and put an asterisk next to the fields which are optional. Users don't explicitly know if an asterisk is a "required" field or an optional field by glancing, and have to investigate further, breaking their flow, frustrating them about the form process and can in some cases lead to abandonment of the form all together.

RussellUresti reply reiterating Luke Wroblewski's research in "Web Form Design" to simply write "required" next to the mandatory fields has also been (in my 10 years experience) the approach which has yielded the highest throughput on forms and lead to the least confusion.

Related and something else to consider, if a form field is optional, can you use logic yourself to get the answer without asking the user?

For example, if you need to know if the user is Male or Female, you can infer an answer in some cases by the title they choose for their name (miss, mrs etc implies female) and removes the question from the user.

Another point to consider is for things like address fields, if you can ask the postcode and do a postcode lookup, showing only the address fields if the user opts to manually enter the address or if the postcode lookup fails you can avoid alot of optional data that may make the form look longer than it actually is and cause the user to leave.

In my experience alot of the time if a field is optional, there is a large case for removing the field altogether. Obviously this isn't practical all the time, but some cases it may be and will help reduce the visual clutter, for whatever approach you decide to take.

share|improve this answer

I think you could highlight the border of the field using a 1px red color. I believe this will help the visitor in understanding what and where something is wrong with the form.

cheers JP

share|improve this answer
4  
That seems more relevant to highlighting a validation error after the fact. –  Bevan Aug 25 '10 at 20:42
    
The fact that the question is about highlighting answers before validation wasn't clear at first. If after validation is indeed what you meant, you might want to add your answer to this question. –  Patrick McElhaney Aug 25 '10 at 21:00

I partial to the simple asterisk philosophy.

On a tangentially related note, here's a post I wrote a while back with an example of creating custom error markers for fields that were required and not filled out. It is rather tech-specific (Rails, Formtastic, jQuery), but the concept is easily adaptable.

http://thestrake.com/post/459205965/show-n-tell-friday-custom-form-error-markers

share|improve this answer

Just put the word "optional" next to your label.

share|improve this answer
    
but please do put a "All fields are required unless otherwise noted" at the top of the form. –  Erics Oct 17 '11 at 9:04

Like most usability topics, it really depends - mainly on how many fields are included in your form and the frequency of required fields in your form

I usually prefer a simple red asterisk adjacent to each required field and then a footnote "* - required field".

Additionally, I like to highlight the field border in red if the field remains empty or invalid after an onBlur() event. Same highlighting if the user tries to submit the form without filling out all required fields. Border highlighting disappears on a javascript onFocus() event.

share|improve this answer

The best way I have found is to put an asterisk inside and right aligned.

Example of UX

share|improve this answer
    
Why is this the best way? –  JonW Feb 20 at 7:13
    
Mostly live usage, everyone that has used the product knows that it is required, it has not been questioned nor have I received support emails about it. People have been conditioned on the asterisk from blog comment forms. –  Nijikokun Feb 20 at 20:29

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.