20

I have here:

3 checkboxes about accepting conditions; all of them are required

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.

  • 3
    IMO the asterisk=mandatory convention is stupid anyway. Forms should just highlight the first not-yet-filled-but-necessary field, be it with colour, frames, or a #fieldId link at the bottom. – leftaroundabout May 4 '18 at 12:22
  • 17
    O, please not just the first empty mandatory field, but all of them. I hate forms where I keep getting rejected. "Oh, what was mandatory now? That? Right, I'll enter it. What, again? Great, now what?" – SQB May 4 '18 at 13:00
  • @SQB yeah, I hate that too, but this should be adressed by only enabling the submit button after everything mandatory is filled out. What I don't like about upfront highlighting everything mandatory is that it immediately diverts the attention away from anything non-highlighted. In particular for checkboxes, it makes it all to simple to “click all the coloured fields” again without thinking. – leftaroundabout May 4 '18 at 13:45
  • 2
    Don't deactivate the submit button. Don't let me guess which field is mandatory, but let me just click the submit button and then show everything I still have to fill out. – Nova May 4 '18 at 20:30
23

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.

17

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 -

enter image description here

  • 23
    As stated by @Pectoralis Major below, this will (probably) no longer be allowed for use in Europe with the new GDPR law. – milo526 May 3 '18 at 11:48
  • Thanks for the infromation, i too noticed it. Right now we don’t know if it’s for Europe or somewhere else, for sure it won’t stand correct for EU with new legalities. – user108525ashi May 3 '18 at 12:15
  • 4
    "Skip" is the equivalent of pretending you didn't see the conditions. It doesn't make any sense as an option. Why not just a single checkbox "I agree to the above statements" (which should be unchecked by default) and leave out the "Skip"? (Discussion about stupid EU laws aside.) – Will May 3 '18 at 17:17
  • 3
    @Will That's not true. EU law obliges youto use the least amount of information possible to run your business. You may ask for something that is not strictly needed for making your product work, but then the users shall have the right to not give you that information and still use your application (even though some features may be disabled/less accurate etc). If you are requiring all users to accept to give all information or they cannot use your application, you are already infringing privacy laws. – Bakuriu May 3 '18 at 17:22
  • 1
    @Bakuriu You're reading something into my comment that I didn't write ...or at least did not intend to imply. I merely wanted to address the UI aspect of this answer, regardless of any of the legalities. But sure, I should have left the word "stupid" out of that. – Will May 3 '18 at 23:25
17

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • "you could consider disabling the Continue button until the condition is met." Eh, not on its own. You shouldn't omit telling the user that they must check all of the boxes before the button gets enabled, since otherwise the user might get frustrated as to what they should do to enable it. – EKons May 5 '18 at 13:37
  • @ΈρικΚωνσταντόπουλος I agree, that’s why there feedback next to the disabled button explaining why it’s disabled. – maxathousand May 5 '18 at 17:42
0

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.

  • 1
    This is very risky from a legal point of view. Those "10+ paragraphs" are 10+ for a reason (if written by a professional) and are written based on expert knowledge of the local laws and precedents and are an attempt to cover all bases. You jeopardize all of that when a non-legally qualified developer comes along and converts it to a single sentence. In the UK for example, in a consumer contract if there is an ambiguity or contradiction between terms (which is a strong possibility between the two columns), then the version or interpretation which most favours the consumer prevails. – JBentley May 4 '18 at 2:58
  • @JBentley: No, it's fine when the lawyer writes them. It's 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." – Denis de Bernardy May 4 '18 at 4:26
  • 1
    These are not headings. They are abbreviated / alternate versions of the full clauses, deliberately intended to enable the reader to skip reading the full clause. You're even proposing that this be stated explicitly with a "human readable version" label. Good luck arguing your case in front of a judge with a defendant / claimant saying "But I read the version that they told me was for humans to read...". In the UK, with the Unfair Contract Terms Act 1977 anything which may confuse the consumer is risky. – JBentley May 4 '18 at 6:02
  • Also note your wording "put one or two liners to the left to summarize in clear what the legalese means". A heading does not explain what a clause means, it merely categorizes related clauses into sections. Contract law disputes are all about interpretation, and here you're handing your opponent on a silver platter a "meaning" for the clause, which wasn't written by a lawyer. If the lawyer actually intended a different meaning in the clause itself (i.e. there is a contradiction between the two), you now have an unarguable case. – JBentley May 4 '18 at 6:06
0

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

mockup

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.

0

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.

enter image description here enter image description here

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.

0

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: *

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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