Add "None of these" and "or" divider to checkboxes

[frankieroberto]

Following conversation about the checkboxes component, this adds the "divider" feature from the Radios component to the Checkboxes component.

The main use for the divider is to add an "or" before a "None of these option", which allows a user to explicitly state that none of the checkboxes apply, rather than having to infer (or be given guidance) that they can leave all the checkboxes unticked. This has the additional benefit of being able to validate that the user has selected at least one checkbox, avoiding a potential issue where a user accidentally doesn't check a relevant checkbox, and the service assuming this meant that none of them were relevant. Services should also check that the "None of these" option wasn't ticked as well as another checkbox, and if so display a relevant error message.

In order to help users avoid accidentally selecting an option as well as "None of these", some javascript is included which prevents this from happening, by unchecking all other checkboxes when checking a "None of these" checkbox, and by unchecking the "None of these" checkbox when checking any other checkbox. This behaviour can be enabled by passing behaviour: "exclusive" as a param on a checkbox item.

➡️ PR which adds guidance on this to the Design System website

Example showing use within Nunjucks macro:

{{ govukCheckboxes({
  idPrefix: "waste",
  name: "waste",
  fieldset: {
    legend: {
      text: "Which types of waste do you transport?",
      isPageHeading: true,
      classes: "govuk-fieldset__legend--l"
    }
  },
  hint: {
    text: "Select all that apply."
  },
  items: [
    {
      value: "carcasses",
      text: "Waste from animal carcasses"
    },
    {
      value: "mines",
      text: "Waste from mines or quarries"
    },
    {
      value: "farm",
      text: "Farm or agricultural waste"
    },
    {
      divider: "Or"
    },
    {
      value: "none",
      text: "None of these",
      behaviour: "exclusive"
    }
  ]
}) }}

Example HTML output

<div class="govuk-form-group">
<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
    <h1 class="govuk-fieldset__heading">
      Which types of waste do you transport regularly?
    </h1>
  </legend>
  <div class="govuk-checkboxes" data-module="govuk-checkboxes">
          <div class="govuk-checkboxes__item">
            <input class="govuk-checkboxes__input" id="with-divider-and-none" name="with-divider-and-none" type="checkbox" value="animal">
            <label class="govuk-label govuk-checkboxes__label" for="with-divider-and-none">
        Waste from animal carcasses
      </label>
          </div>
          <div class="govuk-checkboxes__item">
            <input class="govuk-checkboxes__input" id="with-divider-and-none-2" name="with-divider-and-none" type="checkbox" value="mines">
            <label class="govuk-label govuk-checkboxes__label" for="with-divider-and-none-2">
        Waste from mines or quarries
      </label>
          </div>
          <div class="govuk-checkboxes__item">
            <input class="govuk-checkboxes__input" id="with-divider-and-none-3" name="with-divider-and-none" type="checkbox" value="farm">
            <label class="govuk-label govuk-checkboxes__label" for="with-divider-and-none-3">
        Farm or agricultural waste
      </label>
          </div>
          <div class="govuk-checkboxes__divider">or</div>
          <div class="govuk-checkboxes__item">
            <input class="govuk-checkboxes__input" id="with-divider-and-none-5" name="with-divider-and-none" type="checkbox" value="none" data-behaviour="exclusive">
            <label class="govuk-label govuk-checkboxes__label" for="with-divider-and-none-5">
        None of these
      </label>
          </div>
  </div>

</fieldset>
</div>

Examples of the checkbox divider in use on live services

[edwardhorsford]

Very pleased to see this. I've been tripped up several times confused why my separator wasn't working.

[timpaul]

Following a conversation with the team and with @frankieroberto - we've agreed that Frankie will add a JavaScript enhancement to the PR, that unchecks all the other checkboxes, if a 'None of the above' checkbox is checked.

Before @frankieroberto starts work though, we'll catch up to agree on the Nunjucks macro API - the card for that is here: #2152

[frankieroberto]

This is no longer blocked, now that we’ve agreed the API in #2152.

I've done the initial javascript implementation. Would welcome any initial feedback or suggestions. I tried to avoid making too many unrelated changes to the checkboxes javascript (eg to align it more closely with the radios javascript), but that could be considered.

I’ll write the tests next.

[frankieroberto]

I've now added some tests, both to test the macro template output, and to test the checking/unchecking behaviour.

[calvin-lau-sig7]

Added suggestions to guidance content in the PR ahead of going to review by the Design System working group.

[frankieroberto]

@calvin-lau-sig7 thanks! I've made some changes based on your suggestions. Have also added a paragraph about labelling the option.

[adamsilver]

I recognise the need for users to explicitly choose ‘none of the above’. However I’m concerned with the specific solution in this pull request.

Taking this question as an example:

Which of these qualifications do you have?
[x] GCSE
[x] Degree
[ ] A Level
[x] None of the above

[Continue]

