Чекбокс или переключатель: что выбрать UX-дизайнеру при создании форм выбора Статьи редакции
Перевод статьи UX-дизайнера Садии Минхас.
Формы предоставляют несколько видов элементов управления, которые помогают пользователям взаимодействовать с продуктом. Самое сложное — правильно подобрать элементы для разных задач.
У чекбокса есть три состояния: включён, выключен и включён частично. Последнее состояние означает, что есть параметр и подпараметры, и пользователь поставил галочку напротив основного, но подпараметры включил частично.
Переключатель представляет собой физический переключатель, который позволяет включать или выключать что-то, например, фонарик.
Использование переключателя — это действие, состоящее из двух шагов: выбор опции и её включение, выключение с помощью сдвига. Чекбокс требует только выбрать опцию, а включает или выключает её обычно другой элемент управления.
При выборе между ними лучше сосредоточиться на контексте использования элемента, а не на выполняемой функции.
Ниже я привожу несколько вариантов их использования, а также рекомендации по выбору между этими двумя элементами управления при разработке форм.
Мгновенный ответ
Используйте переключатель, если:
- пользователь ждёт мгновенный ответ от выбранных настроек без конкретного действия;
- результатом сдвига переключателя будет включение, выключение или показ, скрытие чего-либо;
- пользователь хочет выполнить действие, которое не нуждается в проверке или подтверждении.
Подтверждение
Используйте чекбоксы, если:
- параметры должны быть подтверждены и проверены пользователем перед тем, как будут отправлены;
- параметры требуют действия, такого как «Отправить», «ОК», «Далее» или «Применить», перед отображением результатов;
- пользователь должен выполнить дополнительные шаги, чтобы изменения вступили в силу.
Выбор из нескольких вариантов
Используйте чекбоксы, если:
- доступен список опций, и пользователю необходимо выбрать одну или несколько из них;
- нажимать на разные переключатели по очереди, чтобы увидеть, что изменится после каждого нажатия, займёт много времени.
Состояние «частичной включённости»
Используйте чекбоксы, если:
- несколько подпараметров сгруппированы под общим. Состояние частичной включённости означает, что из списка выбрано несколько подпараметров (но не все из них).
Визуально понятное состояние
Используйте чекбоксы, если:
- при использовании переключателя может возникнуть путаница с состояниями включён, выключен. Иногда трудно понять, отображает переключатель состояние или действие;
- пользователю нужно чётко видеть, выбрана или не выбрана опция.
Связанные друг с другом вещи
Используйте чекбоксы, если:
- пользователь должен выбрать однин или несколько связанных между собой пунктов.
Используйте переключатели, если:
- Пользователь включает, выключает независимые функции или виды поведения.
Одна опция
Используйте чекбоксы, если:
- пользователь должен сделать простой «да или нет» выбор;
- очевидно, что у опции нет других вариантов, кроме как быть включённой или выключенной.
Используйте переключатели, если:
- вы хотите предложить пользователю выбор между двумя состояниями — «включено» и «выключено».
Заключение
Важно использовать подходящие элементы управления в формах, чтобы сделать их более удобными для пользователя. Поскольку формы могут быть очень длинными, с большим количеством опций, их заполнение может стать для пользователя утомительным, если ему придётся совершать лишние действия.
Представленные рекомендации помогут вам выбрать между чекбоксом и переключателем при добавлении элементов управления в свои формы.
Можно я тоже немного по-постулирую?
[arrogant_mode]
Переключатель — зло (окей, потенциальное зло).
Вместо тривиального признака "есть/нет", "присутствие/отсутствие" для состояний "включено/выключено" в случае с чекбоксом, переключатель показывает своё состояние формой графического элемента, в которой пользователь должен увидеть положение "слева/справа", которое в свою очередь должно быть воспринято как "включено/выключено". И кто вообще сказал, что "вправо" — это "включено"?
Переключатель критически зависим от используемой цветовой и графической темы оформления. При переключении от одной темы к другой отображение переключателя может сильно отличаться (или же идти в разрез со стилистикой темы). В некоторых случаях (скажем, в монохромных темах), состояние переключателя в принципе трудно считывается.
Переключатель более громоздок, чем чекбокс и хуже вписывается и приспосабливается под разнообразные стили окружающего оформления.
Вообще-то, изначально переключатель появился в интерфейсе iOS и органично смотрелся и хорошо работал именно в том окружении. Распространение этого опыта на множество других применений и окружений не выглядит естественным, а больше похоже на нездоровую моду, вроде анимированных элементов в 90-2000-х.
В целом, переключатель получается сложным элементом управления, выполняющим простую функцию. Его ценность невысока, зато в его реализации нужно учитывать куда больше нюансов и можно наделать куда больше ляпов, чем в реализации чекбокса.
[/arrogant_mode]
Кек.
Комментарий недоступен
https://ru.wikipedia.org/wiki/%D0%97%D0%B0%D0%BA%D1%80%D1%83%D1%87%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B2%D0%BE%D0%B4%D1%8B_%D0%BF%D1%80%D0%B8_%D1%81%D1%82%D0%BE%D0%BA%D0%B5
в разных полушариях по разному это работает, может закручиваться как влево, так и вправо. Мы не в идеальном мире живём.
Да-да, из всех несовершенств нашего неидеального мира меня лично всегда больше всего беспокоила разница в том, как закручивается вода в стоке в разных частях мира. Спасибо, что озвучили это.
Комментарий недоступен
То есть у ребят, что пишут в обратную сторону, переключатели инвертированы?
Так и есть. И IOS это делает.
Комментарий недоступен
Как раз пока отправлял скрин пришла идея, почему активация переключателя направлена в сторону чтения текста - мол когда ты читаешь слева на право и в тексте появляется "тумблер", то гораздо удобнее и легче его потянуть в сторону прочтения текста. Это более интуитивно.
Это трудно описать, но это сравнимо с каким-нибудь состоянием "потока", в котором ты бежишь по тексту и тебе легче "зацепить" тумблер на бегу потянув его за собой, чем остановиться (остановив поток) и потянуть его в обратную сторону (расходуя дополнительную "энергию" на остановку и дополнительное действие), а потом уже продолжить бежать.
А может, дело в том, что поясняющий переключатель текст располагается именно справа и ползунок логично тянуть к нему, а не от него... Хотя Apple явно считает иначе. Так, мысли вслух.
Так ведь направление "включения" зависит не от положения текста рядом, а от направления чтения текста. Например вот UI kit найденный мной в поиске по запросам "rtl ui interface" (rtl значит чтение справа налево). И переключатель здесь также направлен налево.
Само расположение текста справа от переключателя, а не слева - именно причина чтения справа налево. Также не поленился и переключил язык в вк на арабский - второй скриншот. (теперь бы найти пункт "язык" 😅)
Опечатался - не причина чтения, а следствие)
По-моему, всё интуитивно очевидно. Всегда делал точно так же. Переключатель - вкл/выкл, чекбокс - выбор вариантов.
Мне показалось, или Вы серьёзно заменяете Checkbox переключателем, а сам Checkbox уравниваете с Radio button?
Не понял, откуда Вы это взяли.
Видимо, у нас вышло непонимание из-за "дрейфа" смысла слова «вариант», связанного с английским «option». В русском «вариант» это обычно «один из нескольких», а вот английское «option» не настолько ограничено по смыслу. И Вы использовали слово «вариант» в более "английском" значении.
Уфф... Многословно-то как получилось... =(
То ли автор того, то ли переводчик не але.. После второго абзаца стало ясно, что контент выдавлен насильно, а просмотр примеров подтвердил догадку.
Хорошая статья, спасибо за перевод.
Комментарий удален модератором
Пиздуй на баррикады
Комментарий удален модератором
Комментарий недоступен
Из-за перевода пункта "Only one option can be selected or deselected and its meaning is obvious."
как "очевидно, что у опции нет других вариантов, кроме как быть включённой или выключенной."
возникает дикая путаница, из-за которой впадаешь в ступор: "Стоп, так только что говорили, что включить\выключить - это про переключатель."
Правильнее было бы написать что-то вроде:
"очевидно, что у опции нет других вариантов, кроме как быть в состоянии 'выбрано' или 'отменено'".
А в целом за перевод спасибо 👍
"Only one option can be selected or deselected and its meaning is obvious."
переводится как
"Только один вариант может быть выбран или не выбран и его значение очевидно."
Каким образом приведенный скриншот, на котором в случае "правильного" использования включены оба чекбокса, иллюстрирует это утверждение, я вообще не представляю.
Я реально не понимаю, что за откровения в статье узрели многие и что за ускользающие смыслы им открылись. Что чекбокс, что переключатель — это элемент управления с двумя состояниями, "флаг".
Единственное мнемоническое отличие между ними, которое можно отметить, это то, что в реальной жизни переключатели обычно приводят к мгновенному появлению результата (включение света или какой-то техники, например), в то время как чекбоксам более свойственно задавать некое поведение на будущее (выдавать всплывающие уведомление о новых письмах, например). Это описано в первом пункте статьи, но и там видно, что грань между понятиями очень тонкая и спорная, потому что приведен пример с "Авто-яркостью", а эта опция является не столько приводящей к прямым последствиям (как режим "В самолёте"), сколько определяющей сложное поведение системы в будущем (подстраивание яркости вод окружающие условия).
А ещё, напоследок, переключатель сугубо скевоморфен (извините за матюки). У чекбокса его состояние "отмечен/не отмечен" тривиально соответствует состоянию флага "да/нет". У какой нибудь полосы прокрутки положение ползунка отображает процентные характеристики области просмотра. В случае же с переключателем его два состояния это просто две "картинки" (потрясающий момент с лево-право тут прекрасно обсуждён в другой ветке), почти с таким же успехом можно использовать пару картинок "собака/кошка", "солнце/луна", "огонь/вода". Ну, ок, если скучно, то можно и так. только не понятно зачем.
Соглашусь, что более-менее четкий смысл идет в первом пункте. Дальше больше разжовываются более конкретные ситуации. Но автор лишь перевел, так что обвинять его в чем-то нет никакого смысла).
А на самом деле эта формулировка (включая оригинал на английском) совершенно не подходит для этого пункта. Этот текст сразу заставляет думать о radio инпутах, но никак не о чекбоксах.
Что то, что то хуйня
Отличная тема и разбор. Тот факт, что при прочтении думаешь "на сколько это интуитивно понятно" говорит о том, что действительно великолепное решение