Статью «We’ve updated the radios and checkboxes on gov.uk» написал Тим Пол 30 ноября 2016 года.
В Великобритании есть организация 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 года.
Технологии цифрового маркетинга — книга, где я был соавтором (параграф про создание сайта) и литературным редактором (привёл текст к единой стилистике и упростил формулировки). От 249 рублей.