You'll often find that users will just fill in all fields on a form regardless of whether they're required or not. People don't really read instructions and don't want to risk encountering an issue if they haven't filled in any fields, so they'll often just fill in them all regardless. (This has been somewhat supported by testing by the Baymard Institute - ...
Pro: it doesn't take up much space
Con: it doesn't mean anything
Con: it takes up more space
Pro: it tells you exactly what it reads as meaning
The "norm" was never a red asterisks. While many early web pages used an asterisks, it wasn't necessarily red and always required a key someone near the top of the form telling you that ...
How about placing the asterisks at the right side of the label?
Because the reading order may not matter to users, but the red asterisk will catch users attention before they even read the label which will eventually fulfill its purpose.
You should definitely let users know if it's mandatory before letting them click a button and get frustrated because they couldn't proceed.
Things you could do:
Change the headline from "Please agree to the following:" to something like "To continue it is necessary to agree to the following:"
which if course is longer and you don't have a guarantee that ...
As you mentioned all are fields are required and I assume to move further in the process, they need to agree to the statements or skip. I won't split them into 3 checkboxes rather I will keep them all grouped in a single box as the bullet points and keep I agree to checkbox out of the box so that it represents action on the whole group. As you mentioned, ...
What's important is not the asterisks, but rather that the user understands the checkboxes must be checked. If you'd like to eliminate the asterisks, the design of your page with a brief "please agree to all" message could communicate that these are required.
If you can legally have just a single required checkbox, you could consider disabling the Continue ...
You don't need the double asterisk if you can group related fields together and label them (example: "Contact Information") and then place the asterisk by the label "Contact Information." (you can add "Select one of the following" below)
Here's a rule-of-thumb: if you have to explain too much it's too complicated.
Unfortunately people read less and expect more during action. So regardless if all fields or only a set of fields are required, fields that need input need indication in some form. Every field in your case.
NNgroup has good suggestions on web forms usability
Distinguish optional and required fields. First, eliminate as many
optional fields as possible (see the first recommendation above). If
some fields truly are necessary, but only apply to a subset of users,
don’t make users find out through trial and error. Limit the form to
only 1 or 2 optional ...
There is no widely accepted convention to show optional fields. So as you described, you can mark the fields as optional instead using labels (as noted on the right):
Another way could be to shade the section with a subtle gray color to distinguish them as optional, while also including the text. I'd refrain from using a question mark, as that generally ...
Since the validation is for two fields they should be marked together. I prefer, when the UI says what's wrong. So I sugest to have a message below the validation like "Please fill in either a city or postal code". Something like this:
The highlight should only disappear, when the conditions are met.
There are few reasons to prefer optional but they do not make its usage mandatory.
First and most simple because it is shorter then it requires less screen space. This has two advantages:
It's easier to fit on (overpopulated) forms. Think that, despite all its drawbacks, required fields are marked with an asterisk mainly because of this.
It uses less ink ...
Aside from the aesthetic and usability improvements, one of the reason (if not most important) for the change is accessibility issues.
The screen reader, doesn’t read (hardly) any typographical symbols in its default configuration. Symbols like asterisks and plus symbols are essentially useless to handicapped or low vision users. Designers usually have to ...
It is recommended to select a default. It is also very helpful that you already know the most popular choice, which you would obviously put first in the list and preselect.
Marking mandatory input is common practice, even for a radio selection where a default is selected and where de-selecting is not provided, and even more so if for consistency reasons if ...
The confusion isn't coming from the color of the double asterisk, it's the double asterisk itself that isn't intuitive. I've always believed if you need a legend to detail what your page is saying to users then you're saying it wrong.
Instead I would give each field set a header such as Contact Info, Parents Contact Info, etc. then say "Choose one" and put ...
I'll try to improve on the suggestions by illustrating the error scenario and suggesting a different form layout.
The fieldset is appropriate when the fields are related. In this case the mandatory nature of the last name, city or postal code creates the relation. The first name comes first as it is logically tied to the last name field but stays out of the ...
This falls under WCAG 3.3.2 Labels or Instructions.
Required fields must be clearly identified in their label. Asterisks and other images are fine, as long as there is a statement such as "Required fields are marked with an asterisk" in the form.
There are some different ways of achieving this outlined here: https://www.w3.org/TR/WCAG20-TECHS/H90.html
My opinion is that you should combine them like that: Required*.
Using only asterisk will leave a big portion of users wondering what this means and will look somewhere on the page to see more information because of the asterisk. In books if there is asterisk on some of the words, on the bottom of the page there is additional explanation. My opinion is to ...
The reason behind is the same as many things which have changed in the UI practice over last decade. Instead of using implicit assumptions on what symbols mean UI designers tried to become more explicit in their work. Just consider this, when the "*" symbol first appeared to designate required fields it was frequently accompanied by a red-color note "Fields ...
You could include the asterisk symbol on the placeholder itself to represent the required fields.
But this might not be the best approach as the labels are required for a user to understand what the text field is for and placeholders can be used in some scenarios but when the text field has already filled the placeholders disappears which may confuse the ...
Error prevention is better than cure. True in 1995 and always will be - http://www.nngroup.com/articles/ten-usability-heuristics/
I had a usability test of a form only recently where, when presented with a message saying the equivalent of "D'oh! Fool! We only accept your answer in this format" the participant rightly said, "Well why didn't you tell me that ...
Any rule for the specific color of the asterisk (or anything else, except for very strong conventions like a traffic light metaphor) is a red herring.
When you design a form, you must know what happens to it, or what the user needs at any given moment.
During the initial filling of the form, the user focuses his attention on the fields one at a time, ...
What is the best way to message the user that has no postal code to enter something?
A required field does this naturally. I'm from a country that does not have postal codes and I usually encounter this field on websites. I don't recall ever being instructed to enter NA if I don't have a postal code. But that's what I typically enter and it is usually ...
Some of the fields are mandatory and are shown with an asterisk before the field.
How about this bold solution then: we mark the fields which must be filled by placing a red asterisk, before the field:
This doesn't hinder readability of text, and doesn't look as ambiguous as placing it inside the text field, as if it was a part of already existing text ...
If it is important that it is reflected upon, where an explicit choice is being made between two options, I don't think you can use a checkbox.
Here are two common ways to force a choice making (from study at researchaccess):
Your question does not reveal whether it is important that there is a True or False value instead of a null value, or if it instead ...
As you said, asterisk symbol is not the one you need. What you can do to improve the context is to group the input fields and give a suitable comment above:
Please complete at least one of the following fields determining your origin/affiliation/location:
Then all the input fields are coloured pale red. ...
I also call it "optional" because;
"Not required" means that the information you want is unnecessary.
However, with the "optional" option, the message that the desired information can be useful for both the user and the requesting party is given.
I would keep the Organization and Individual options as radio buttons. Keeping one of them checked. If user selects Organization, I will just hide the Mr. field.
And replace the address field with textarea to avoid multiple elements and clicks.
Something like this: