Чекбокс что это: что это такое простыми словами, определение

Чекбокс — что это и для чего нужны

Так выглядят чекбоксы в фильтре по материалу на сайте Lamoda

Смысл и функции чекбокса

Кажется, что может быть проще квадратного поля с галочкой! Но у этого знака свои секреты. Чекбокс — это простой, но мощный и многофункциональный инструмент в дизайне пользовательского интерфейса, который позволяет посетителям сайта подтвердить свой выбор. Две составные части чекбокса — это поле с двумя вариантами состояния и ярлык (название чекбокса, например «Согласен с условиями» в веб-форме или «Лайкра» в фильтре интернет-магазина).

Чекбокс может применяться сразу в нескольких местах.

• В выпадающих списках. Как мы уже убедились на примере фильтра Lamoda, чекбоксы позволяют людям легко и быстро указывать их предпочтения в интернет-магазинах, на сайтах услуг, в приложениях, а также выполнять еще множество операций: оформлять заказ, чистить корзину, выбирать дополнительные опции доставки и пр. 
• В онлайн-анкетах. Если какой-либо бланк опроса можно заполнить онлайн, например анкету на получение визы, то там наверняка будут чекбоксы. Это отличный способ быстро выбрать подходящие утверждения из ограниченного списка возможных, не вписывая их вручную. 
• Перед кнопкой отправки данных в пользовательских формах. Здесь он служит средством подтверждения того, что человек прочитал и понял пункт или утверждение, например политику в отношении обработки персональных данных.
• В электронной почте. Здесь пользователи могут выбрать несколько писем и взаимодействовать с ними, например читать, перемещать, удалять или откладывать только одно выбранное или сразу несколько.

Чекбоксы в Google-почте очень важны: с помощью них легко управлять письмами, если их поток действительно велик

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

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

Чекбокс и смежные понятия

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

Переключатель — это элемент пользовательского интерфейса, который позволяет юзеру переключаться между двумя состояниями какого-либо объекта или функции: включено и выключено. Он представлен в виде небольшой кнопки, которую можно двигать влево или вправо для смены состояний. Левое положение обычно обозначает «выключено», а правое — «включено».

Яркий пример переключателей можно встретить в банковских приложениях. Фрагмент дизайна от Nikita Ogurechnikov. Источник

Радиокнопка (radio button) — это элемент, который позволяет пользователю выбрать один вариант из набора взаимоисключающих вариантов. Она представлена в виде небольшого круга, который может быть выбран (заполнен) или не выбран (пуст). Они часто используются в формах, чтобы позволить пользователям указать только один вариант из списка, остальные при этом автоматически становятся невыбранными.

Примеры радиокнопок, расположенных вертикально и горизонтально, из руководства по созданию приложений Microsoft. Источник

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

Примеры выпадающих списков с чекбоксами и радиокнопками в UI Kit от Alena K. Источник

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

Рекомендации по созданию чекбоксов

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

1. Ярлык должен быть кратким и четким. Чем короче название чекбокса (ярлык), тем лучше. Он должен находиться в непосредственной близости от флажка. Это позволит пользователю понять, к чему относится флажок. Исключение может составлять текст в онлайн-опросах и текст согласия с политикой обработки персональных данных в формах — такие надписи сложно сократить. Кроме того, в них часто должна быть размещена ссылка на сам документ, с которым соглашается пользователь. 
2. Активное и неактивное состояния чекбокса должны быть четко различимы. Так, например, активное состояние часто изображается ярким синим или зеленым цветом, а неактивное — серым или белым. Недоступные варианты, которые нельзя выбрать, обычно делают полупрозрачными. Флажок должен обеспечивать четкую обратную связь с пользователем, когда он выбран или отменен, например изменять свой внешний вид или отображать сообщение.

Пример изображения различных состояний чекбоксов из UI Kit от Sasha Chupris. Источник

3. Используйте единый визуальный дизайн. Чекбокс должен иметь единый стиль во всем интерфейсе как с точки зрения его внешнего вида, так и с точки зрения его поведения. Например, убедитесь, что для всех флажков на всем сайте используется один и тот же цвет активного состояния.
4. Применяйте стандартную форму. Флажок должен иметь стандартную форму, обычно квадратную, так как пользователи быстро узнают ее и это снижает риск введения их в заблуждение. Например, если заменить квадрат на прямоугольник, это станет похоже на заполняемое поле или будет казаться, что верстка элемента «поехала». 
5. Размещайте чекбоксы правильно. Оптимальное расположение элементов флажка — вертикальное, когда элементы списка находятся один над другим, а значение описывается непосредственно рядом с галочкой. Это визуально хорошо отделяет один чекбокс от другого. Если же вам все-таки нужно использовать горизонтальное расположение, проследите, чтобы расстояние между группами элементов четко отделяло их друг от друга. 
6. Применяйте четкие формулировки. Значения флажка должны иметь очень четкие описания того, что произойдет, когда флажок будет выбран, чтобы избежать путаницы и неправильного толкования. Не нужно использовать отрицательные конструкции в подписи. Например, если пользователь увидит рядом с чекбоксом фразу «Не присылать рассылку», то может запутаться, ведь теперь ему нужно поставить галочку, чтобы что-то не происходило, а это противоречит смыслу чекбокса. 
7. Оптимизируйте размер элемента. Чекбокс не должен быть слишком маленьким, так как пользователям будет трудно на него нажать. Если размер не может быть увеличен, следует сделать кликабельной всю область флажка, включая ярлык.
8. Добавьте опцию «Выбрать все». Если у вас много элементов для выбора, добавление таких опций, как «Выбрать все» и «Удалить все», облегчит пользователям выбор нескольких вариантов.
9. Объединяйте чекбоксы в блоки по смыслу, если их много. Если у вас длинный список параметров с чекбоксами, разделяйте их на группы по смыслу, чтобы пользователь смог быстрее сориентироваться в списке. Например, один длинный список материалов женских джинсов можно разделить по типам тканей: синтетика, натуральные и комбинированные материалы.

Самый яркий пример группировки чекбоксов — фильтры в интернет-магазине. От того, насколько удобна их группировка, во многом зависят продажи. Фрагмент работы Pankaj Patel. Источник

10. Дополняйте чекбокс кнопкой подтверждения. Рядом с элементом должна быть кнопка для подтверждения, например «Подписаться», «Сохранить», «Подтвердить», «Применить» или «Отправить». Это сообщит пользователям о том, что выбранный вариант принят и учтен системой.
11. Сделайте чекбокс доступным. Убедитесь, что флажок доступен для всех, включая тех, кто использует вспомогательные технологии, такие как программы для чтения с экрана. Для этого можно применять соответствующие метки, альтернативный текст и другие средства.
12. Тестируйте чекбоксы. Регулярно проверяйте их, чтобы убедиться, что они работают правильно и что пользователи могут понять, как их использовать. Это можно сделать, проведя юзабилити-тестирование с репрезентативной выборкой пользователей.

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

ИСКРА —
неделя знакомства
с дизайн-профессиями

бесплатно

ИСКРА —
неделя знакомства
с дизайн-профессиями

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

разжечь искру

что выбрать UX-дизайнеру при создании форм выбора — Дизайн на vc.ru

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

14 269 просмотров

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

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

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

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

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

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

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

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

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

Отобразить панель «избранное»» (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)

Заключение

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

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

Что такое флажок?

Обновлено: 30.11.2020, автор: Computer Hope

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

При щелчке внутри поля появляется галочка (✓), указывающая на положительный выбор (да). При повторном нажатии галочка исчезает, указывая на отрицательный выбор (нет).

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

Установка флажка в поле включает этот параметр, а снятие флажка отключает его.

• Пример флажка.
• Как создать флажок на моей веб-странице HTML.
• Как установить флажок в поле с помощью клавиатуры?
• Разница между флажком и переключателем.
• Должен ли я использовать «флажок» или «флажок» в своем письме?
• Связанная информация.

Пример флажка

Ниже приведен интерактивный пример нескольких флажков. Чтобы установить флажок или установить флажок в поле с помощью компьютерной мыши, щелкните флажок левой кнопкой мыши.

Чтобы установить флажок на сенсорном экране, коснитесь его пальцем. Если флажок установлен, его можно снять, щелкнув или коснувшись поля еще раз.

Кончик

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

