Чекбоксы или радиокнопки?
Это перевод оригинальной статьи NNGroup. Checkbox или Radio Button? Как правильно их выбрать для удобства пользователей? Думаю, что тема достаточно актуальна и полезна как для начинающих дизайнеров, так и для более опытных специалистов в сфере UX. Ведь всем известно, что чекбоксы помогают пользователю выбрать несколько опций сразу, тогда как радиокнопки подходят для одного варианта из группы. В данной статье рассмотрено двенадцать вопросов удобства использования этих распростаненных интерфейсных элементов. Больше интересного контента на моем канале, подписывайтесь, буду очень рад)
Описание: Руководство по интерфейсу пользователя, помогающее понять, когда использовать флажки (чекбоксы), а когда – радиокнопки. В статье рассмотрены двенадцать вопросов удобства использования этих элементов интерфейса.
Недавно на странице регистрации одного крупного сайта я увидел следующий текст. В нём было, как минимум, две ошибки в дизайне. Попробуйте найти их до прочтения дальше.
«Будьте в курсе! Получайте обновления о рекомендуемых продуктах, решениях, услугах и образовательных возможностях. Позвольте Foobar Corp. и выбранным организациям предоставить вам информацию о других предложениях.»
Можем ли мы отправлять вам обновления по электронной почте?
• Да, пожалуйста, используйте электронную почту для отправки информации о других предложениях.
Если вы предпочитаете, мы не будем использовать ваши данные для этой цели.
• Пожалуйста, не используйте контактные данные, указанные здесь, для отправки информации о других предложениях.
Ошибка №1 и является основной темой этой статьи: неверное использование чекбоксов, где должны быть радиокнопки. Поскольку вышеуказанные варианты исключают друг друга, на странице должны быть радиокнопки, чтобы пользователь мог выбрать только один вариант.
Ошибка №2 — представление двух вопросов вместо одного, и их размещение в большом и громоздком блоке текста. Вместо этого было бы лучше использовать одну короткую фразу, например: «Да, отправьте мне информацию о других продуктах, решениях, услугах и образовательных возможностях».
Иронично, но при использовании одного вопроса чекбокс был бы уместен, так как пользователь просто отвечал бы «да» или «нет». По результатам пользовательского тестирования сайтов электронной коммерции, рекомендуется оставлять чекбокс пустым по умолчанию, чтобы пользователь сам решал, поставить ли галочку для получения дополнительной информации.
В статье:
- Когда использовать какие виджеты
- Дополнительные рекомендации
- Почему эти рекомендации важны
Когда какие виджеты использовать
С момента первого издания Inside Macintosh в 1984 году правило остается неизменным: чекбоксы и радиокнопки имеют четко определенные области применения. Все стандарты графических интерфейсов и официальные веб-стандарты W3C также поддерживают это разграничение:
- Радиокнопки используются, когда есть два или более взаимоисключающих варианта, и пользователю необходимо выбрать только один. При нажатии на одну радиокнопку все ранее выбранные радиокнопки в этом списке автоматически снимаются.
- Чекбоксы применяются для выбора из множества опций, и пользователь может выбрать любое количество вариантов — от нуля до всех. Каждый чекбокс работает независимо от других в списке, и выбор одного чекбокса не влияет на выбор других.
- Одиночный чекбокс используется для одного варианта, который пользователь может либо включить, либо отключить.
Просто, не так ли? Тем не менее, ошибочное использование радиокнопок и чекбоксов на страницах интернета встречается повсеместно даже спустя десятилетия.
Дополнительные рекомендации
- Используйте стандартные визуальные формы. Чекбокс должен быть маленьким квадратом с галочкой или крестиком внутри при выборе. Радиокнопка — маленьким кругом с заполненным кружком внутри, если она выбрана.
- Группируйте выборы визуально и отделяйте группы опций друг от друга. Пример выше нарушает это правило: из-за оформления два чекбокса кажутся связанными с разными темами, хотя они представляют альтернативные варианты для одного вопроса.
- Разделяйте длинные списки чекбоксов на логические группы с подзаголовками. Это облегчает сканирование и понимание вариантов. С радиокнопками такой подход недопустим: они должны выглядеть как единый список без подзаголовков.
- Располагаете списки вертикально, по одному варианту на строку. Если требуется горизонтальное расположение, размещайте кнопки и ярлыки так, чтобы связь между ними была очевидной. Например, при горизонтальной разметке «Один Два Три Четыре Пять» трудно понять, какая радиокнопка соответствует какой метке.
- Используйте позитивные и активные формулировки для меток чекбоксов. Например, избегайте формулировок типа «Не отправляйте мне больше писем». В этом случае, чтобы что-то не происходило, пользователю нужно поставить галочку, что вызывает путаницу.
- Пишите метки чекбоксов так, чтобы было понятно, что произойдет и в случае выбора, и в случае отказа. Если это сложно сделать, лучше использовать радиокнопки с четкими метками, описывающими каждый вариант (включено/выключено).
- При возможности используйте радиокнопки вместо выпадающих списков. Они снижают когнитивную нагрузку, так как делают все варианты видимыми и облегчают их сравнение. Радиокнопками легче управлять пользователям с ограниченной подвижностью мыши. Если место ограничено, это правило может быть нарушено, но старайтесь по возможности сохранять варианты видимыми.
- Обязательно предлагайте вариант по умолчанию для списка радиокнопок. Радиокнопки всегда должны иметь один выбранный вариант, и не должно быть возможности оставить их все пустыми. Если пользователю может понадобиться воздержаться от выбора, добавьте вариант «Нет» или другой нейтральный вариант.
- Если выбор обязателен, убедитесь, что варианты охватывают все возможные ответы и ясно различимы. Например, на некоторых формах для пожилых людей не было опции «на пенсии», и они не могли заполнить поле с выбором профессии. Если невозможно охватить все варианты, добавьте опцию «Другое» с возможностью ввода текста.
Позволяйте пользователям выбирать варианты, кликая как по кнопке/чекбоксу, так и по метке: больший клик-зон облегчает выбор, что подтверждается Законом Фиттса, согласно которому крупные мишени проще для нажатия. В HTML формах это легко реализовать, используя теги . Например, в примере с горизонтальными радиокнопками пользователи могут выбрать опцию, нажав на текст "Четыре". При тестировании веб-приложений на Flash выяснилось, что расширенные на несколько пикселей зоны клика помогают снизить ошибки пользователей. Это сложно реализовать в HTML, но некоторые CSS трюки могут помочь.
- Используйте чекбоксы и радиокнопки только для изменения настроек, а не для запуска действий. Также изменения должны вступать в силу только после нажатия командной кнопки (например, "OK" или "Перейти к XXX", где "XXX" — следующий этап процесса).
- При возврате пользователя на предыдущую страницу (например, при использовании кнопки "Назад") все изменения, сделанные в чекбоксах или радиокнопках, должны сбрасываться, и должны восстанавливаться исходные настройки. Этот же принцип применим к кнопке "Отмена".
- При последовательном использовании кнопок "Назад" и "Вперед" такая последовательность должна работать как "Отмена-Повтор", отображая прежние изменения так, как если бы пользователь не нажимал "Назад". Однако изменения должны сохраняться только после нажатия "OK" или аналогичной команды.
Почему эти рекомендации важны
Здесь не придирки: важно придерживаться стандартов интерфейса пользователя для повышения удобства использования.
- Предсказуемость управления. Правильное использование дизайна облегчает понимание того, что делает элемент и как с ним работать. Когда пользователи видят чекбоксы, они знают, что можно выбрать несколько опций, а когда радиокнопки — только одну. Хотя не все знают эти правила, большинство пользователей уже привыкли к таким интерфейсам с 1984 года.
- Чувство уверенности и контроля. Правильное использование стандартных элементов управления усиливает чувство мастерства, что повышает уверенность при работе с интерфейсом. В противном случае пользовательский интерфейс кажется непредсказуемым. Например, если после выбора радиокнопки сайт сразу переводит вас на следующую страницу, это может вызвать тревогу и неуверенность в дальнейших действиях на других страницах формы.
- Избегайте двусмысленных меток. Основные проблемы с удобством использования чекбоксов и радиокнопок возникают из-за нечётких меток, которые могут сбивать с толку. Сопроводительная информация (хелп) может частично решить проблему, но тестирование меток с реальными пользователями остаётся лучшим вариантом. К счастью, чекбоксы и радиокнопки легко тестируются с помощью прототипов на бумаге, так что можно проверить восприятие меток до реализации в коде.
- Репутация профессионала. Различие между чекбоксами и радиокнопками — один из первых принципов, преподаваемых на курсах дизайна интерфейсов. Используя неправильный элемент управления, вы рискуете быть воспринятым как новичок.
Спасибо, что дочитали до конца! Подписывайтеcm на наш ТГ канал, там регулярно постится контент про дизайн и не только.