чекбокс что это такое

Чекбоксы: один из самых используемых графических элементов в мире

Все пользователи интернета хоть раз в жизни встречали такой графический элемент, как чекбокс. Просто не все знают, что это именно чекбокс.

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

Чекбокс — что это такое?

Чекбокс дает примерно такие же функции. Ставя «галочку» в квадратике, человек подтверждает, что он ознакомился с тем пунктом, рядом с которым стоит чекбокс.

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

Чекбокс глазами разработчика

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

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

Правильное расположение. Правильным расположением пунктов чекбокса считается вертикальное. Это когда пункты списка идут один над другим. И непосредственно рядом с «квадратиком» справа описывается его значение.

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

Соблюдайте баланс в размере. Не нужно делать слишком мелкие чекбоксы, так как пользователи просто не смогут по ним «попасть» мышкой. Если нет возможности сделать «квадратик» нормального размера, тогда нужно сделать кликабельной всю область чекбокса: « квадратик » вместе с описанием. Кстати, это можно взять за правило и всегда делать описание квадратика кликабельным, чтобы пользователям было удобнее совершать выбор.

Опция «выбрать все». Если ваш чекбокс с большим количеством пунктов для выбора, то обязательно нужно добавить опции «выбрать все» и «убрать все», чтобы пользователи при множественном выборе не «тыкали» каждый пункт отдельно.

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

Заключение

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

у него должен быть красивый внешний вид;

все должно быть лаконично и понятно написано;

поведение чекбокса должно быть максимально предсказуемо.

Чекбокс создается для удобства пользователей — не нужно об этом забывать!

Мы будем очень благодарны

если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.

Источник

Чекбоксы — это что такое?

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

Чекбокс: обычная галочка

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

Использование чекбоксов при создании сайтов

Разработчики сайтов несколько шире видят данный элемент. Ведь создать его намного сложнее, чем просто кликнуть мышкой по квадратику. Разрабатываются сайты при помощи гипертекстового языка разметки. В профессиональной среде такой язык называют HTML. Чтобы создать в этом языке такую галочку необходимо написать определенный код. Как же на самом деле создаются чекбоксы? HTML представляет собой специализированный элемент, который является полем, наделенным типом «чекбокс». Пишется он следующим образом:

Чекбокс: принцип функционирования

Данный элемент работает по довольно простому принципу: либо отрицание, либо утверждение. Если в поле отмечена галочка, то браузер отправит переменную, которая отправит для обработки имя поля на сервер. Если же галочка не будет отмечена, то сервер ничего не получит. У данного элемента имеется атрибут, который имеет значение value. Данный атрибут является необязательным. Разработчики добавляют к тегу специальный атрибут, который указывает на галочку, поставленную по умолчанию. Называется этот атрибут checked, что в переводе с английского означает «отмечено».

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

Зависимые чекбоксы

В том случае, если необходимо выбрать только один вариант из множества представленных, то можно использовать другие элементы, такие как радиокнопки. В некоторых случаях используется такой тип, как зависимые чекбоксы. Совместно с языком программирования JavaScriptHTML позволяет сделать один главный флажок, от которого будут зависеть все остальные. При нажатии на данный элемент может быть отмечено сразу несколько чекбоксов. Используется такое довольно редко, поскольку это противоречит правилу отметки галочек.Чекбоксы, как и другие теги в HTML, имеют свои признаки. Какими же они могут быть? Выше уже говорилось об атрибуте для предварительной отметки флажка checked. Поскольку в одной форме у чекбоксов должны быть разные имена, необходим атрибут name. Именно этот атрибут и идентифицирует каждый флажок по отдельности. Чтобы задать значение, которое будет отправлено на сервер, необходимо использовать атрибут value. Необходимо отметить, что чекбоксы представляют собой графические элементы управления, которые применяются преимущественно в различных формах. Работают они в трех режимах: выбранный, не выбранный и неопределенный.

Использование в таблицах

Такой элемент как «чекбокс» может использоваться не только в HTML при разработке веб-приложений и сайтов. Данный элемент также используется в программном обеспечении, например, в программах 1C. На предприятии имеется множество различных составляющих и при работе с документацией необходимо все это отмечать. Например, при помощи чекбокса можно отмечать список клиентов или перечень складских запасов. В каких еще программах может быть использован данный элемент? Всем известна программа Exel от компании Microsoft, которая зачастую используется в качестве альтернативы 1C. Здесь принцип работы данного флажка следующий: если галочка отмечена, то данный элемент возвращает истинное значение. Если галочка снята, то данный элемент возвращает ложное значение. Чтобы вставить чекбокс в документ, необходимо включить специальную вкладку для разработчика. Это можно сделать при помощи параметров, которые отличаются в каждой версии программы Exel.

