Дизайн Ян Австрейх
4 242

Чекбокс или переключатель: что выбрать 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)

Заключение

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

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

{ "author_name": "Ян Австрейх", "author_type": "self", "tags": [], "comments": 26, "likes": 33, "favorites": 99, "is_advertisement": false, "subsite_label": "design", "id": 51721, "is_wide": false, "is_ugc": true, "date": "Mon, 26 Nov 2018 11:35:57 +0300" }
{ "id": 51721, "author_id": 192524, "diff_limit": 1000, "urls": {"diff":"\/comments\/51721\/get","add":"\/comments\/51721\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/51721"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "possessions": [] }

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

Популярные

По порядку

Написать комментарий...
9

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

Ответить
1

И кто вообще сказал, что "вправо" — это "включено"?

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

Ответить
3

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

Ответить
0

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

Ответить
–1

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

Ответить
2

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

Ответить
0

по идее надо им инвертировать их конечно

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
3

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

Ответить
0

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

Ответить
1

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

Ответить
–1

чекбокс - выбор вариантов

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

Ответить
3

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

Ответить
2

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

Ответить

0

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

Ответить

1

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

Ответить
1

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

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

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

Ответить
0

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

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

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

Ответить
1

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

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

Ответить
0

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

Ответить
0

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

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Приложение-плацебо скачали
больше миллиона раз
Подписаться на push-уведомления
{ "page_type": "default" }