Чекбоксы и радиокнопки для gov.uk

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

Результат

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

Впервые опубликовано в рассылке 12 февраля 2017 года.

Опечатка? Выделите её и нажмите кнопки Control и Enter.

Технологии цифрового маркетинга — книга, где я был соавтором (параграф про создание сайта) и литературным редактором (привёл текст к единой стилистике и упростил формулировки). От 250 рублей.

Теперь электронную версию можно купить и читать на Литресе.