В Великобритании есть организация 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;
  • Одной высоты с текстовыми полями, что позволяет сохранять вертикальный ритм на страницах с формами;
  • Позволяют добиться лучшего горизонтального выравнивания полей формы.

 

Результат

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