реклама
разместить

Чекбокс или переключатель: что выбрать UX-дизайнеру при создании форм выбора

Перевод статьи UX-дизайнера Садии Минхас.

Чекбокс или переключатель: что выбрать UX-дизайнеру при создании форм выбора

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

У чекбокса есть три состояния: включён, выключен и включён частично. Последнее состояние означает, что есть параметр и подпараметры, и пользователь поставил галочку напротив основного, но подпараметры включил частично.

Переключатель представляет собой физический переключатель, который позволяет включать или выключать что-то, например, фонарик.

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

При выборе между ними лучше сосредоточиться на контексте использования элемента, а не на выполняемой функции.

Ниже я привожу несколько вариантов их использования, а также рекомендации по выбору между этими двумя элементами управления при разработке форм.

Мгновенный ответ

Используйте переключатель, если:

  • пользователь ждёт мгновенный ответ от выбранных настроек без конкретного действия;
  • результатом сдвига переключателя будет включение, выключение или показ, скрытие чего-либо;
  • пользователь хочет выполнить действие, которое не нуждается в проверке или подтверждении.
Отобразить панель "избранное"» (show favourites bar), включить автоматическую настройку яркости (auto-brightness) и запустить Wi-Fi удобнее с помощью переключателя
Отобразить панель "избранное"» (show favourites bar), включить автоматическую настройку яркости (auto-brightness) и запустить Wi-Fi удобнее с помощью переключателя

Подтверждение

Используйте чекбоксы, если:

  • параметры должны быть подтверждены и проверены пользователем перед тем, как будут отправлены;
  • параметры требуют действия, такого как «Отправить», «ОК», «Далее» или «Применить», перед отображением результатов;
  • пользователь должен выполнить дополнительные шаги, чтобы изменения вступили в силу.
Чекбокс подходит для опций «присылать мне уведомления об активации» (send me activation notifications), «присылать мне отчёты о результатах ежемесячно» (send me monthly performance summaries), «присылать мне новостную рассылку и рекламные предложения» (send me newsletter and promotions)
Чекбокс подходит для опций «присылать мне уведомления об активации» (send me activation notifications), «присылать мне отчёты о результатах ежемесячно» (send me monthly performance summaries), «присылать мне новостную рассылку и рекламные предложения» (send me newsletter and promotions)

Выбор из нескольких вариантов

Используйте чекбоксы, если:

  • доступен список опций, и пользователю необходимо выбрать одну или несколько из них;
  • нажимать на разные переключатели по очереди, чтобы увидеть, что изменится после каждого нажатия, займёт много времени.
Гораздо проще выбрать нужные хобби (hobbies) из списка с помощью галочек в чекбоксах. На этой картинке выбраны «крикет» (cricket), «катание на велосипеде» (cycling) и «садоводство» (gardening), а «фотография» (photography), «письмо» (writing) и «готовка» (cooking) остались без галочки
Гораздо проще выбрать нужные хобби (hobbies) из списка с помощью галочек в чекбоксах. На этой картинке выбраны «крикет» (cricket), «катание на велосипеде» (cycling) и «садоводство» (gardening), а «фотография» (photography), «письмо» (writing) и «готовка» (cooking) остались без галочки

Состояние «частичной включённости»

Используйте чекбоксы, если:

  • несколько подпараметров сгруппированы под общим. Состояние частичной включённости означает, что из списка выбрано несколько подпараметров (но не все из них).
Здесь общий параметр "all" включает в себя подпараметры «черновик» (draft), «в работе» (in progress), «отправлено» (submitted), «одобрено» (approved) и «отклонено» (rejected)
Здесь общий параметр "all" включает в себя подпараметры «черновик» (draft), «в работе» (in progress), «отправлено» (submitted), «одобрено» (approved) и «отклонено» (rejected)

Визуально понятное состояние

Используйте чекбоксы, если:

  • при использовании переключателя может возникнуть путаница с состояниями включён, выключен. Иногда трудно понять, отображает переключатель состояние или действие;
  • пользователю нужно чётко видеть, выбрана или не выбрана опция.
Два состояния опции «автозаполнение» (auto fill form). Чекбокс сразу даёт понять, включена ли опция
Два состояния опции «автозаполнение» (auto fill form). Чекбокс сразу даёт понять, включена ли опция

Связанные друг с другом вещи

Используйте чекбоксы, если:

  • пользователь должен выбрать однин или несколько связанных между собой пунктов.
Здесь представлены несколько типов контента (content types): «статьи» (articles), «контакты» (contacts), «сообщения» (messages), «просьбы» (requests) и «запросы» (queries)
Здесь представлены несколько типов контента (content types): «статьи» (articles), «контакты» (contacts), «сообщения» (messages), «просьбы» (requests) и «запросы» (queries)

Используйте переключатели, если:

  • Пользователь включает, выключает независимые функции или виды поведения.
Режим полёта (airplane mode), Wi-Fi и Bluetooth работают независимо друг от друга, поэтому уместно использовать для них переключатель
Режим полёта (airplane mode), Wi-Fi и Bluetooth работают независимо друг от друга, поэтому уместно использовать для них переключатель

Одна опция

Используйте чекбоксы, если:

  • пользователь должен сделать простой «да или нет» выбор;
  • очевидно, что у опции нет других вариантов, кроме как быть включённой или выключенной.
В этом примере чекбоксы используются для опций «запомнить меня» (remember me) и «я согласен с условиями предоставления услуг» (I agree terms of servise)
В этом примере чекбоксы используются для опций «запомнить меня» (remember me) и «я согласен с условиями предоставления услуг» (I agree terms of servise)

Используйте переключатели, если:

  • вы хотите предложить пользователю выбор между двумя состояниями — «включено» и «выключено».
«Режим полёта» (airplane mode)
«Режим полёта» (airplane mode)

Заключение

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

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

2626
реклама
разместить
26 комментариев

Можно я тоже немного по-постулирую?
[arrogant_mode]
Переключатель — зло (окей, потенциальное зло).
Вместо тривиального признака "есть/нет", "присутствие/отсутствие" для состояний "включено/выключено" в случае с чекбоксом, переключатель показывает своё состояние формой графического элемента, в которой пользователь должен увидеть положение "слева/справа", которое в свою очередь должно быть воспринято как "включено/выключено". И кто вообще сказал, что "вправо" — это "включено"?
Переключатель критически зависим от используемой цветовой и графической темы оформления. При переключении от одной темы к другой отображение переключателя может сильно отличаться (или же идти в разрез со стилистикой темы). В некоторых случаях (скажем, в монохромных темах), состояние переключателя в принципе трудно считывается.
Переключатель более громоздок, чем чекбокс и хуже вписывается и приспосабливается под разнообразные стили окружающего оформления.
Вообще-то, изначально переключатель появился в интерфейсе iOS и органично смотрелся и хорошо работал именно в том окружении. Распространение этого опыта на множество других применений и окружений не выглядит естественным, а больше похоже на нездоровую моду, вроде анимированных элементов в 90-2000-х.
В целом, переключатель получается сложным элементом управления, выполняющим простую функцию. Его ценность невысока, зато в его реализации нужно учитывать куда больше нюансов и можно наделать куда больше ляпов, чем в реализации чекбокса.
[/arrogant_mode]
Кек.

10

Комментарий недоступен

2

По-моему, всё интуитивно очевидно. Всегда делал точно так же. Переключатель - вкл/выкл, чекбокс - выбор вариантов.

3

Мне показалось, или Вы серьёзно заменяете Checkbox переключателем, а сам Checkbox уравниваете с Radio button?

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

3

Хорошая статья, спасибо за перевод.

2
Раскрывать всегда
Китайская Tencent представила бесплатный генератор 3D-моделей Hunyuan 3D 2.0

Он создаёт формы и текстуры по текстовому описанию или из изображений.

4444
1010
11
реклама
разместить
Telegram сделает Toncoin единственной криптовалютой для оплаты внутренних сервисов и запретит интеграцию с любыми блокчейнами, кроме TON

Перейти на него нужно до 21 февраля 2025 года, а новые сервисы должны уже запускаться на TON.

2121
99
55
22
Это наша корова - и мы её доим.
В 2024 году в России продали более 6 млн машин с пробегом — максимум за последние 10 лет

Лидерами среди брендов стали Lada, Toyota, Kia, Hyundai и Nissan.

55
44
Anthropic запланировала добавить двусторонний голосовой режим и функцию памяти в Claude — глава компании

А «в ближайшие месяцы» могут выпустить улучшенные ИИ-модели.

Источник: Anthropic
66
33
22
11
Два банка в Казахстане временно приостановили выпуск карт иностранцам

Накануне власти страны ввели ограничения по сроку действия банковских карт для нерезидентов — 12 месяцев.

Источник: pixelrz.com
1010
88
44
22
22
11
11
Э, за*бал уже
Суд обязал «партнёра» Hamster Kombat Эдуарда Гуриновича выплатить 2,5 млн рублей по делу об инфобизнесе

В 2022 году он запустил курс «Совет Директоров» вместе с главой сервиса YouDo Денисом Кутергиным.

Гуринович. Источник фото: Neva Today
99
44
44
11
Топ отраслей и специальностей, которые будут на подъеме в 2025 году
Всем назло
99
22
11
11
11
Дональд Трамп ограничил получение гражданства США по праву рождения

Генпрокуроры Калифорнии и Нью-Йорка намерены оспорить решение президента.

Donald Trump / X
2020
1111
88
44
11
11
Где же теперь элитные россияне будут рожать детей… неужели в России. Какой ужас
[]