16

I've recently seen a system where an on/off checkbox is labelled as a mandatory field with an asterisk.

To me, this seems redundant as it isn't mandatory to check the box, merely to have it either on or off. As it's always one of these states by default, there isn't really anything to make it mandatory.

From opinions and experience, how do people feel about this? If you were designing a form with some mandatory fields, would you label checkboxes as mandatory?

Here's a JSFiddle to illustrate.

2
  • 2
    Can I also just add that the '?' on the Enabled label is butt ugly.
    – devios1
    Sep 12, 2013 at 18:57
  • @chaiguy yeah it is a little - I just made the JSFiddle from what I saw on the system
    – shauneba
    Sep 13, 2013 at 7:52

6 Answers 6

34

The only case where a checkbox should be marked "required" is if it must be checked, like when agreeing to legal terms.

Good example:

Input's license

For any other case, how do you determine whether the user has completed that checkbox field? It might be properly filled out by staying un-checked. Except for the specific case of agreeing to terms, it's important that your form validation logic doesn't forbid the user from proceeding unless that checkbox is filled out: that will certainly be frustrating for any user!

And typically, I try not to mark fields as "required" and instead I indicate that the optional fields are optional. This is more like giving the users the treat of less work instead of a burden to keep track of all the usual red-asterisk fields. (And, for that matter, I put as few optional fields on initial sign-up and check-out forms as possible.) In other words, marking you form like this is more like telling the user "It's okay, you don't have to fill this part out" instead of "You must fill out this part, and this part, and this part, ..." etc.

1
  • 1
    Thanks for your detailed response. I was thinking along the same lines :)
    – shauneba
    Sep 6, 2013 at 15:26
5

Yes, it is redundant.

Checkboxes are a binary form of input, either on or off, so if it is set to off by default, then the user has implicitly chosen the 'off' option and vice versa.

If a mandatory 'opt-in' is required, what many sites are doing to avoid such redundancy is something like this (stolen from mailchimp):

By clicking this button, you agree to MailChimp's Anti-spam Policy & Terms of Use.

The bigger question is whether forms should indicate fields that are mandatory or optional. If only optional questions are indicated (which is often leads to less visual redundancy anyway) then this ceases to be a problem.

4

A case you did not consider is tri-state checkboxes, where the state can either be undefined, unchecked or checked. In this case, when the value must be defined, marking the checkbox as mandatory is far from redundant.

Example of tri-state checkboxes, found online: Example

The undefined values are the ones marked in blue.


Another case is when you have a group of checkboxes, where you have to mark one or more options, in this case you may want to mark the group as mandatory, instead of the individual elements within it.

1
  • Ah yes. Fortunately that's outside the scope of this particular use case. I've always felt that the undefined value being filled in is a bit of a clunky UI..
    – shauneba
    Sep 16, 2013 at 9:13
2

If you ever needed a "mandatory checkbox" then you might implement it as a yes|no racio buttons set. This way the user has to select one no matter their choice.
The problem would be if the user repented and wanted to uncheck, they would be in trouble to undo the click!

1

Is there an "off" checkbox that needs to be clicked? Your question seems to say that there is but the description indicates a switched "off" state by default.

If you require a yes/no choice, then you might go with radio buttons as they are mutually exclusive.

If its required (as with the example above of a terms and condition) then it seems a clear message should indicate its required (and why) rather than a symbol without meaning.

Either way, its tricky to rely on common patterns. You'll need to make sure the context of the interaction is clear for the user.

When in doubt, ask a few users. Hope this helps.

1
  • I think perhaps my question wasn't clear enough. I'll make a jsfiddle to illustrate it.
    – shauneba
    Sep 6, 2013 at 15:17
1

If a form item must have a specific value (checked in the case of checkboxes), it does not make much sense to give the user a choice at all.

I have used mandatory checkboxes for web applications to guard against accidental submission in situations where they may not be able to undo it or the change is destructive. With touch based devices (phones, tablets, etc.) on the rise, accidentally clicking on a submit button prematurely while trying to scroll can be a concern.

This is the workflow for an application I worked on last year:

  1. User books an ad space in a publication (ad booking can be done a year in advance, so filling out what they want in the ad is not a requirement at the time of booking)
  2. User fills out their ad brief
  3. User says "this looks good" and sends it to the publication owner for review (once this happens, the user cannot make any more modifications)
  4. Owner approves it for layout in the publication or sends it back to the user because it requires modifications

The ad brief submission is guarded by a checkbox that's labeled something to the effect of "Yes, this is ready for review". Other than following links that allow you to modify specific aspects of the brief, activating this checkbox and submitting the form is all that you're able to do on the page.

This is not a design pattern I use often, as most applications typically allow the users to modify their own information freely. I only use it in rare situations where the user needs to be protected from their own fat fingers.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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