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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Одна опция

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

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

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

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

Заключение

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

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

0
26 комментариев
Написать комментарий...
Kirill Pankin

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

Ответить
Развернуть ветку
Аккаунт удален

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

Ответить
Развернуть ветку
Кохоне
Ответить
Развернуть ветку
Михаил Миняев

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

Ответить
Развернуть ветку
Valentin Dombrovsky

Да-да, из всех несовершенств нашего неидеального мира меня лично всегда больше всего беспокоила разница в том, как закручивается вода в стоке в разных частях мира. Спасибо, что озвучили это.

Ответить
Развернуть ветку
Аккаунт удален

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

Ответить
Развернуть ветку
Serge Ivanov

То есть у ребят, что пишут в обратную сторону, переключатели инвертированы?

Ответить
Развернуть ветку
Илья Меджидов

Так и есть. И IOS это делает.

Ответить
Развернуть ветку
Аккаунт удален

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

Ответить
Развернуть ветку
Илья Меджидов

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

Ответить
Развернуть ветку
Serge Ivanov

А может, дело в том, что поясняющий переключатель текст располагается именно справа и ползунок логично тянуть к нему, а не от него... Хотя Apple явно считает иначе. Так, мысли вслух.

Ответить
Развернуть ветку
Илья Меджидов

Так ведь направление "включения" зависит не от положения текста рядом, а от направления чтения текста. Например вот UI kit найденный мной в поиске по запросам "rtl ui interface" (rtl значит чтение справа налево). И переключатель здесь также направлен налево.
Само расположение текста справа от переключателя, а не слева - именно причина чтения справа налево. Также не поленился и переключил язык в вк на арабский - второй скриншот. (теперь бы найти пункт "язык" 😅)

Ответить
Развернуть ветку
Илья Меджидов

Опечатался - не причина чтения, а следствие)

Ответить
Развернуть ветку
Андрей Чигаров

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

Ответить
Развернуть ветку
Kirill Pankin

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

Ответить
Развернуть ветку
Андрей Чигаров

Не понял, откуда Вы это взяли.

Ответить
Развернуть ветку
Kirill Pankin
чекбокс - выбор вариантов

Видимо, у нас вышло непонимание из-за "дрейфа" смысла слова «вариант», связанного с английским «option». В русском «вариант» это обычно «один из нескольких», а вот английское «option» не настолько ограничено по смыслу. И Вы использовали слово «вариант» в более "английском" значении.
Уфф... Многословно-то как получилось... =(

Ответить
Развернуть ветку
Serge Ivanov

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

Ответить
Развернуть ветку
Стас Непрокин

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

Ответить
Развернуть ветку

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

Развернуть ветку
IO

Пиздуй на баррикады

Ответить
Развернуть ветку

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

Развернуть ветку
Аккаунт удален

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

Ответить
Развернуть ветку
Илья Меджидов

Из-за перевода пункта "Only one option can be selected or deselected and its meaning is obvious."
как "очевидно, что у опции нет других вариантов, кроме как быть включённой или выключенной."
возникает дикая путаница, из-за которой впадаешь в ступор: "Стоп, так только что говорили, что включить\выключить - это про переключатель."

Правильнее было бы написать что-то вроде:
"очевидно, что у опции нет других вариантов, кроме как быть в состоянии 'выбрано' или 'отменено'".

А в целом за перевод спасибо 👍

Ответить
Развернуть ветку
Kirill Pankin

"Only one option can be selected or deselected and its meaning is obvious."
переводится как
"Только один вариант может быть выбран или не выбран и его значение очевидно."
Каким образом приведенный скриншот, на котором в случае "правильного" использования включены оба чекбокса, иллюстрирует это утверждение, я вообще не представляю.

Я реально не понимаю, что за откровения в статье узрели многие и что за ускользающие смыслы им открылись. Что чекбокс, что переключатель — это элемент управления с двумя состояниями, "флаг".

Единственное мнемоническое отличие между ними, которое можно отметить, это то, что в реальной жизни переключатели обычно приводят к мгновенному появлению результата (включение света или какой-то техники, например), в то время как чекбоксам более свойственно задавать некое поведение на будущее (выдавать всплывающие уведомление о новых письмах, например). Это описано в первом пункте статьи, но и там видно, что грань между понятиями очень тонкая и спорная, потому что приведен пример с "Авто-яркостью", а эта опция является не столько приводящей к прямым последствиям (как режим "В самолёте"), сколько определяющей сложное поведение системы в будущем (подстраивание яркости вод окружающие условия).
А ещё, напоследок, переключатель сугубо скевоморфен (извините за матюки). У чекбокса его состояние "отмечен/не отмечен" тривиально соответствует состоянию флага "да/нет". У какой нибудь полосы прокрутки положение ползунка отображает процентные характеристики области просмотра. В случае же с переключателем его два состояния это просто две "картинки" (потрясающий момент с лево-право тут прекрасно обсуждён в другой ветке), почти с таким же успехом можно использовать пару картинок "собака/кошка", "солнце/луна", "огонь/вода". Ну, ок, если скучно, то можно и так. только не понятно зачем.

Ответить
Развернуть ветку
Илья Меджидов

Соглашусь, что более-менее четкий смысл идет в первом пункте. Дальше больше разжовываются более конкретные ситуации. Но автор лишь перевел, так что обвинять его в чем-то нет никакого смысла).

А на самом деле эта формулировка (включая оригинал на английском) совершенно не подходит для этого пункта. Этот текст сразу заставляет думать о radio инпутах, но никак не о чекбоксах.

Ответить
Развернуть ветку
Андрей Иванов

Что то, что то хуйня

Ответить
Развернуть ветку
Anton Neznamov

Отличная тема и разбор. Тот факт, что при прочтении думаешь "на сколько это интуитивно понятно" говорит о том, что действительно великолепное решение

Ответить
Развернуть ветку
23 комментария
Раскрывать всегда