Как же можно найти нужные настройки? Для этой цели всегда можно воспользоваться поисковой системой или справкой. Когда данная вкладка будет включена, то можно будет вставлять данный элемент, используя команду «Вставить» из пункта «Элементы управления». Тут необходимо обратить внимание на тот момент, что в меню также содержатся элементы ActiveX, которые расположены под необходимыми элементами формы. Здесь также имеются чекбоксы. В чем же заключается разница?Для использования элементов ActiveX необходим встроенный язык программирования VBA, которым владеют немногие. Обыкновенные флажки можно привязать сразу к определенной ячейке в документе. После того, как все чекбоксы в Exel будут проставлены, они станут отмеченными по умолчанию. Если кликнуть мышкой в любом месте документа, отметка будет снята. Чтобы выполнить обратное выделение, необходимо кликнуть по флажку правой кнопкой мыши. Левая кнопка снимает или устанавливает галочку.

Источник

Как сделать правильные чекбоксы на сайте – 8 наших рекомендаций

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

Что такое чекбокс

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

✓ Пример правильного чекбокса с сайта экспресс-доставки SPSR

При заполнении формы пользователь нередко сталкивается с элементами управления (контролами) для выбора каких-то вариантов (опций). Самые распространенные элементы выбора — это чекбоксы, переключатели, радиокнопки и списки. Мы начнём нашу серию статей об элементах выбора с подробного разбора чекбоксов.

Почему важно делать правильные чекбоксы?

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

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

Когда используются чекбоксы?

Основная функция чекбокса — информировать,что у пользователя есть выбор. И он может либо согласиться, поставив галочку, либо отказаться.

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

Самый простой пример группы чекбоксов – это список писем в почте и возможность групповых операций с ними.

✓ Пример чекбокса в интерфейсе Gmail

Советы, как правильно использовать чекбокс

1. Не перемудрите и используйте стандартный вид чекбокса

Традиционно чекбоксы имеют квадратную форму. Пользователи распознают визуальные объекты по форме и стандартная квадратная форма чекбокса – это очень важно. Это связано с тем, что мы воспринимаем то, что ожидаем и ‘эта особенность описана у нас в Золотом правиле №4. Визуальная ясность. То есть пользователь должен легко распознавать элементы управления по их внешнему виду.

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

✓ Пример понятного чекбокса из интерфейса почты Яндекса

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

2. Правильно располагайте списки чекбоксов

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

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

3. Используйте в подписях чекбоксов понятные утвердительные формулировки

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

✓ Удачный пример формулировки на сайте Ostrovok.ru

✘ Пример отрицательной формулировки в настройках Microsoft Word

4. Не делайте размер чекбокса слишком маленьким

✓ Чекбокс маленького размера на сайте Ostrovok.ru, который превратили в кнопку

✓ Чекбокс удобного размера на сайте Аэрофлота

5. Чекбоксы должны реагировать не только при нажатии на квадратик, но и при нажатии на их подписи

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

✓ Чекбокс небольшого размера на сайте Аэрофлота, который реагирует на нажатие подписи

6. Используйте опции «выбрать все» и «убрать все»

Чтобы облегчить работу пользователя с большим количеством чекбоксов (более 5), в интерфейсе должны быть предусмотрены опции «Выбрать все чекбоксы» и «Снять все чекбоксы». Представьте, что вам нужно выбрать, скажем, 14 пунктов из 20 в списке. Гораздо удобнее и быстрее будет сначала выбрать все, а потом снять ненужные галочки.

✓ Правильный пример использования опции “выбрать все” торрент-клиента μTorrent

7. Чекбокс не должен запускать действие мгновенно

Важно понимать, что, когда пользователь взаимодействует с чекбоксами, он не ждет мгновенной обратной связи. Действие произойдет тогда, когда пользователь нажмет какую-то кнопку: “сохранить”, “отправить”, “подписаться”. То есть чекбоксы хорошо работают в ситуациях, когда нужно сделать несколько промежуточных шагов, чтобы изменения вступили в силу.

✓ Удачный пример использования чекбокса на сайте Аэрофлота

8. У чекбоксов, которые открывают дополнительные элементы, надписи должны оканчиваться многоточием

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

В каком случае выбрать чекбокс, а в каком – переключатель?

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

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

Заключение

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

А у вас на сайте пользователям удобно взаимодействовать с чекбоксами? → Узнайте у наших экспертов прямо сейчас.

Материалы по теме

Источник

Что такое чекбокс для сайта? Живые примеры!

Что такое чекбокс для сайта?

Разработчики интернет-проектов, веб-приложений и программ для ПК должны быть осведомлены о том, что такое чекбоксы. Однако обычные интернет-пользователи, не знающие нюансов программирования, далеко не всегда понимают значение данного термина. Стоит заметить, что в этом непонятном слове нет ничего необычного. Чекбоксы – это обычный элемент управления, применяемый в процессе разработки веб-форм.

Обыкновенная галочка

