Школа
Интерфейс

Расскажите о чекбоксе

Илья
25 фев 2025
👁 2871   🗩6
Интерфейс

Расскажите о чекбоксе

Илья
25 фев 2025
👁 2871   🗩6
Илья Бирман
Арт‑директор и соавтор курса «Пользовательский интерфейс и представление информации»
Полезно
 15
15
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

Чекбокс, checkbox, флажок, галочка. Элемент графического интерфейса для выбора одного из двух состояний, условно называемых «включённым» и «выключеным». Чекбоксы используют для выбора объекта, свойства или уточнения действия.

Классический вид чекбокса в операционных системах — квадратик с опциональной галочкой, означающей включённость:

☑ Печатать рисунки

Чекбоксом называют сам квадратик слева.

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

Печатать
☑ рисунки
☐ номера страниц
☐ колонтитулы

Печатать  ☑ рисунки  ☐ номера страниц  ☐ колонтитулы

Отрицательные и уступительные формулировки в подписях усложняют восприятие («не печатать», «скрывать», «отказаться», «несмотря на»). Лучше прямая формулировка с подходящим состоянием по умолчанию:

☐ Больше не показывать это окно

☑ Показывать это окно при запуске

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

Чекбокс подходит, когда выбор происходит между включённым и выключенным; показанным и скрытым; делаемым и не делаемым; то есть смысл выключенного состояния очевиден. В примерах выше: рисунки не будут печататься, окно не будет показываться. Когда смысл выключенного чекбокса неочевиден, лучше использовать радиокнопки с явно названными вариантами (или родственные им переключатели и выпадающие списки):

☑ Подключить демо‑доступ прямо сейчас

Подключить демо‑доступ
🔘 прямо сейчас
○ позже в личном кабинете

☑ Альбомная ориентация

Ориентация
🔘 альбомная
○ книжная

Чтобы изменить состояние чекбоса, нужно в него кликнуть. Для удобства прицеливания нажимаемым делают не только сам чекбокс, но и всю его подпись. Поэтому нежелательно использовать ссылки в тексте подписи.

Чекбокс обычно используется как элемент формы: для наступления последствий выбора нужно дать отдельную команду («Отправить», «Применить» и пр.).

Чекбоксы мгновенного действия используют, в частности, в настройке системы на Маке: вариант применяется непосредственно в момент выбора. Это редкое, и потому неожиданное поведение. При таком поведении важно убедиться, что множественные переключения, применяясь сразу, не порождают необратимых последствий. Желательно избежать запуска процессов, даже обратимых, при переключении, так как это создаёт ощущение неуправляемости.

В качестве элемента мгновенного включения‑выключения лучше подходит тумблер.

Чекбокс может управлять группой дочерних чекбоксов (в заголовке таблицы; при древовидном выборе). В таком случае включение родительского чекбокса включает все дочерние, а выключение — выключает:

Для обеспечения замкнутости родительский чекбокс получает дополнительное «промежуточное» состояние, в которое он переходит, если из дочерних элементов включены только некоторые (обозначают точкой или прочерком). Клик в родительский чекбокс последовательно переводит его по этим трём состояниям, причём для сохранения данных при попадании в промежуточное состояние восстанавливаются состояния дочерних чекбоксов, которое они имели в прошлом промежуточном состоянии.

Вместо галочки иногда используют более специфический символ включённости (глаз, замок), который сразу же означает, каким именно аспектом управляет элемент. В Фотошопе «глазик» управляет видимостью слоёв и эффектов:

Уважаемые советчики! Что бы вы исправили или дополнили?

Интерфейс
Полезно
 15
15
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Никогда не понимал, для чего нужно промежуточное состояние. Оно вводит в заблуждение. Если оно нужно для того, чтобы отпугнуть тебя от нажатия по нему (и как следствие сбрасывания состояний дочерних элементов), то кажется, будто бы не сильный аргумент. Помимо прочего не совсем очевидно, в какое состояние ты перейдёшь, кликнув по нему: в «выделить все» или в «сбросить все»

Marat

В винде можно управлять интерфейсом без клавиатуры: таб — перемещение между элементами, пробел — включение‑выключение чекбокса или нажатие кнопки. Так вот когда встаёшь табом на элемент, то вокруг него появляется индикатор: рамка пунктирная или фон меняется.

Ещё про доступность с клавиатуры.

Когда табаешься по интерфейсу, таб останавливается в группе чекбоксов только один раз. Внутри группы фокус двигается стрелочками вверх и вниз.

Когда фокус попадает внутрь группы чекбоксов, можно по‑разному выбирать, на какой чекбокс фокус упадёт:
― запоминать, какой чекбокс в последний раз имел фокус, и возвращать фокус ему;
― фокусировать первый чекбокс, если таб пришёл сверху, или последний, если шифт‑таб пришёл снизу.

Не знаю, что лучше! Как будто бы первый вариант более заботливый, а второй — более понятный.

Внутри группы пробел или энтер ставят и снимают сфокусированную галочку.

Кстати, для радиокнопок фокус работает так же.

Вот недавно у меня был рабочий кейс. Например, чекбоксы обозначают фильтры контента, которые в ленту попадают пользователю. Дефолтное состояние этих чекбоксов — это «все выключены» и отображаем весь контент. Или «все включены» и отображаем весь контент?

Когда это фильтры по типу, при отключенных чекбоксах мы показываем всё, как будто фильтрация не применена. Или не показываем ничего, потому что типы не выбраны? Будто не имеет смысла при пустых чекбоксах не показывать юзеру ничего, так?

Ещё хорошо, когда можно выделить много строк чек‑боксов за раз и при клике на сам чек‑бокс случится изменение состояния у всего выделения, а не только у того, что был выделен. Зачем? Иногда, когда большой список, можно забыть, что только что включил, а что собирался изначально.

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

Крис Даниелян, оба способа могут применяться.

Например, в фильтрах Excel сразу отмечены чекбоксами все значения в столбце. Снятие чекбокса исключает показ данного значения.

В интернет‑магазинах обычно применяется другой паттерн: по‑умолчанию показывается весь ассортимент, но чекбоксы пустые. Тесты показывают, что неподготовленным пользователям проще отметить нужное, чем снять отметку с ненужного. При этом помним про принцип, что изначально перед фильтрацией надо показывать пользователю какие‑то данные. Если пользоваться только логикой компонента, то пришлось бы показывать снятые чекбоксы и нулевую выборку. Это удлиняет путь пользователя и очень снижает конверсию.

Всё зависит от конкретно вашего продукта, и вам поможет тестирование на пользователях.

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы