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.
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...
with error...
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.
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.
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.
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 red and green, and red may convey different things to folks of differing cultures.
Another solution is to split the form into two sections, putting all the required fields together, and then labeling the entire section "Required".
The best way I have found is to put an asterisk inside and right aligned.
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.
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
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.
Firstly, as I assume you are the UX expert, your client should not be telling you how to solve UX problems, they should be coming to you with the problem to be solved, not the solution.
Thinking of it from a user's perspective, we cannot assume that the user knows what an asterisk means. When in doubt, spell it out clearly as possible using written language. I have been seeing the asterisk used less and less across web and it is commonly followed by an explanation at the bottom of a page when used. A simpler explanation is to just use 'Required'. Screen readers will also pick this up and it will make your site more accessible.
Have you also thought about applying progressive disclosure principles in this scenario? Should the fields that aren't required even be on the screen - can they be hidden or shown to the user at a later stage? This way, there is less information overload and all the fields that are needed are presented, therefore eliminating the need for a 'required' at all. Some more information about the psychology behind this explanation: https://www.nngroup.com/articles/progressive-disclosure/
I have seen usability stadards that dictates the oposite - that all fields are required, unless marked with the text (optional). If required fields are not filled in after attempt to sumbit, they should be marked with a text explaining what is wrong.
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.