«Галочка» знакома любому человеку. Этот символ впервые встречается еще в школе. Обычно его используют для выбора правильного ответа в процессе прохождения тестирования или анкетирования.

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

«Галочки» активно применяются и в интернет-торговле. При помощи чекбоксов пользователи, которые оформляют заказ, выбирают те товары, которые им необходимы. Чекбоксы также применяются в компьютерных играх, точнее – в процессе их инсталляции. Например, «установщик» может попросить пользователя выбрать необходимое ПО.

Применение чекбоксов в процессе веб-разработки

Веб-разработчики видят в чекбоксах не просто символ «галочки». Это обусловлено тем, что создание данного символа намного сложнее, чем клик по выбранному квадратику. Для разработки чекбоксов принято использовать язык разметки HTML. Для создания этого элемента нужно прописать следующий код:

Принцип работы

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

Нужно заметить, что эти элементы имеют атрибут, принимающий значение value. Этот атрибут не является обязательным. Веб-разработчки также применяют атрибут, указывающий на отметку, которая была поставлена заранее (то есть по умолчанию). Данный атрибут называется checked. В переводе на русский язык он означает «отмечено».

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

Радиокнопки

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

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

Чекбоксы могут иметь несколько атрибутов. Ранее говорилось об атрибуте checked. Также стоит сказать несколько слов об атрибуте name. Он необходим для присваивания чекбоксам различные имена.

Благодаря этому существует возможность идентификации каждого отдельного флажка. Для отправки данных на сервер также используется атрибут value.

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

Источник

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

(Мы продолжаем переводить цикл статей по UX/UI. Полную подборку можно найти в коллекции « Настройки»)

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

Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.

Наиболее распространенными элементами выбора являются чекбоксы, переключатели, радиокнопки и выпадающие списки. Каждый из них при правильном использовании работает просто отлично. В этой статье мы поговорим о чекбоксах и переключателях.

Чекбоксы

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

Переключатели

Элемент интерфейса “переключатель” символизирует настоящий переключатель, при помощи которого можно что-то выключить или включить.

Обычно переключатели используются для обозначения действия (например, запуск или прекращение чего-то). Так, например, работает выключатель света:

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

Используйте стандартные визуальные представления

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

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

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

Располагайте списки вертикально

Постарайтесь делать вертикальные списки, чтобы каждый пункт был в отдельной строке. Это справедливо как для переключателей, так и для чекбоксов. Если вы все-таки решили использовать горизонтальный лейаут, обратите внимание на расстояния между кнопками/чекбоксами и лейблами: должно быть понятно, к какой кнопке относится каждый лейбл. Ниже — пример плохой работы с расстояниями.

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

При проектировании переключателей постарайтесь избежать путаницы с текущим состоянием. Для примера возьмем переключатель из iOS 6 и рассмотрим состояние ON с голубой заливкой.

Как понять, переключатель сейчас в состоянии ON или его нужно передвинуть, чтобы перевести на ON? “ON” — это состояние (прилагательное) или действие (глагол)? Не ясно.

Не нужно путать пользователей: очень важно разграничить действие и состояние. А за счет подсветки текущего состояния дизайн можно сделать еще удобнее:

Используйте в названиях полей утвердительные формулировки

Названия полей должны быть утвердительными и отражать действия, чтобы было понятно, что произойдет при выборе каждой опции. Избегайте отрицательных формулировок, типа “Не присылать мне рассылку” — в этом случае получается, что пользователь должен включить опцию, чтобы действие не происходило.

Пусть чекбокс “включается” по клику на лейбл

Используйте чекбоксы для изменения настроек; не используйте для обозначения действия

Представим себе опцию, которая подразумевает только два возможных варианта. Что использовать в этом случае: переключатель или чекбокс? Основное отличие в том, что чекбокс означает статус, а переключатель — действие. Можете представить себе реальный выключатель — какое действие он выполняет в вашей ситуации? Если картинка сложилась, можете смело использовать для этой опции переключатель.

Посмотрите на пример ниже. Понятно, что переключатель сети Wi-Fi находится в положении “on”. А вот чекбокс немного смущает. Пользователю приходится думать, включен ли Wi-Fi или поставить галочку, чтобы включить его.

Обеспечьте обратную связь от взаимодействия с переключателем/чекбоксом

Вообще, когда пользователь взаимодействует с чекбоксами (например, заполняя какую-то форму), он не ждет мгновенной обратной связи. Изменения произойдут потом, когда он нажмет “сохранить” или “отправить”.

А вот с переключателями все наоборот. Когда пользователь двигает переключатель, он ожидает немедленных изменений. Мы привыкли к этому в реальной жизни: когда щелкаешь выключателем, сразу загорается свет.

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

Заключение

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

Впервые опубликовано на babich.biz

Если вам понравилась статья и перевод, дайте нам знать — нажмите ♡

А если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.

Мобильное приложение «Заметки о психике» | Mental Notes

Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.

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

Источник