В Великобритании есть организация Government Digital Service, развивающая местные госуслуги. У неё есть блог с заметками о дизайне. Недавно они написали, как и почему обновили стиль чекбоксов и радиокнопок в сервисах GOV.UK.

Вот старые чекбоксы и радиокнопки:

В новом варианте убрали серые плашки и увеличены сами контролы:

Какую проблему решали

Исследования ранних версий GOV.UK показали, что большинство пользователей нажимает на сами контролы, а не на текстовые подписи, несмотря на то, что текст крупнее, и в него проще попасть (см. закон Фиттса).

Возможная причина — неуверенность пользователей в том, что нажатие на текстовую подпись приведёт к выбору, например, чекбокса. На многих сайтах нажатие на текст до сих пор ни к чему не приводит. Поэтому всегда нажимать на контрол — это рациональное пользовательское поведение.

Плашка

Сначала решили подчеркнуть, что нажать можно в том числе и на текстовую подпись. Для этого объединили контрол и подпись серой плашкой и заставили всю группу одновременно реагировать на наведение курсора:

Они были уверены, что это сработает и выкатили дизайн на все сервисы GOV.UK. Но исследования раз за разом показывали, что пользователи продолжают целиться в контролы.

Крупные контролы

Решили поддержать текущее пользовательское поведение и увеличили размеры контролов, чтобы было проще в них попадать:

Но проблема в том, что не все браузеры умеют корректно увеличивать стандартные контролы.

Не умеют:

• Firefox on Windows
• Opera on Windows 7
• Opera on Windows 8.1
• Internet Explorer 8 on Windows 7
• Chrome on OS X
• Opera on OS X
• Safari 8 on OS X 10.10
• Safari 9 on OS X 10.11

Увеличивают, но с пикселизацией или размытием:

• Internet Explorer 7 on XP
• Internet Explorer 9 on Windows 7
• Firefox on OS X 10.10

Кастомные контролы

В последней версии заменили стандартные контролы кастомными и убрали серую плашку, так как она не оказала ожидаемого влияния на пользовательское поведение:

Новые контролы:

• Лучше сочетаются с остальным GOV.UK;
• Одной высоты с текстовыми полями, что позволяет сохранять вертикальный ритм на страницах с формами;
• Позволяют добиться лучшего горизонтального выравнивания полей формы.

Результат

Новые стили были пилотно запущены на нескольких сервисах и очень хорошо себя показали. Исследование показало, что все пользователи нажимают на эти контролы легко и быстро.