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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Гораздо проще выбрать нужные хобби (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)

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

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

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

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

26 комментариев

Kirill Pankin

26.11.2018

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