• ‘None of the above’ is not a type of qualification. Because of this I think it'll increase cognitive load and users with cognitive impairments may especially struggle
• It looks like you can pick ‘None of the above’ as well as other options. And you incorrectly can without JavaScript - which leads to complicated error messages that the interface has helped cause
• With JavaScript I presume it will automatically uncheck options but this is not how checkboxes work conventionally. Perhaps this will be unexpected by certain users. I wonder if this is inaccessible to some degree.

I appreciate the ‘divider’ goes some way to help sighted users but I think the solution has the potential to exclude certain people.

My other concern with this is that by putting it in the design system we're encouraging the use of this pattern over other, potentially clearer/more accessible solutions. See 3 alternative examples below.

Example 1: adding a guard question beforehand

Do you have any qualifications?
( ) Yes
( ) No

[Continue]

Example 2: Marking/hinting the question as optional

Here I’ve used hint text but you could put something in the legend so it's harder to miss.

Which of these qualifications do you have?
Select continue if you have none of these options
[ ] GCSE
[ ] Degree
[ ] A level

[Continue]

Example 3: Having an explicit option not as a checkbox

This could be more useful when the user needs to specifically disclose ‘none of the above’.

Which of these qualifications do you have?
[ ] GCSE
[ ] Degree
[ ] A level

[Continue]
I don't have any of these qualifications

[StephenGill]

Just as a variation on @adamsilver's example #3 - in line with the new equality information pattern, you could say something like 'If you do not have any of these qualifications, continue without checking any of the boxes'.

What is your date of birth?

For example, 31 3 1980. If you prefer not to say, continue without entering any information.

Day     Month       Year
[       ].  [         ]    [        ]

[Continue]

[joelanman]

Hey @adamsilver!

‘None of the above’ is not a type of qualification.

No, but it is a reasonable answer to the question "Which of these qualifications do you have?" isn't it?

It looks like you can pick ‘None of the above’ as well as other options.

I think the 'or' divider which you're missing from your example helps here. Plus I'm not sure anyone would expect to be able to select None and another option - that wouldn't make sense, so I don't think it's relying on the 'or' only.

On your alternatives:

1. Sometimes a guard question would be better, I agree. However in some cases a guard question cannot be clear - and this is a good example. We're not asking if you have any qualifications, we're asking if you have any in a specific list.

2. The problem with this approach is you can't do any validation - someone could accidentally continue without actually answering the question - this could cause real issues for the user.

3. I think this is probably less accessible? The user would consider the options presented in the checkboxes and may not realise there is a separate option available.

[adamsilver]

Hey @joelanman - all good points...

No, but it is a reasonable answer to the question "Which of these qualifications do you have?" isn't it?

I appreciate this is not a clear cut thing. Perhaps as a slight variant:

Do you have any of the these qualifications?
- GCSE
- Degree
- A level
( ) Yes, I have one or more of these qualifications
( ) No, I do not have any of these particular qualifications

[Continue]

I think the 'or' divider which you're missing from your example helps here. Plus I'm not sure anyone would expect to be able to select None and another option - that wouldn't make sense, so I don't think it's relying on the 'or' only.

Yep - I'm not sure either so I think it's worth a test especially when we're messing with convention. I also made an edit to my initial comment to acknowledge the value of the divider to sighted users - not sure if you saw that.

1. Sometimes a guard question would be better, I agree. However in some cases a guard question cannot be clear - and this is a good example. We're not asking if you have any qualifications, we're asking if you have any in a specific list.

Yep - the reason I mention it is because at the very least I think the design system should give other options that might work better for certain contexts before this one is recommended (if this solution does end up being added).

2. The problem with this approach is you can't do any validation - someone could accidentally continue without actually answering the question - this could cause real issues for the user.

Yep - but maybe that's the same for any field that's optional. Perhaps the ‘if you have any’ could be added to the legend. On top of this they'd have a check answers to make sure they're happy with their answers.

3. I think this is probably less accessible? The user would consider the options presented in the checkboxes and may not realise there is a separate option available.

Yep, I don't love this and I would look to avoid this too. But then I haven't tested/iterated this in anger.

I guess I just feel that something like this should be tested more thoroughly with a range of users with different abilities before being added to the design system. And perhaps alongside a range of approaches that might be better depending on the context. I also think we might want to a few content designers to review this pattern.

[joelanman]

@adamsilver good points!

Agree we should highlight the alternatives, like we do on other patterns like accordions and tabs for example - if a guard question can be simple its probably the better option (Do you have a car > What make of car do you have)

Yep - but maybe that's the same for any field that's optional

I think we need to make the distinction between a required question where the answer can be 'None of these' (we need the answer) and an optional question where we don't need an answer. So a question with 'None' could easily be a required question.

[joelanman]

worth noting that we used None of these on a Coronavirus service recently and it tested well, and it was used a lot on the recent census.

[edwardhorsford]

It would be good for the guidance to note that sometimes a guard question is a better solution - but as @joelanman notes, there are also lots of times where it's incompatible with what you're asking.

I don't agree it increases cognitive load - if anything it's easier as you're making sure there's always an answer that the user can select from. If you were doing this data collection in conversation with a user / over the phone, it's the sort of answer you'd expect from them verbally.

