4

Letting users tick a ‘none’ checkbox

 2 years ago
source link: https://designnotes.blog.gov.uk/2021/11/15/letting-users-tick-a-none-checkbox/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

The ‘Register your trailer to take it abroad’ service on GOV.UK on a laptop

We’ve recently updated the GOV.UK Design System to add a new feature to the existing checkboxes component. This was the result of research and collaboration from across government, and we think it will benefit users in lots of services. If you use checkboxes in your service, here’s some things you should know about adding a ‘none’ option to your questions.

Why we’ve added a ‘none’ option to checkboxes

We’ve called this feature the ‘none’ checkbox, although you should label this checkbox specifically to suit your service.

Unlike radio buttons which only allow a single answer, checkboxes allow users to select as many options as needed.

Often, it’s fine to answer a question by leaving all of the checkboxes unchecked. However, several teams across government have found a few issues with this.

They saw that:

  • users can be unsure whether they’re allowed to do this – this can be explained using hint text, but not all users will see this
  • users sometimes want to give a clear answer, especially if they're concerned about completing an application accurately and truthfully
  • allowing all checkboxes to be unticked means that users might accidentally skip the question, perhaps assuming that they’ll return to it later

To solve these issues, several teams started adding checkboxes for users to answer with ‘none’ (the exact wording was different across services) and requiring at least one checkbox to be ticked.

We’ve added further support for this by displaying the ‘none’ checkbox after a small ‘or’ divider. Radio buttons already follow this pattern to help to make it clear that the ‘none’ option is different from the others.

Finally, we also added some JavaScript code to prevent users from ticking the ‘none’ checkbox as well as one of the others. This is to avoid users giving contradictory answers.

When to use this new feature

Use this new feature wherever services already have a ‘none’ checkbox. It can also replace any guidance that tells users that they can leave all boxes empty.

How to create the ‘none’ answer

Avoid giving directions like ‘none of the above’, as this implies a visual reference that may not be relevant for users of screen-reading software. Instead, use ‘none of these’ or similar.

Mention part of the question, instead of a generic answer. For example “I’ll be doing none of these activities” instead of just “none of these.”

When writing the question, make sure that it can be answered with all your possible answers, including the ‘none’ option.

Alternatives you should consider

If the user does not need to see the list to know that none of the options apply, consider asking a filter question first. This helps the user avoid having to scan a page looking for a ‘none’ option, particularly if it’s a long list of checkboxes.

Based on the user’s answer to the filter question, you can either show the list of checkboxes on the next page, requiring at least one to be ticked, or skip the checkboxes entirely.

Two screenshots in a user flow with a filter question before other questions

Further research

Let us know if you find this new feature helpful, and especially if you discover any issues with it via user research. Get in touch with the team, or comment below, if you have any questions or feedback.

Add user research findings by messaging the Design System team on x-gov slack or adding a comment to the GOV.UK design system backlog in Github, where there’s an open issue on checkboxes.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK