UX-дизайн: чекбоксы и переключатели в формах
В процессе создания форм дизайнеру часто приходится решать, какой элемент интерфейса использовать для обозначения выбора. Конечно, у всех есть свои наработанные принципы. И тем не менее, есть несколько моментов, которые стоит учесть при подборе элемента выбора.
Интересуетесь свежими статьями по дизайну? Подписывайтесь на канал в Telegram | ВКонтакте, Instagram, Facebook
Ищите системное погружение в тему? Загляните в блог для дизайнеров.
Наиболее распространенными элементами выбора являются чекбоксы, переключатели, радиокнопки и выпадающие списки. Каждый из них при правильном использовании работает просто отлично. В этой статье мы поговорим о чекбоксах и переключателях.
Чекбоксы
Мы используем чекбоксы, когда есть список опций, из которых пользователь может выбрать любое количество: хоть ни одной, хоть одну, хоть несколько. Иными словами, каждый чекбокс существует независимо от остальных чекбоксов в списке, а выбор одной опции не снимет флажок с остальных.
Переключатели
Элемент интерфейса “переключатель” символизирует настоящий переключатель, при помощи которого можно что-то выключить или включить.
Обычно переключатели используются для обозначения действия (например, запуск или прекращение чего-то). Так, например, работает выключатель света:
Практические методы использования чекбоксов и переключателей
Используйте стандартные визуальные представления
Чекбокс должен выглядеть как небольшой квадратик, в котором (если его выбирают) появляется небольшая галочка или крестик.
Переключатель должен выглядеть, как тумблер включения/выключения.
Здорово, если момент взаимодействия будет сопровождаться понятным визуальным фидбэком. Небольшая анимация — важный штрих, который делает взаимодействие более эффективным. Это особенно важно на мобильных устройствах, где элементы управления должны казаться осязаемыми, хотя и находятся под слоем стекла.
Располагайте списки вертикально
Постарайтесь делать вертикальные списки, чтобы каждый пункт был в отдельной строке. Это справедливо как для переключателей, так и для чекбоксов. Если вы все-таки решили использовать горизонтальный лейаут, обратите внимание на расстояния между кнопками/чекбоксами и лейблами: должно быть понятно, к какой кнопке относится каждый лейбл. Ниже — пример плохой работы с расстояниями.
Текущее состояние переключателя нужно указывать не на нем, а за его пределами
При проектировании переключателей постарайтесь избежать путаницы с текущим состоянием. Для примера возьмем переключатель из iOS 6 и рассмотрим состояние ON с голубой заливкой.
Как понять, переключатель сейчас в состоянии ON или его нужно передвинуть, чтобы перевести на ON? “ON” — это состояние (прилагательное) или действие (глагол)? Не ясно.
Не нужно путать пользователей: очень важно разграничить действие и состояние. А за счет подсветки текущего состояния дизайн можно сделать еще удобнее:
Используйте в названиях полей утвердительные формулировки
Названия полей должны быть утвердительными и отражать действия, чтобы было понятно, что произойдет при выборе каждой опции. Избегайте отрицательных формулировок, типа “Не присылать мне рассылку” — в этом случае получается, что пользователь должен включить опцию, чтобы действие не происходило.
Пусть чекбокс “включается” по клику на лейбл
У всех чекбоксов есть лейблы, но не у каждого есть тег <label>. Чекбоксы маленькие, и поэтому, согласно закону Фиттса, по ним бывает сложно попасть. Расширьте целевую зону — дайте возможность нажимать не только на чекбокс, но и на лейбл (или любой другой дополнительный текст).
Используйте чекбоксы для изменения настроек; не используйте для обозначения действия
Представим себе опцию, которая подразумевает только два возможных варианта. Что использовать в этом случае: переключатель или чекбокс? Основное отличие в том, что чекбокс означает статус, а переключатель — действие. Можете представить себе реальный выключатель — какое действие он выполняет в вашей ситуации? Если картинка сложилась, можете смело использовать для этой опции переключатель.
Посмотрите на пример ниже. Понятно, что переключатель сети Wi-Fi находится в положении “on”. А вот чекбокс немного смущает. Пользователю приходится думать, включен ли Wi-Fi или поставить галочку, чтобы включить его.
Обеспечьте обратную связь от взаимодействия с переключателем/чекбоксом
Вообще, когда пользователь взаимодействует с чекбоксами (например, заполняя какую-то форму), он не ждет мгновенной обратной связи. Изменения произойдут потом, когда он нажмет “сохранить” или “отправить”.
А вот с переключателями все наоборот. Когда пользователь двигает переключатель, он ожидает немедленных изменений. Мы привыкли к этому в реальной жизни: когда щелкаешь выключателем, сразу загорается свет.
А чекбоксы отлично работают в ситуациях, когда нужно сделать несколько промежуточных шагов, чтобы изменения вступили в силу.
Заключение
Выбирая элементы интерфейса, будьте последовательны и предсказуемы. Следуйте стандартам дизайна — и вашим пользователям будет проще понять, как работает тот или иной элемент. В свою очередь, нарушение принципов дизайна делает интерфейс хрупким и непредсказуемым — словно что угодно может случиться без предупреждения.
Если вам понравилась статья и перевод, дайте нам знать — нажмите ♡
А если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Нас можно найти в Facebook: Ольга Скулкина и Ринат Шайхутдинов.
Мобильное приложение «Заметки о психике» | Mental Notes
Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.
Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.
Что такое чек бокс в документе
В документ Word иногда требуется добавить элементы формы – чекбоксы, возможность выбора из списка и т.п. Лично я не рекомендую использовать Word для интеграции с внешними системами, т.к. кроме головной боли мало что получите. Решение скорей всего будет сделано быстро, но решения, сделанные на коленке, обычно трудно в дальнейшем поддерживать и расширять.
Чекбокс – это элемент управления, который имеет 2 состояния – выбран и не выбран. Иногда его называют «крыжик» или «флажок».
Word является текстовым редактором, потому как правило файлы в Word делают для создания бумажных версий документов, например, бланков голосования, опросов и т.п. Одной из наиболее распространённой задачей является добавить чекбокс («крыжик»). Предложу 3 варианта добавления поля для галочки.
1. Только для печати – символ белого квадрата
Если «крыжик» будут ставить только на бумаге, то можно обойтись вставкой символа «Белый квадрат» (White square).
Рис.1. Вставка символа
Окно «Символ» можно вызвать из закладки «Вставка», нажав на кнопку «Символ»
Рис.2. Кнопка добавления символа в Word
2. Картинка с крыжиком
Второй способ также относится к серии «Только для печати» — добавить картинку с «крыжиком». В любом поисковике можно найти подобную картинку и вставить. Плюс такого решения – можно найти «крыжик» не только официально-протокольный, но и соответствующий стилю бланка.
3. Интерактивный чекбокс
Если подготавливаемый документ Word может быть заполнен в электронном виде, то лучше всего вставить соответствующий элемент управления в документ.
Чтобы иметь возможность вставлять в документы Word элементы управления, нужно включить панель «Разработчик». По умолчанию она скрыта. Для этого в редакторе Word зайдите в меню «Файл» / «Параметры», в открывшемся окне перейдите в меню «Настроить ленту», где установите галочку на пункте «Разработчик» (Рис.3).
Рис.3. Включение панели «Разработчик» в Word
После этого в Word появится еще одна закладка «Разработчик». Чтобы добавить чекбокс в тело документа, установите курсор в документе туда, куда требуется вставить чекбокс, перейдите в панель «Разработчик» и нажмите левой кнопкой мыши на элемент «флажок».
Рис.4. Добавление чекбокса в документ Word
Если нажать на добавленный в текст чекбокс, то он станет отмеченным, если нажать еще раз – неотмеченным.
Как сделать правильные чекбоксы на сайте – 8 наших рекомендаций
Правильные и понятные чекбоксы нужны, чтобы пользователи не совершали ошибок при взаимодействии с формами на сайте и понимали, что произойдет при нажатии на чекбокс. Другими словами, чекбокс – это аналог подписи в бумажном документе, поэтому пользователь должен хорошо понимать, где и под чем он подписывается.
Что такое чекбокс
Чекбокс (галочка, флажок, птичка) — это один из самых распространенных элементов управления, предоставляющих простой выбор из двух вариантов — вы либо согласны с чем-то, либо нет.
✓ Пример правильного чекбокса с сайта экспресс-доставки SPSR
При заполнении формы пользователь нередко сталкивается с элементами управления (контролами) для выбора каких-то вариантов (опций). Самые распространенные элементы выбора — это чекбоксы, переключатели, радиокнопки и списки. Мы начнём нашу серию статей об элементах выбора с подробного разбора чекбоксов.
Почему важно делать правильные чекбоксы?
Взаимодействие пользователя с формами ввода данных влияет на общее впечатление пользователя о сайте. Формы ввода — это например вход на сайт при помощи ввода логина и пароля, заполнение платежных данных или анкеты, введение адреса для доставки и прочее.
Несмотря на то, что чекбоксы считаются самыми простыми и понятными элементами управления, они нередко являются источниками ошибок при работе пользователей с вашими продуктами.
Когда используются чекбоксы?
Основная функция чекбокса — информировать,что у пользователя есть выбор. И он может либо согласиться, поставив галочку, либо отказаться.
Дополнительная функция чекбоксов – это обозначение какой-то группы из элементов для дальнейших групповых действий с ними. Мы используем чекбоксы, когда существует несколько опций, из которых пользователь может выбрать либо все, либо несколько, либо одну или ни одной. Каждый чекбокс существует независимо от остальных в списке.
Самый простой пример группы чекбоксов – это список писем в почте и возможность групповых операций с ними.
✓ Пример чекбокса в интерфейсе Gmail
Советы, как правильно использовать чекбокс
1. Не перемудрите и используйте стандартный вид чекбокса
Традиционно чекбоксы имеют квадратную форму. Пользователи распознают визуальные объекты по форме и стандартная квадратная форма чекбокса – это очень важно. Это связано с тем, что мы воспринимаем то, что ожидаем и ‘эта особенность описана у нас в Золотом правиле №4. Визуальная ясность. То есть пользователь должен легко распознавать элементы управления по их внешнему виду.
Чекбокс должен выглядеть как небольшой квадратик, в котором в случае выбора появляется небольшая галочка. Не стоит делать чекбоксы ромбовидными или круглыми, независимо от того, что скажут вам специалисты по маркетингу или дизайнеры.
✓ Пример понятного чекбокса из интерфейса почты Яндекса
Для того, чтобы пользователю было понятно, какая опция сейчас включена или выбрана, отлично подойдет цветовая индикация. Поставленная галочка — это понятная метафора выбора. Рекомендуем использовать и цвет фона и галочку для отображения выбора.
2. Правильно располагайте списки чекбоксов
Правильно — это значит вертикально, чтобы каждый пункт был в отдельной строке.
Если вы больше любите горизонтальные списки, обратите внимание на расстояния между чекбоксами и их подписями: пользователь должен понимать, к какому чекбоксу какая подпись относится.
3. Используйте в подписях чекбоксов понятные утвердительные формулировки
Подписи к чекбоксам должны быть утвердительными и отражать действия, чтобы было понятно, что произойдет при выборе каждой опции. Избегайте отрицательных формулировок, типа “Не присылать мне рассылку” — в этом случае получается, что пользователь должен включить опцию, чтобы действие не происходило. Помните, что пользователи думают о своих целях, а не об инструментах для их исполнения.
✓ Удачный пример формулировки на сайте Ostrovok.ru
✘ Пример отрицательной формулировки в настройках Microsoft Word
4. Не делайте размер чекбокса слишком маленьким
Как известно, чем меньше элемент, тем сложнее пользователю с ним взаимодействовать. Эта проблема очень актуальна для чекбоксов. Как известно по закону Фиттса , в маленький квадрат неудобно ни целится, ни попадать. Есть несколько способов решить эту проблему. Так, можно превратить чекбокс в кнопку, метку или переключатель, сделав кликабельную область более крупной.
✓ Чекбокс маленького размера на сайте Ostrovok.ru, который превратили в кнопку
✓ Чекбокс удобного размера на сайте Аэрофлота
5. Чекбоксы должны реагировать не только при нажатии на квадратик, но и при нажатии на их подписи
Таким образом пользователю будет легче работать с большей площадью. Кроме того, это более удобно для пользователя, поскольку он привык, что можно нажать на любую часть элемента.
✓ Чекбокс небольшого размера на сайте Аэрофлота, который реагирует на нажатие подписи
6. Используйте опции «выбрать все» и «убрать все»
Чтобы облегчить работу пользователя с большим количеством чекбоксов (более 5), в интерфейсе должны быть предусмотрены опции «Выбрать все чекбоксы» и «Снять все чекбоксы». Представьте, что вам нужно выбрать, скажем, 14 пунктов из 20 в списке. Гораздо удобнее и быстрее будет сначала выбрать все, а потом снять ненужные галочки.
✓ Правильный пример использования опции “выбрать все” торрент-клиента μTorrent
7. Чекбокс не должен запускать действие мгновенно
Важно понимать, что, когда пользователь взаимодействует с чекбоксами, он не ждет мгновенной обратной связи. Действие произойдет тогда, когда пользователь нажмет какую-то кнопку: “сохранить”, “отправить”, “подписаться”. То есть чекбоксы хорошо работают в ситуациях, когда нужно сделать несколько промежуточных шагов, чтобы изменения вступили в силу.
✓ Удачный пример использования чекбокса на сайте Аэрофлота
8. У чекбоксов, которые открывают дополнительные элементы, надписи должны оканчиваться многоточием
Это необходимо, чтобы пользователь понимал, что при нажатии на чекбокс появится некое новое содержимое и от пользователя потребуются дополнительные действия.
В каком случае выбрать чекбокс, а в каком – переключатель?
Тут все просто – используйте чекбоксы для изменения настроек, а переключатели для обозначения действия.
Представьте опцию, которая подразумевает лишь два возможных варианта. Так вот чекбокс будет обозначать статус, а переключатель — какое-то конкретное действие. То есть можно спросить себя, должна ли настройка произвести какой-то мгновенный эффект и нужно ли пользователю проверить свои настройки перед сохранением.
Заключение
Как видно из нашей статьи, чекбоксы являются важными элементами управления. Пользователь фактически использует их как подпись под документом, поэтому важно сделать их внешний вид привычным и понятным, а их поведение максимально предсказуемым. Также особенностью чекбоксов является их маленький размер, так что для удобства пользователей важно дать им возможность нажимать не только на сам квадратик, но и на подписи к нему.
А у вас на сайте пользователям удобно взаимодействовать с чекбоксами? → Узнайте у наших экспертов прямо сейчас.
Список литературы :
Материалы по теме
Больше свежих новостей в нашем Telegram-канале . Подписывайтесь!