I've seen this used in multiple services over the years (as well as ones I've worked on) - IMHO it's rather well tested.

[adamsilver]

Another idea would be to split up into separate questions like this:

Do you have a GCSE?
( ) Yes ( ) No

Do you have an A-level?
( ) Yes ( ) No

Do you have a degree?
( ) Yes ( ) No

[Continue]

• avoids JavaScript
• avoids making checkboxes behave differently to standard checkboxes
• uses existing components
• users still have to disclose their answer

[edwardhorsford]

Something else in favour of this pattern - this matches how paper forms often work. People are used to answering this sort of question.

From the UK Census 2021:

[simonwhatley]

Something else in favour of this pattern - this matches how paper forms often work. People are used to answering this sort of question.

From the UK Census 2021:

For me, the paper form looks like you can tick, for example, 'Working as an employee' and 'OR none of the above'.

If a user does select these items, this would require the Census team to interpret the user's answer or follow up with them.

In any case, it seems prudent to avoid this design.

[joelanman]

For me, the paper form looks like you can tick, for example, 'Working as an employee' and 'OR none of the above'.
If a user does select these items

In the digital version proposed this would not be possible

[simonwhatley]

To digress from the early conversation around the need for this feature, I'd like to explore the choice of behaviour: "exclusive".

Exclusive suggests there's a behaviour: "inclusive" version yet to be implemented. If there isn't, a boolean option makes sense (exclusive: true, which is used in the GOV.UK Publishing Components equivalent).

A boolean option maps more closely to the checked, conditional and disabled parameters used in the checkbox options, and the open and isPageHeading parameters used elsewhere.

[joelanman]

the idea is behaviour could potentially be extended to something like Select all functionality if we wanted to add that in the future.

[simonwhatley]

For me, the paper form looks like you can tick, for example, 'Working as an employee' and 'OR none of the above'.
If a user does select these items

In the digital version proposed this would not be possible

Yep, assuming JavaScript was available.

[36degrees]

This is looking good @frankieroberto, thanks.

It'd be good to tidy up the commit history a bit, as I think quite a few of the commits could be squashed without losing anything important, and there's a few merge commits in there that ideally we'd lost. However, I think it's worth getting a second review from another member of the team first, in case anything else comes up.

Does that sound sensible?

[frankieroberto]

@36degrees second review sounds good. 👍

Happy to force push some squashed commits at the end (I tend to avoid doing that as it can break things for anyone else who's fetched the branch), but every project has its own policy!

[lfdebrux]

I've given this a quick once-over: looked at the code; tested in Chrome, Firefox and Safari on macOS, and Chrome on Android (real device).

I couldn't find any issues, it all looks good to me!

[36degrees]

Brill, thanks @lfdebrux for reviewing 🙌🏻

@frankieroberto are you able to look at tidying up the commit structure now?

[frankieroberto]

@36degrees squashed into 5 commits (and reordered them a bit). Does that look ok? Been a while since I did so much command-line git... 😄

[36degrees]

That's great, thanks for sorting that @frankieroberto 👍🏻

[a184studio]

Did anyone see any instances of citizens highlighting that it has changed their selection without them noticing?

Example: They selected a checkbox above, then selected the none checkbox. Did they expect a warning or anything like that?

I had a query asked of me regarding the difference in state changes when Java is on vs off.
Off: It tells you something has happened, eg error / validation message
On: It changes states and does not tell you anything apart from the visual clue of None is now selected
I think the query is coming from an accessibility perspective given that the top checkboxes could be outside of the view port by now..

[edwardhorsford]

@a184studio from a different perspective, with javascript we can avoid an error message. Which should hopefully make things simpler for users.

[joelanman]

in terms of expectations, in research we've seen people expect that if you select None it deselects the others, and vice versa

[frankieroberto]

It's worth noting that the Mutually exclusive component in the ONS Design system does add some visually hidden text in order to announce this:

Or no central heating. Selecting this will uncheck all other checkboxes

However we didn't have any direct evidence that this was required.

[a184studio]

Cheers all.

[a184studio]

Has anyone done anything on checkboxes being a positive action vs a negative one.

I'm investigating the ability to check items that are wrong vs right.
The initial analysis that we have done suggested that the majority will be right.

Which in reality means that they would be selecting 24/25 checkboxes. [Tick]
Or you do it the other way, Select all that are wrong. Which you would have to interact 1/25 times. [Tick, but given ticks as an icon = good]

EG.

Select all that are incorrect
[ Tick ] // (Which is which is jarring as a tick = positive, but the intention is negative outcome. This way allows us to measure the error, which will be the minority)
vs
Select all that are correct.
[ Tick ] (to measure the number of things incorrect, you would have to measure the volumes of none selected items)

Any insights are grateful.

[36degrees]

@a184studio this PR has now been closed, and the only people that are likely to see your comment are the people who have previously contributed to this discussion.

Can I suggest instead adding a comment to the backlog discussion for checkboxes, where more people are likely to see it?

For more visibility, it might also be worth asking in the #design channel on cross-government Slack, if that is something you have access to.