Что такое чекбокс в компьютере
Обновлено: 07.07.2024
Формы предоставляют несколько видов элементов управления, которые помогают пользователям взаимодействовать с продуктом. Самое сложное — правильно подобрать элементы для разных задач.
У чекбокса есть три состояния: включён, выключен и включён частично. Последнее состояние означает, что есть параметр и подпараметры, и пользователь поставил галочку напротив основного, но подпараметры включил частично.
Переключатель представляет собой физический переключатель, который позволяет включать или выключать что-то, например, фонарик.
Использование переключателя — это действие, состоящее из двух шагов: выбор опции и её включение, выключение с помощью сдвига. Чекбокс требует только выбрать опцию, а включает или выключает её обычно другой элемент управления.
При выборе между ними лучше сосредоточиться на контексте использования элемента, а не на выполняемой функции.
Ниже я привожу несколько вариантов их использования, а также рекомендации по выбору между этими двумя элементами управления при разработке форм.
Используйте переключатель, если:
- пользователь ждёт мгновенный ответ от выбранных настроек без конкретного действия;
- результатом сдвига переключателя будет включение, выключение или показ, скрытие чего-либо;
- пользователь хочет выполнить действие, которое не нуждается в проверке или подтверждении.
Используйте чекбоксы, если:
Чекбокс подходит для опций «присылать мне уведомления об активации» (send me activation notifications), «присылать мне отчёты о результатах ежемесячно» (send me monthly performance summaries), «присылать мне новостную рассылку и рекламные предложения» (send me newsletter and promotions)Используйте чекбоксы, если:
- доступен список опций, и пользователю необходимо выбрать одну или несколько из них;
- нажимать на разные переключатели по очереди, чтобы увидеть, что изменится после каждого нажатия, займёт много времени.
Используйте чекбоксы, если:
- несколько подпараметров сгруппированы под общим. Состояние частичной включённости означает, что из списка выбрано несколько подпараметров (но не все из них).
Используйте чекбоксы, если:
- при использовании переключателя может возникнуть путаница с состояниями включён, выключен. Иногда трудно понять, отображает переключатель состояние или действие;
- пользователю нужно чётко видеть, выбрана или не выбрана опция.
Используйте чекбоксы, если:
- пользователь должен выбрать однин или несколько связанных между собой пунктов.
Используйте переключатели, если:
- Пользователь включает, выключает независимые функции или виды поведения.
Используйте чекбоксы, если:
- пользователь должен сделать простой «да или нет» выбор;
- очевидно, что у опции нет других вариантов, кроме как быть включённой или выключенной.
Используйте переключатели, если:
- вы хотите предложить пользователю выбор между двумя состояниями — «включено» и «выключено».
Важно использовать подходящие элементы управления в формах, чтобы сделать их более удобными для пользователя. Поскольку формы могут быть очень длинными, с большим количеством опций, их заполнение может стать для пользователя утомительным, если ему придётся совершать лишние действия.
Представленные рекомендации помогут вам выбрать между чекбоксом и переключателем при добавлении элементов управления в свои формы.
Можно я тоже немного по-постулирую?
[arrogant_mode]
Переключатель — зло (окей, потенциальное зло).
Вместо тривиального признака "есть/нет", "присутствие/отсутствие" для состояний "включено/выключено" в случае с чекбоксом, переключатель показывает своё состояние формой графического элемента, в которой пользователь должен увидеть положение "слева/справа", которое в свою очередь должно быть воспринято как "включено/выключено". И кто вообще сказал, что "вправо" — это "включено"?
Переключатель критически зависим от используемой цветовой и графической темы оформления. При переключении от одной темы к другой отображение переключателя может сильно отличаться (или же идти в разрез со стилистикой темы). В некоторых случаях (скажем, в монохромных темах), состояние переключателя в принципе трудно считывается.
Переключатель более громоздок, чем чекбокс и хуже вписывается и приспосабливается под разнообразные стили окружающего оформления.
Вообще-то, изначально переключатель появился в интерфейсе iOS и органично смотрелся и хорошо работал именно в том окружении. Распространение этого опыта на множество других применений и окружений не выглядит естественным, а больше похоже на нездоровую моду, вроде анимированных элементов в 90-2000-х.
В целом, переключатель получается сложным элементом управления, выполняющим простую функцию. Его ценность невысока, зато в его реализации нужно учитывать куда больше нюансов и можно наделать куда больше ляпов, чем в реализации чекбокса.
[/arrogant_mode]
Кек. ред.
Комментарий удален по просьбе пользователя
Закру́чивание воды́ при сто́ке — «факт», основанный на наблюдении движения воды в водовороте…в разных полушариях по разному это работает, может закручиваться как влево, так и вправо. Мы не в идеальном мире живём. ред.
Да-да, из всех несовершенств нашего неидеального мира меня лично всегда больше всего беспокоила разница в том, как закручивается вода в стоке в разных частях мира. Спасибо, что озвучили это.
Комментарий удален по просьбе пользователя
То есть у ребят, что пишут в обратную сторону, переключатели инвертированы?
Так и есть. И IOS это делает.
Комментарий удален по просьбе пользователя
Как раз пока отправлял скрин пришла идея, почему активация переключателя направлена в сторону чтения текста - мол когда ты читаешь слева на право и в тексте появляется "тумблер", то гораздо удобнее и легче его потянуть в сторону прочтения текста. Это более интуитивно.
Это трудно описать, но это сравнимо с каким-нибудь состоянием "потока", в котором ты бежишь по тексту и тебе легче "зацепить" тумблер на бегу потянув его за собой, чем остановиться (остановив поток) и потянуть его в обратную сторону (расходуя дополнительную "энергию" на остановку и дополнительное действие), а потом уже продолжить бежать.
А может, дело в том, что поясняющий переключатель текст располагается именно справа и ползунок логично тянуть к нему, а не от него. Хотя Apple явно считает иначе. Так, мысли вслух.
Так ведь направление "включения" зависит не от положения текста рядом, а от направления чтения текста. Например вот UI kit найденный мной в поиске по запросам "rtl ui interface" (rtl значит чтение справа налево). И переключатель здесь также направлен налево.
Само расположение текста справа от переключателя, а не слева - именно причина чтения справа налево. Также не поленился и переключил язык в вк на арабский - второй скриншот. (теперь бы найти пункт "язык" 😅)
Опечатался - не причина чтения, а следствие)
По-моему, всё интуитивно очевидно. Всегда делал точно так же. Переключатель - вкл/выкл, чекбокс - выбор вариантов.
Мне показалось, или Вы серьёзно заменяете Checkbox переключателем, а сам Checkbox уравниваете с Radio button?
Не понял, откуда Вы это взяли.
чекбокс - выбор вариантов
Видимо, у нас вышло непонимание из-за "дрейфа" смысла слова «вариант», связанного с английским «option». В русском «вариант» это обычно «один из нескольких», а вот английское «option» не настолько ограничено по смыслу. И Вы использовали слово «вариант» в более "английском" значении.
Уфф. Многословно-то как получилось. =(
То ли автор того, то ли переводчик не але.. После второго абзаца стало ясно, что контент выдавлен насильно, а просмотр примеров подтвердил догадку.
Хорошая статья, спасибо за перевод.
Пиздуй на баррикады
Работа дизайнера заключается в том, что бы было удобно, а что бы не было нищеты, войны или коррупции, это работа других людей, и справляются они с ней довольно хуево, на мой взгляд - хуже чем UX дизайнеры справляются со своей.
Из-за перевода пункта "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."
переводится как
"Только один вариант может быть выбран или не выбран и его значение очевидно."
Каким образом приведенный скриншот, на котором в случае "правильного" использования включены оба чекбокса, иллюстрирует это утверждение, я вообще не представляю.
Я реально не понимаю, что за откровения в статье узрели многие и что за ускользающие смыслы им открылись. Что чекбокс, что переключатель — это элемент управления с двумя состояниями, "флаг".
Единственное мнемоническое отличие между ними, которое можно отметить, это то, что в реальной жизни переключатели обычно приводят к мгновенному появлению результата (включение света или какой-то техники, например), в то время как чекбоксам более свойственно задавать некое поведение на будущее (выдавать всплывающие уведомление о новых письмах, например). Это описано в первом пункте статьи, но и там видно, что грань между понятиями очень тонкая и спорная, потому что приведен пример с "Авто-яркостью", а эта опция является не столько приводящей к прямым последствиям (как режим "В самолёте"), сколько определяющей сложное поведение системы в будущем (подстраивание яркости вод окружающие условия).
А ещё, напоследок, переключатель сугубо скевоморфен (извините за матюки). У чекбокса его состояние "отмечен/не отмечен" тривиально соответствует состоянию флага "да/нет". У какой нибудь полосы прокрутки положение ползунка отображает процентные характеристики области просмотра. В случае же с переключателем его два состояния это просто две "картинки" (потрясающий момент с лево-право тут прекрасно обсуждён в другой ветке), почти с таким же успехом можно использовать пару картинок "собака/кошка", "солнце/луна", "огонь/вода". Ну, ок, если скучно, то можно и так. только не понятно зачем.
Чекбокс используется для управления параметром с двумя состояниями.
Чекбокс (от англ. checkbox) — дословно «отметка в квадратике».
При общении с пользователями мы говорим не «чекбокс», а «пункт», см. Глоссарий
Когда использовать
Используйте чекбокс для:
- выбора элементов списка. Например, выбор документов для массовых действий;
- выбора параметров. Например, включение уведомлений и выбор случаев, в которых нужно присылать уведомления.
Чекбокс не запускает действие немедленно. Как правило для этого нужно нажать подтверждающую кнопку. Для немедленного включения какого-то режима в интерфейсе лучше подходит тогл.
Описание работы
Клик по названию или по самому чекбоксу приводит к его выбору или снятию выбора.
В списках активная область чекбокса вытягивается на всю высоту строки:
Название группы
Название группы чекбоксов пишется с заглавной буквы.
Называйте группу чекбоксов так, чтобы:
- было понятно, что можно выбрать несколько пунктов;
- название каждого пункта не содержало повторяющуюся часть.
Название чекбокса
Название чекбокса пишется с заглавной буквы.
Формулируйте название чекбокса в положительном ключе. Не используйте отрицательные формулировки, потому что отключение такого чекбокса требует от пользователя произвести в голове логическую операцию c двумя «не». Например, «Не не получать уведомления»:
Интересное исключение — reCAPTCHA. В данном случае отрицание оправданно, потому что оно объясняет само существование этого контрола. Да и отключать такой чекбокс пользователю никогда не придется.
Если пользователю может быть не очевидно, что произойдет, при включении чекбокса, объясните это дополнительным текстом или используйте группу радиокнопок:
Старайтесь не вставлять в название чекбокса ссылку, т.к. самое название уже является интерактивным элементом. Если все-таки хочется добавить ссылку, оставьте первые 1-2 слова обычным текстом:
Расположение
В общем случае группа чекбоксов должна располагаться в 1 столбец. В списке чекбоксов, размещенных горизонтально или в несколько столбцов тяжелее ориентироваться, потому что не всегда очевидна граница группы.
Разбивать чекбоксы на несколько столбцов можно, если это разделение логически обосновано и понятно пользователю.
Группа из одного чекбокса требует аккуратного обращения при верстке формы.
Один чекбокс сразу с двумя подписями выглядит странно:
Чекбокс без названия выглядит уже недопустимо, к тому же в него сложнее целиться:
Если чекбокс поставить в колонку с полями, они будут воспринимается связанными по смыслу, хотя это не так:
Такой проблемы нет, если форма верстается в одну колонку:
Чтобы решить проблему при двухколоночной компоновке, одиночный чекбокс можно заменить на группу радиокнопок:
Если придумать уместное название для двух радиокнопок сложно, можно использовать тогл. Обычно, включение тогла приводит к моментальным изменениям в системе, но даже если такое поведение реализовать невозможно, лучше использовать тогл, чем одиночный чекбокс:
Если чекбокс связан по смыслу с другим элементом формы, их можно группировать:
Валидация
Варианты, которые нельзя выбрать в списке чекбоксов, должны быть заблокированы. Валидация может быть только в том случае, если обязательно выбрать хотя бы один вариант.
Чекбоксы с валидацией выделяются красной рамкой. Если заголовок группы находится слева, текст валидации располагайте под группой чекбоксов:
Если заголовок группы находится над группой чекбоксов, текст ошибки располагайте сразу под заголовком группы:
Если для валидации вы используете тултип, поведение подсказок будет иным. Тултип отображается при наведении на группу чекбоксов.
Если заголовок группы чекбоксов находится слева, располагайте тултип над группой чекбоксов.
Если заголовок группы сверху, выводите тултип справа, напротив первого чекбокса.
Предупреждение о возможной ошибке:
Частично выбранный чекбокс
Иногда списки с чекбоксами используются в справочниках или настройках и содержат дочерние элементы.
Если выбрана только часть дочерних чекбоксов, родительский чекбокс переходит в состояние «частично выбран».
Клик по стрелке сворачивает или разворачивает группу.
Клик в родительский чекбокс или его текст выбирает себя и все дочерние или снимает выбор, не разворачивая/сворачивая группу.
Если выбрана часть дочерних, родительский чекбокс отображается как квадрат.
Клик в квадрат выбирает все дочерние, и себя.
Дизайн
Выбранный чекбокс обозначается символом из шрифта Kontur Iconic.
Название группы выравнивайте по базовой линии первого пункта.
Расстояние между пунктами больше межстрочного расстояния на 10 px. Если в группе есть вложенная группа, то от ее последнего элемента до следующего элемента первого уровня нужно увеличить отступ до 20 px:
В этой статье мы рассмотрим:
- Как обрабатывать события onclick и onchange.
- Как обрабатывать события checkbox в JQuery.
- Как отправлять данные формы при установке флажка.
- Как отобразить / скрыть раздел формы при установке флажка чекбокса.
В этом примере мы будем использовать форму, через которую передается имя пользователя. В ней размещен чекбокс, в котором пользователь должен установить флажок, если он свободно владеет английским языком. Если нет, то отображается подсказка с текстом, что для этой вакансии нужен разговорный английский.
Обработка событий checkbox с использованием JavaScript
Существует два события, которые можно привязать к чекбоксу. Они будут запускаться после изменения состояния элемента. Это события onclick и onchange.
Событие onchange не вызывается до тех пор, пока состояние checked не будет обновлено. Internet Explorer не запускает событие onсhange, пока с чекбокса не снят фокус ввода. Чтобы избежать этой проблемы, я рекомендую использовать событие onclick.
В коде HTML я добавляю событие onclick, которое буде вызывать функцию checkFluency():
В checkFluency() мы отслеживаем состояние чекбокса. Если флажок не установлен, то отображаем предупреждение.
Использование jQuery
То же самое можно реализовать с помощью jQuery. В коде примера я подключил jQuery и добавил пару строк CSS для стилизации страницы.
Я также добавил HTML, который мы использовали в предыдущем разделе. В этом примере мы будем использовать jQuery вместо JavaScript.
Обратите внимание, что я удалил событие onclick. В jQuery мы будем привязывать событие к элементу без необходимости вызывать его из HTML-кода.
Ниже приводится код JavaScript:
Я использую $(document).ready(); с анонимной функцией. Это функции, объявленные во время выполнения, и без имени.
Внутри анонимной функции я разместил следующий код:
Это то же самое, что и оператор if, который мы применяли в первом примере. Только вместо document.getElementById() мы используем ключевое слово this. Оно указывает на элемент, который вызовет события. В данном примере это checkbox.
Отправка данных формы при установке флажка
Скрыть / показать элементы при установке флажка
Большинство из вас встречало формы с разделом, который отображается после установки флажка чекбокса. Для реализации данного решения будем использовать jQuery.
Внутри div располагается форма. В ее поля пользователь вводит имя и адрес электронной почты. В веб-форме также есть чекбокс и текстовая область (textarea).
Когда флажок чекбокса установлен, текстовая область отображается. Поэтому по умолчанию она должна быть скрыта. Для этого мы создаем скрытый контейнер div (с id conditional_part):
К checkbox с идентификатором more-info мы привязываем событие onchange, которое запускает анонимную функцию при возникновении события.
Внутри анонимной функции используется оператор if. Он проверяет, установлен ли флажок чекбокса или нет. Затем мы применяем jQuery- функции hide() и show() . Они изменяют значения свойства display блока div с идентификатором conditional_part.
Дайте знать, что вы думаете по этой теме материала в комментариях. Мы очень благодарим вас за ваши комментарии, лайки, отклики, дизлайки, подписки!
Дайте знать, что вы думаете по данной теме в комментариях. Мы очень благодарим вас за ваши комментарии, отклики, лайки, подписки, дизлайки!
Копирайтер, переводчик и редактор. Опыт работы над федеральными (USABILITYLAB/AIC) и международными проектами (iSpring). Преподаватель курса «Копирайтинг и контент-маркетинг» в Институте программных систем.
Апр 19, 2017 · 6 мин читать
В процессе создания форм дизайнеру часто приходится решать, какой элемент интерфейса использовать для обозначения выбора. Конечно, у всех есть свои наработанные принципы. И тем не менее, есть несколько моментов, которые стоит учесть при подборе элемента выбора.
Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.
Наиболее распространенными элементами выбора являются чекбоксы, переключатели, радиокнопки и выпадающие списки. Каждый из них при правильном использовании работает просто отлично. В этой статье мы поговорим о чекбоксах и переключателях.
Чекбоксы
Мы используем чекбоксы, когда есть список опций, из которых пользователь может выбрать любое количество: хоть ни одной, хоть одну, хоть несколько. Иными словами, каждый чекбокс существует независимо от остальных чекбоксов в списке, а выбор одной опции не снимет флажок с остальных.
У чекбоксов есть лейблы (названия полей)
Переключатели
Элемент интерфейса “переключатель” символизирует настоящий переключатель, при помощи которого можно что-то выключить или включить.
Переключатель подразумевает два простых противоположных варианта
Обычно переключатели используются для обозначения действия (например, запуск или прекращение чего-то). Так, например, работает выключатель света:
Переключатели обычно работают по тому же принципу, как выключатели света
Практические методы использования чекбоксов и переключателей
Используйте стандартные визуальные представления
Чекбокс должен выглядеть как небольшой квадратик, в котором (если его выбирают) появляется небольшая галочка или крестик.
Элемент “чекбокс” в активном и неактивном состоянии. Источник изображения: Material Design
Переключатель должен выглядеть, как тумблер включения/выключения.
Элемент “переключатель” в активном и неактивном состоянии. Источник изображения: Material Design
Здорово, если момент взаимодействия будет сопровождаться понятным визуальным фидбэком. Небольшая анимация — важный штрих, который делает взаимодействие более эффективным. Это особенно важно на мобильных устройствах, где элементы управления должны казаться осязаемыми, хотя и находятся под слоем стекла.
iOS7/8 Кнопка-переключатель. Источник: Dribbble
Располагайте списки вертикально
Постарайтесь делать вертикальные списки, чтобы каждый пункт был в отдельной строке. Это справедливо как для переключателей, так и для чекбоксов. Если вы все-таки решили использовать горизонтальный лейаут, обратите внимание на расстояния между кнопками/чекбоксами и лейблами: должно быть понятно, к какой кнопке относится каждый лейбл. Ниже — пример плохой работы с расстояниями.
Сложно понять, какую кнопку нужно нажать, чтобы выбрать вариант “четыре”.
Текущее состояние переключателя нужно указывать не на нем, а за его пределами
При проектировании переключателей постарайтесь избежать путаницы с текущим состоянием. Для примера возьмем переключатель из iOS 6 и рассмотрим состояние ON с голубой заливкой.
Не сразу понятно: надпись ON — это текущее состояние или действие?
Как понять, переключатель сейчас в состоянии ON или его нужно передвинуть, чтобы перевести на ON? “ON” — это состояние (прилагательное) или действие (глагол)? Не ясно.
Не нужно путать пользователей: очень важно разграничить действие и состояние. А за счет подсветки текущего состояния дизайн можно сделать еще удобнее:
Цвет текста показывает текущее состояние (подсвечивается — значит включено)
Используйте в названиях полей утвердительные формулировки
Названия полей должны быть утвердительными и отражать действия, чтобы было понятно, что произойдет при выборе каждой опции. Избегайте отрицательных формулировок, типа “Не присылать мне рассылку” — в этом случае получается, что пользователь должен включить опцию, чтобы действие не происходило.
В чекбоксах всегда нужно использовать утвердительные команды, а не отрицательные, типа “не …”
Пусть чекбокс “включается” по клику на лейбл
У всех чекбоксов есть лейблы, но не у каждого есть тег <label>. Чекбоксы маленькие, и поэтому, согласно закону Фиттса, по ним бывает сложно попасть. Расширьте целевую зону — дайте возможность нажимать не только на чекбокс, но и на лейбл (или любой другой дополнительный текст).
Пусть пользователи нажимают хоть на чекбокс, хоть на его название.
Используйте чекбоксы для изменения настроек; не используйте для обозначения действия
Представим себе опцию, которая подразумевает только два возможных варианта. Что использовать в этом случае: переключатель или чекбокс? Основное отличие в том, что чекбокс означает статус, а переключатель — действие. Можете представить себе реальный выключатель — какое действие он выполняет в вашей ситуации? Если картинка сложилась, можете смело использовать для этой опции переключатель.
Посмотрите на пример ниже. Понятно, что переключатель сети Wi-Fi находится в положении “on”. А вот чекбокс немного смущает. Пользователю приходится думать, включен ли Wi-Fi или поставить галочку, чтобы включить его.
Для управления сервисами и системными компонентами (такими как Wi-Fi) используйте переключатели.
Обеспечьте обратную связь от взаимодействия с переключателем/чекбоксом
А вот с переключателями все наоборот. Когда пользователь двигает переключатель, он ожидает немедленных изменений. Мы привыкли к этому в реальной жизни: когда щелкаешь выключателем, сразу загорается свет.
Включение Wi-Fi в iOS
А чекбоксы отлично работают в ситуациях, когда нужно сделать несколько промежуточных шагов, чтобы изменения вступили в силу.
Заключение
Выбирая элементы интерфейса, будьте последовательны и предсказуемы. Следуйте стандартам дизайна — и вашим пользователям будет проще понять, как работает тот или иной элемент. В свою очередь, нарушение принципов дизайна делает интерфейс хрупким и непредсказуемым — словно что угодно может случиться без предупреждения.
Читайте также: