Using asterisk (*) when all fields are required

Question

I have here:

In terms of UX, do we really need to put asterisk or tell users that the fields are required where in fact all required and none is optional?

I am thinking aesthetic wise, just remove it and warn the users that all of it are required when they didn't check it.

Answer 1

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 users will read the headline.

You could also disable the proceed button/action and highlight the checkboxes after the user tries to continue without checking.

In terms of "checking them all at once" this might be a legal problem, as far as I know in Europe for example you need single checks.

GDPR (32) "Consent should be given by a clear affirmative act ... [] ...Silence, pre-ticked boxes or inactivity should not therefore constitute consent... [] ... When the processing has multiple purposes, consent should be given for all of them."

If the red asterisk is hurting your eyes you can of course just use "(Required)" after each line.

Answer 2

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 button until the condition is met. This is a common pattern with accepting other legally-binding contracts, such as Terms and Conditions or End-User License Agreements.

If your local or target audience legislation requires several checkboxes, then a similar pattern can still be done.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 3

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, none is also one of the choices so I would let user skip the agreement. Something like this -

Answer 4

In the event this is legalese related, it sometimes pays to have the actual terms spelt out in non-legalese form.

Put two columns on your terms. Label the left hand side "Human Readable Version" and the right hand side "Legal Terms". Put one or two liners to the left to summarize in clear what the legalese means so it's in human readable terms. (The lawyer should be the one writing them or at the very least vetting them, of course.)

For instance, if the legalese says something to the effect of "We won't sell or share your data unless we receive a court order" (or "We reserve the right to sell your data left right and center") with the legal version saying the same in 10+ paragraphs then it's worth summarizing the latter as just that and having people actually read (the human readable version of) it.

Rinse and repeat for the rest of the agreement. And don't forget a last paragraph saying the legal terms are those that actually apply. (A bit like the headings that get routinely inserted in contracts alongside a paragraph that goes: "Headings. The paragraph and subparagraph headings in this Agreement are for convenience only and shall not affect the construction of this Agreement.")

Then add a single checkbox at the bottom saying you agree with the terms of use.

Answer 5

Taking into account the mentioned legal aspect, it seems like the most straightforward approach using asterisks is the right one.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Seeing the asterisks, a user can immediately understand that these are necessary checkboxes, unlike the ones like subscriptions to different newsletters (that are usually optional) and there is no way to proceed unless all of them are checked.

It doesn't look like it's necessary to permanently display any extra text since the asterisks speak for themselves. Although, a clarification pop-up window may still appear if a cursor hovered over the continue button while some items unchecked, explaining why it's disabled.

Answer 6

In Material Design Guidelines it is covered the case when the optional fields are fewer:

To indicate that a field is required, display an asterisk (*) next to its label. At the bottom of the form, mention that asterisks indicate required fields.

To indicate that a field is optional, display the word “optional” in parentheses next to the field label.

In forms with some required fields, indicate all of the required ones. However, if there are fewer optional fields, indicate those instead.

It makes sense that if most of the checkboxes on a form require being checked, indicating all required fields would add unnecessary info to the form. The problem here is that in your case all the checkboxes are required, In this case, you can't practical indicate the ones that are optional.

In my opinion, add a single message "All the terms above need your attention" / "All fields are required" is the best option. You will have less visual clutter.

Another alternative would be to not indicate optional/ required fields in this case but handle missing required checkbox with error messages.

Answer 7

Put the mandatory asterisks after the label text, not after each checkbox option.

For example:

Please agree to the following three conditions: *

OR

To continue it is necessary to agree to the following three conditions: *