Как сделать правильные чекбоксы на сайте — 8 наших рекомендаций
Правильные и понятные чекбоксы нужны, чтобы пользователи не совершали ошибок при взаимодействии с формами на сайте и понимали, что произойдет при нажатии на чекбокс. Другими словами, чекбокс – это аналог подписи в бумажном документе, поэтому пользователь должен хорошо понимать, где и под чем он подписывается.
Что такое чекбокс
Чекбокс (галочка, флажок, птичка) — это один из самых распространенных элементов управления, предоставляющих простой выбор из двух вариантов — вы либо согласны с чем-то, либо нет.
✓ Пример правильного чекбокса с сайта экспресс-доставки SPSR
При заполнении формы пользователь нередко сталкивается с элементами управления (контролами) для выбора каких-то вариантов (опций). Самые распространенные элементы выбора — это чекбоксы, переключатели, радиокнопки и списки. Мы начнём нашу серию статей об элементах выбора с подробного разбора чекбоксов.
Почему важно делать правильные чекбоксы?
Взаимодействие пользователя с формами ввода данных влияет на общее впечатление пользователя о сайте. Формы ввода — это например вход на сайт при помощи ввода логина и пароля, заполнение платежных данных или анкеты, введение адреса для доставки и прочее.
Несмотря на то, что чекбоксы считаются самыми простыми и понятными элементами управления, они нередко являются источниками ошибок при работе пользователей с вашими продуктами.
Когда используются чекбоксы?
Основная функция чекбокса — информировать,что у пользователя есть выбор. И он может либо согласиться, поставив галочку, либо отказаться.
Дополнительная функция чекбоксов – это обозначение какой-то группы из элементов для дальнейших групповых действий с ними. Мы используем чекбоксы, когда существует несколько опций, из которых пользователь может выбрать либо все, либо несколько, либо одну или ни одной. Каждый чекбокс существует независимо от остальных в списке.
Самый простой пример группы чекбоксов – это список писем в почте и возможность групповых операций с ними.
✓ Пример чекбокса в интерфейсе Gmail
Советы, как правильно использовать чекбокс
1.
![](/800/600/http/img.youtube.com/vi/OzLRwWek7eU/0.jpg?3489220329)
Традиционно чекбоксы имеют квадратную форму. Пользователи распознают визуальные объекты по форме и стандартная квадратная форма чекбокса – это очень важно. Это связано с тем, что мы воспринимаем то, что ожидаем и ‘эта особенность описана у нас в Золотом правиле №4. Визуальная ясность. То есть пользователь должен легко распознавать элементы управления по их внешнему виду.
Чекбокс должен выглядеть как небольшой квадратик, в котором в случае выбора появляется небольшая галочка. Не стоит делать чекбоксы ромбовидными или круглыми, независимо от того, что скажут вам специалисты по маркетингу или дизайнеры.
✓ Пример понятного чекбокса из интерфейса почты Яндекса
Для того, чтобы пользователю было понятно, какая опция сейчас включена или выбрана, отлично подойдет цветовая индикация. Поставленная галочка — это понятная метафора выбора. Рекомендуем использовать и цвет фона и галочку для отображения выбора.
2.![](/800/600/http/st4.depositphotos.com/18270392/27344/v/450/depositphotos_273447330-stock-illustration-checkbox-set-blank-checked-checkbox.jpg)
Правильно — это значит вертикально, чтобы каждый пункт был в отдельной строке.
Если вы больше любите горизонтальные списки, обратите внимание на расстояния между чекбоксами и их подписями: пользователь должен понимать, к какому чекбоксу какая подпись относится.
3. Используйте в подписях чекбоксов понятные утвердительные формулировкиПодписи к чекбоксам должны быть утвердительными и отражать действия, чтобы было понятно, что произойдет при выборе каждой опции. Избегайте отрицательных формулировок, типа “Не присылать мне рассылку” — в этом случае получается, что пользователь должен включить опцию, чтобы действие не происходило. Помните, что пользователи думают о своих целях, а не об инструментах для их исполнения.
✓ Удачный пример формулировки на сайте Ostrovok.ru
✘ Пример отрицательной формулировки в настройках Microsoft Word
4.
Не делайте размер чекбокса слишком маленькимКак известно, чем меньше элемент, тем сложнее пользователю с ним взаимодействовать. Эта проблема очень актуальна для чекбоксов. Как известно по закону Фиттса, в маленький квадрат неудобно ни целится, ни попадать. Есть несколько способов решить эту проблему. Так, можно превратить чекбокс в кнопку, метку или переключатель, сделав кликабельную область более крупной.
✓ Чекбокс маленького размера на сайте Ostrovok.ru, который превратили в кнопку
✓ Чекбокс удобного размера на сайте Аэрофлота
5.
Чекбоксы должны реагировать не только при нажатии на квадратик, но и при нажатии на их подписиТаким образом пользователю будет легче работать с большей площадью. Кроме того, это более удобно для пользователя, поскольку он привык, что можно нажать на любую часть элемента.
✓ Чекбокс небольшого размера на сайте Аэрофлота, который реагирует на нажатие подписи
6.
Используйте опции «выбрать все» и «убрать все»Чтобы облегчить работу пользователя с большим количеством чекбоксов (более 5), в интерфейсе должны быть предусмотрены опции «Выбрать все чекбоксы» и «Снять все чекбоксы». Представьте, что вам нужно выбрать, скажем, 14 пунктов из 20 в списке. Гораздо удобнее и быстрее будет сначала выбрать все, а потом снять ненужные галочки.
✓ Правильный пример использования опции “выбрать все” торрент-клиента μTorrent
7.
Чекбокс не должен запускать действие мгновенноВажно понимать, что, когда пользователь взаимодействует с чекбоксами, он не ждет мгновенной обратной связи. Действие произойдет тогда, когда пользователь нажмет какую-то кнопку: “сохранить”, “отправить”, “подписаться”. То есть чекбоксы хорошо работают в ситуациях, когда нужно сделать несколько промежуточных шагов, чтобы изменения вступили в силу.
✓ Удачный пример использования чекбокса на сайте Аэрофлота
8. У чекбоксов, которые открывают дополнительные элементы, надписи должны оканчиваться многоточием
Это необходимо, чтобы пользователь понимал, что при нажатии на чекбокс появится некое новое содержимое и от пользователя потребуются дополнительные действия.
В каком случае выбрать чекбокс, а в каком – переключатель?
Тут все просто – используйте чекбоксы для изменения настроек, а переключатели для обозначения действия.
Представьте опцию, которая подразумевает лишь два возможных варианта. Так вот чекбокс будет обозначать статус, а переключатель — какое-то конкретное действие. То есть можно спросить себя, должна ли настройка произвести какой-то мгновенный эффект и нужно ли пользователю проверить свои настройки перед сохранением.
Заключение
Как видно из нашей статьи, чекбоксы являются важными элементами управления. Пользователь фактически использует их как подпись под документом, поэтому важно сделать их внешний вид привычным и понятным, а их поведение максимально предсказуемым. Также особенностью чекбоксов является их маленький размер, так что для удобства пользователей важно дать им возможность нажимать не только на сам квадратик, но и на подписи к нему.
А у вас на сайте пользователям удобно взаимодействовать с чекбоксами? → Узнайте у наших экспертов прямо сейчас.
Список литературы:
- Закона Фиттса
- Немов Р. С. Психология. – 4-е изд. – М.: ВЛАДОС, 2003. – Кн. 1. Общие основы психологии.
что выбрать UX-дизайнеру при создании форм выбора — Дизайн на vc.ru
Перевод статьи UX-дизайнера Садии Минхас.
13 128 просмотров
Формы предоставляют несколько видов элементов управления, которые помогают пользователям взаимодействовать с продуктом. Самое сложное — правильно подобрать элементы для разных задач.
У чекбокса есть три состояния: включён, выключен и включён частично. Последнее состояние означает, что есть параметр и подпараметры, и пользователь поставил галочку напротив основного, но подпараметры включил частично.
Переключатель представляет собой физический переключатель, который позволяет включать или выключать что-то, например, фонарик.
Использование переключателя — это действие, состоящее из двух шагов: выбор опции и её включение, выключение с помощью сдвига. Чекбокс требует только выбрать опцию, а включает или выключает её обычно другой элемент управления.
При выборе между ними лучше сосредоточиться на контексте использования элемента, а не на выполняемой функции.
Ниже я привожу несколько вариантов их использования, а также рекомендации по выбору между этими двумя элементами управления при разработке форм.
Мгновенный ответ
Используйте переключатель, если:
- пользователь ждёт мгновенный ответ от выбранных настроек без конкретного действия;
- результатом сдвига переключателя будет включение, выключение или показ, скрытие чего-либо;
- пользователь хочет выполнить действие, которое не нуждается в проверке или подтверждении.
Отобразить панель «избранное»» (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)
Заключение
Важно использовать подходящие элементы управления в формах, чтобы сделать их более удобными для пользователя. Поскольку формы могут быть очень длинными, с большим количеством опций, их заполнение может стать для пользователя утомительным, если ему придётся совершать лишние действия.
Представленные рекомендации помогут вам выбрать между чекбоксом и переключателем при добавлении элементов управления в свои формы.
ЯЩИК | определение в кембриджском словаре английского языка
Переводы check box
на китайский (традиционный)
勾選框…
Подробнее
на китайском (упрощенном)
勾选框…
Узнать больше
Нужен переводчик?
Получите быстрый бесплатный перевод!
Как произносится флажок ?
Обзор
обманул
мошенник
мошенничество
проверять
флажок
Проверь карту
контрольная цифра
проверить гарантийный талон
регистрироваться
Проверьте свой словарный запас с помощью наших веселых викторин по картинкам
- {{randomImageQuizHook.
copyright1}}
- {{randomImageQuizHook.copyright2}}
Авторы изображений
Пройди тест сейчас
Слово дня
душ
Великобритания
Ваш браузер не поддерживает аудио HTML5
/ ʃaʊər /
НАС
Ваш браузер не поддерживает аудио HTML5
/ˈʃaʊ.ɚ/
вечеринка, устраиваемая женщиной непосредственно перед ее замужеством или рождением ребенка, когда ей дарят подарки для ее будущего дома или ребенка
Об этом
Блог
Это то, что есть: язык принятия
Подробнее
Новые слова
День Святого Валентина
В список 9 добавлены новые слова
0005
Наверх
Содержание
EnglishTranslations
определение в кембриджском словаре английского языка
Примеры флажков
флажков
Виртуальная реальность — это новая платформа с новыми задачами проектирования, а не просто флажок для добавления в список функций с минимальными затратами труда.
Из Арс Техника
Первый флажок читает комнату, чтобы увидеть, как организация выровнена сегодня.
Из Fast Company
Я пропустил этот конкретный флажок в одном из моих листов ответов.
От Голоса Америки
В верхней части каждой страницы бланка ответов есть цифра 9.0021 установите флажок , чтобы указать, для какого предметного теста предназначены приведенные ниже ответы.
От Голоса Америки
Нажав на него, вы увидите список всех загружаемых приложений.
От Арс Техника
Когда флажок скрыт, вы все равно можете выбрать сообщение для пакетной операции, перетащив его вправо в представлении списка, чтобы флажок временно появился.
Из Арс Техника
Затем, в 2003 году, стандартное свидетельство о смерти было пересмотрено, чтобы включить «флажок беременности », что увеличило количество смертей, которые могли быть связаны по времени с беременностью.
От Рейтер
Под этими полями со списком находится флажок , который вы можете переключить, чтобы указать, хотите ли вы, чтобы выходные данные вашей службы заменяли выбранный текстовый блок.
Из Арс Техника
Мой совет всем сдающим тест: будьте осторожны, заполняя каждую девятку.0021 флажок есть, иначе можно сильно расстроиться.
От Голоса Америки
Мы не говорим, что проблемы не имеют значения — они имеют значение, — но визуальные эффекты всегда были и всегда будут мягким скрытым течением, которое подталкивает вас к одному бюллетеню 9.0021 флажок или другой.
Из ПРОВОДНОЙ
В этих случаях в реализации присутствуют оба правила, но их отдельное приложение контролируется одним флажком .
Из Кембриджского корпуса английского языка
Когда правило применимо (т. е. левая часть правила соответствует текущей форме), соответствующий флажок включен, в противном случае он отключен.
Из Кембриджского корпуса английского языка
Некоторые обзоры поощряют непродуктивную работу над функциями, которые никому не нужны.
Из Кембриджского корпуса английского языка
Правила, которые имеют разные левые части, но идентичные правые части, объединяются в одну 9 правил.