Примечание

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

Как установить флажок в поле с помощью клавиатуры?

Чтобы установить флажок с помощью клавиатуры, нажимайте

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

Примечание

Если нажатие Tab не приводит к немедленному выбору полей выше в вашем браузере, вам нужно продолжать нажимать Tab , пока они не будут выбраны. Кроме того, вы можете сначала щелкнуть поле мышью, а затем нажать пробел , чтобы снять флажок и поставить галочку.

Как создать флажок на моей веб-странице HTML

Чтобы создать флажок на веб-странице, используйте тег

, как показано ниже. Приведенный ниже код взят из приведенного выше примера, который создает флажок, за которым следует текст «Флажок 1».

  Флажок 1 

Чтобы выполнить действие на основе отмеченных флажков, оно должно быть включено в тег

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

Разница между флажком и переключателем

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

Должен ли я использовать «флажок» или «флажок» в своем письме?

Обе формы верны, и их использование зависит от руководства по стилю, которому вы следуете. При описании выбираемого поля или объекта мы следуем Руководству Microsoft по стилю и пишем «флажок» двумя словами во всех наших письмах. При описании значения атрибута, такого как значение «флажка» в теге ввода HTML, оно должно состоять из одного слова.

Кончик

Согласно Google Trends, «флажок» используется чаще, чем «флажок».

• Используйте флажки для выбора нескольких файлов в Windows.
• Как создать флажки в электронной таблице Excel.

Проверка, Интернет-термины, Список, Кнопка, Радиокнопка, Термины программного обеспечения

Флажок Определение и значение — Merriam-Webster

флажок ˈchek-ˌbäks 

: небольшое поле (как в контрольном списке), в которое можно поставить галочку (см. контрольную запись 2, смысл 7), чтобы сделать выбор, указать на завершение задачи и т. д.

Примеры предложений

Недавние примеры в Интернете Хотя в теории это работает, попытка обнаружить наступающие методы злоумышленников и растущий объем данных, необходимых для этого, сделали большинство SIEM несовместимыми с требованиями 9.0109 установите флажок , поскольку службы безопасности изо всех сил пытаются обеспечить человеческие ресурсы для их эксплуатации. — Рэнди Уоткинс, Forbes , 5 марта 2021 г. Но ученые и лидеры, которые потратили время на размышления над этими вопросами, в целом согласны с тем, что еврейство — это обширная, интерсекциональная идентичность, которую нельзя полностью охватить флажком в форме. —Хармит Каур, CNN , 4 апреля 2023 г. Установите флажок мгновенного купона на 15 долларов США , чтобы снизить цену до 40 долларов США. — Скотт Гилбертсон, Wired , 27 ноября 2020 г. Установите на странице купон флажок и примените код ECOROBOT8 для сохранения. — Лорин Страмп, Wired , 4 сентября 2021 г. Выберите установите флажок рядом с Find My Mac. — Ким Командо, USA TODAY , 26 мая 2022 г. При появлении запроса установите флажок . — Группа обслуживания абонентов, The Enquirer , 22 июня 2022 г. Термин «американские потомки рабства» был придуман в 2016 году Антонио Муром и Иветт Карнелл для создания отдельной категоризации чернокожих американцев, чтобы добавить нюансов к этому универсальному подходу 9. 0109 флажок . — Рита Омоха, ELLE , 14 апреля 2022 г. Флажок для обозначения моей расы может быть просто еще одним способом заклеймить мою красивую коричневую кожу. — Элизабет А. Браун, STAT , 22 февраля 2023 г. Узнать больше

Эти примеры программно скомпилированы из различных онлайн-источников, чтобы проиллюстрировать текущее использование слова «флажок». Любые мнения, выраженные в примерах, не отражают точку зрения Merriam-Webster или ее редакторов. Отправьте нам отзыв об этих примерах.

История слов

Первое известное использование

1944 год, в значении, определенном выше

Путешественник во времени

Первое известное использование флажок был в 1944 году

Другие слова того же года деньги из чековой книжки

флажок

проверка сертификатора

Посмотреть другие записи поблизости 

Процитировать эту запись

Стиль

MLAЧикагоAPAMМерриам-Вебстер

«Флажок».

No related posts.