Александр
Тумблер UI — это переключатель состояния «включено / выключено». Чекбокс, или флажок, обозначает выбранный вариант: он может быть самостоятельным или входить в группу. Оба элемента обычно работают с двумя состояниями, поэтому выбирать между ними только по признаку «бинарный выбор» нельзя.
Начните со смысла действия: человек включает настройку, выбирает пункты для общего сохранения или управляет всей группой? Ниже разберём эти случаи на настройках уведомлений, включая частичный выбор, ожидание сохранения и ошибку.
Что такое тумблер?
Тумблер — элемент интерфейса, который переключает настройку между состояниями «включено» и «выключено». Он напоминает физический выключатель: положение ползунка помогает увидеть текущее состояние. Например, настройка «Уведомления о задачах» включает или отключает соответствующие уведомления.
Визуальный дизайн тумблера часто включает скользящую кнопку и изменение цвета. Но цвет не должен быть единственным различием: меняйте положение ползунка, сохраняйте читаемую подпись и передавайте состояние вспомогательным технологиям. Включённое состояние не обязано быть зелёным — важнее последовательность внутри продукта.
Подпись «Уведомления о задачах» остаётся той же в обоих состояниях. Если вместо неё попеременно показывать «Включить уведомления» и «Выключить уведомления», человеку придётся выяснять, описывает текст текущее состояние или следующее действие. В паттерне Switch от WAI-ARIA также указано, что доступное имя переключателя не должно меняться вместе с состоянием.
Что такое чекбокс?
Чекбокс - это еще один распространенный элемент пользовательского интерфейса, который позволяет пользователям выбрать один или несколько вариантов из набора предложенных. Чекбоксы выглядят как маленькие квадратики, в которых можно поставить или снять отметку. Флажки можно объединять в группу, чтобы пользователи могли выбрать несколько вариантов.
Флажки обычно используются для опций, в которых пользователь может выбрать несколько элементов из списка, например, для выбора предпочтений или функций в форме. Когда флажок установлен, он обычно отображает галочку внутри квадрата, визуально подтверждая выбор пользователя.
При этом каждый обычный чекбокс тоже имеет два состояния: выбран или не выбран. Несколько чекбоксов создают комбинацию независимых выборов. Для одного обязательного варианта из взаимоисключающего набора, например периода «Ежедневно / Еженедельно / Ежемесячно», обычно нужна группа радиокнопок, а не несколько независимых флажков.
Различие между чекбоксами и тумблерами
Хотя и тумблеры, и чекбоксы служат для представления двоичных состояний, между ними есть ключевые различия:
| Вопрос | Тумблер | Чекбокс |
|---|---|---|
| Что означает состояние? | Настройка включена или выключена. | Вариант выбран или не выбран. |
| Как выглядит выбор? | Ползунок меняет положение; цвет дополнительно поддерживает состояние. | Появляется или исчезает отметка внутри поля. |
| Когда применяется изменение? | Часто сразу после переключения. Ожидание ответа нужно показать отдельно. | Может применяться сразу, например в фильтре, или после общей кнопки «Сохранить». |
| Что происходит в группе? | Каждый переключатель управляет своей настройкой. | Можно выбрать несколько пунктов; родительский флажок может отражать частичный выбор. |
| Что не служит критерием? | «Эта функция важнее», «переключатель выглядит увлекательнее». | «Эта функция второстепенная», «у флажка нет бинарного состояния». |
Немедленная визуальная реакция нужна обоим элементам. Она показывает, что нажатие принято, но ещё не доказывает сохранение на сервере. Способ применения изменений определяет весь экран: не заставляйте пользователя угадывать, какая настройка уже сохранена, а какая ждёт общей кнопки.
Когда использовать чекбоксы и тумблеры
Используйте тумблер для включения настройки
В примере «Уведомления о задачах» нажатие сразу отправляет изменение. При медленном ответе рядом появляется «Сохранение…». После подтверждения остаётся новое состояние. Если сохранение не удалось, интерфейс показывает «Не удалось сохранить» и возвращает подтверждённое состояние, предлагая повторить попытку. Так включённый вид не обещает уведомления, которые система ещё не включила.
Пока запрос выполняется, определите поведение повторного нажатия: временно запретить его с понятной обратной связью или явно обработать новую цель пользователя. Этот выбор нужно согласовать с разработкой. Если сервер мог принять запрос, но ответ потерялся, сначала уточните фактическое состояние — повторное действие не должно опираться на догадку.
Используйте чекбоксы для независимых пунктов
Для тем письма подойдут флажки «Назначения», «Комментарии» и «Сроки задач». Пользователь отмечает нужные темы, затем нажимает «Сохранить темы». До сохранения показывайте, что выбор изменён; после успешного ответа — «Темы сохранены». Если человек уходит с несохранёнными изменениями, предусмотрите понятное решение: сохранить, остаться или отменить изменения.
Фильтры каталога — другой допустимый случай: флажки могут сразу обновлять список результатов. Отдельная кнопка не является обязательным свойством чекбокса. Главное, чтобы одно и то же действие на конкретном экране имело предсказуемый результат.
Частичное состояние родительского чекбокса
Добавим над тремя темами родительский флажок «Все темы». Если выбраны «Назначения» и «Комментарии», а «Сроки задач» не выбраны, родитель показывает частичный выбор. Это сводка состояния дочерних пунктов; отдельная тема не становится «частично включённой».
- Ничего не выбрано: родитель без отметки.
- Выбраны все три темы: родитель с галочкой.
- Выбрана часть тем: родитель с отдельным знаком, например горизонтальной чертой.
Нажатие «Все темы» в частичном состоянии может выбрать всю группу; следующее нажатие — снять выбор со всей группы. Зафиксируйте именно этот переход в макете, чтобы разработчик не угадывал правило. Паттерн Checkbox от WAI-ARIA описывает родительский элемент с состоянием mixed и его связь с группой.
Доступность и состояния, которые легко пропустить
У каждого элемента должно быть понятное имя, у группы — общий заголовок, у клавиатурного фокуса — видимая индикация. В паттернах WAI-ARIA клавиша пробела меняет состояние сфокусированного переключателя или чекбокса. Для нестандартных веб-компонентов разработчику также нужны корректная роль и программно определяемое состояние; рисунок галочки или цвет дорожки этого не заменяют.
Различайте «выключено» и «недоступно»: первое — значение настройки, второе — невозможность её изменить сейчас. Если действие недоступно, объясните причину рядом, например «Настройкой управляет администратор». Состояние ожидания сохранения тоже не равно частичному выбору.
Как проверить выбор компонента в Pixso
Соберите в Pixso небольшой экран уведомлений: один тумблер для включения уведомлений и отдельную группу тем с кнопкой сохранения. Повторяющиеся строки и состояния оформите как компоненты, чтобы подписи, отступы и индикаторы оставались согласованными.
Подготовьте кадры «Выключено», «Сохранение», «Включено» и «Ошибка сохранения». Для тем добавьте частичный выбор, все выбранные пункты и сохранённый результат. Соедините кадры переходами, чтобы участник мог включить уведомления, столкнуться с ошибкой, повторить действие и отдельно сохранить темы. Такое моделирование показывает поведение интерфейса; реальную отправку и сохранение выполняет приложение.
На проверке попросите человека включить уведомления и оставить только сообщения о назначениях и комментариях. После выполнения уточните, что уже действует и что ещё нужно сохранить. Если ответ расходится с состоянием системы, доработайте подписи и обратную связь, затем повторите проверку.
Перед передачей в разработку приложите правила применения изменений, переходы частичного выбора, поведение при ошибке и требования к фокусу. Тогда форма компонента будет связана с понятным действием и проверяемым результатом.
