Last week we updated the styles for radio buttons and checkboxes on GOV.UK. This post explains why we’ve done this.

Our old radios and checkboxes looked like this:

The new ones look like this:

We’ve removed the grey boxes and increased the size of the controls. To understand why we’ve done this it helps to know what problem we were trying to solve with the grey boxes.

The problem

Early in the development of GOV.UK we observed in research how a majority of users would click on radio button or checkbox controls rather than on their labels, despite the fact that the labels are much bigger and therefore easier to click (see Fitt's Law).

We reasoned that this was because users didn’t know whether or not they could click on the labels. Many websites don’t let you click on labels, so choosing to always click on the control is perfectly rational user behaviour.

The solution

Iteration 1 - grey boxes

First we thought we’d try to make it really obvious that you could click our labels, so we coloured them grey and made them respond to the mouse hovering over them.

We thought this would work, so we rolled out the design across services on GOV.UK. We saw again and again though in lab research that most users still clicked on the controls.

Iteration 2 - bigger controls

In our next iteration we decided to support the existing user behaviour, so we increased the size of the controls to make them easier to click.

Unfortunately it turns out that native browser support for bigger radios and checkboxes is very patchy. Nearly half the browsers we tested didn’t support these bigger controls.

Still, we rolled out the change for those that did and raised bug reports for those that didn’t.

Iteration 3 - custom controls

In our latest iteration we’ve replaced the native browser controls with custom ones, which all our supported browsers will get.

We’ve also removed the grey background, as it did not have the effect on user behaviour that it was intended to.

The new controls are more in keeping with the rest of GOV.UK and are the same height as our text fields, which improves the vertical rhythm on form pages and allows for better horizontal alignment of form fields.

The results

The new styles have been piloted in a number of services, including high-volume ones like GOV.UK Verify. So far they’ve tested really well. In research, people of all confidence levels are clicking these controls quickly and easily.

The code has been tested extensively and works across the full range of supported browsers, even if the user has customised their colour scheme. You can read Robin Whittleton's post about how we implemented the styles for more information.

We’ll continue to monitor them though - if you’re implementing these styles in your service then we’d be very keen to hear either way how they’re performing.

How to get the new styles

Designers can get the new styles by using version 5.0.0 or up of the GOV.UK Prototype Kit. Developers will find them in version 2.2.0 or up of GOV.UK Elements.

Thanks

We don’t make global changes to GOV.UK styles lightly. This has been the culmination of a lot of work by a lot of people, but especially Joe Lanman, Ed Horsford, Caroline Jarrett and Robin Whittleton.

Thanks also to the service teams in DWP and NHS who agreed to pilot early versions of these styles in their prototypes and services.