UX-дизайн: чекбоксы и переключатели в формах
(Мы продолжаем переводить цикл статей по UX/UI. Полную подборку можно найти в коллекции «Настройки»)
Вы читаете перевод статьи Николая Бабича “UX Design: Checkbox and Toggle in Forms”. Над переводом работали Ольга Скулкина и Ринат Шайхутдинов. При поддержке iSpring.
iSpring — решение для запуска дистанционного обучения.
В процессе создания форм дизайнеру часто приходится решать, какой элемент интерфейса использовать для обозначения выбора. Конечно, у всех есть свои наработанные принципы. И тем не менее, есть несколько моментов, которые стоит учесть при подборе элемента выбора.
Ищите системное погружение в тему? Загляните в блог для дизайнеров.
Наиболее распространенными элементами выбора являются чекбоксы, переключатели, радиокнопки и выпадающие списки. Каждый из них при правильном использовании работает просто отлично. В этой статье мы поговорим о чекбоксах и переключателях.
Чекбоксы
Мы используем чекбоксы, когда есть список опций, из которых пользователь может выбрать любое количество: хоть ни одной, хоть одну, хоть несколько. Иными словами, каждый чекбокс существует независимо от остальных чекбоксов в списке, а выбор одной опции не снимет флажок с остальных.
Переключатели
Элемент интерфейса “переключатель” символизирует настоящий переключатель, при помощи которого можно что-то выключить или включить.
Обычно переключатели используются для обозначения действия (например, запуск или прекращение чего-то). Так, например, работает выключатель света:
Практические методы использования чекбоксов и переключателей
Используйте стандартные визуальные представления
Чекбокс должен выглядеть как небольшой квадратик, в котором (если его выбирают) появляется небольшая галочка или крестик.
Переключатель должен выглядеть, как тумблер включения/выключения.
Здорово, если момент взаимодействия будет сопровождаться понятным визуальным фидбэком. Небольшая анимация — важный штрих, который делает взаимодействие более эффективным. Это особенно важно на мобильных устройствах, где элементы управления должны казаться осязаемыми, хотя и находятся под слоем стекла.
Располагайте списки вертикально
Постарайтесь делать вертикальные списки, чтобы каждый пункт был в отдельной строке. Это справедливо как для переключателей, так и для чекбоксов. Если вы все-таки решили использовать горизонтальный лейаут, обратите внимание на расстояния между кнопками/чекбоксами и лейблами: должно быть понятно, к какой кнопке относится каждый лейбл. Ниже — пример плохой работы с расстояниями.
Текущее состояние переключателя нужно указывать не на нем, а за его пределами
При проектировании переключателей постарайтесь избежать путаницы с текущим состоянием. Для примера возьмем переключатель из iOS 6 и рассмотрим состояние ON с голубой заливкой.
Как понять, переключатель сейчас в состоянии ON или его нужно передвинуть, чтобы перевести на ON? “ON” — это состояние (прилагательное) или действие (глагол)? Не ясно.
Не нужно путать пользователей: очень важно разграничить действие и состояние. А за счет подсветки текущего состояния дизайн можно сделать еще удобнее:
Используйте в названиях полей утвердительные формулировки
Названия полей должны быть утвердительными и отражать действия, чтобы было понятно, что произойдет при выборе каждой опции. Избегайте отрицательных формулировок, типа “Не присылать мне рассылку” — в этом случае получается, что пользователь должен включить опцию, чтобы действие не происходило.
Пусть чекбокс “включается” по клику на лейбл
У всех чекбоксов есть лейблы, но не у каждого есть тег <label>. Чекбоксы маленькие, и поэтому, согласно закону Фиттса, по ним бывает сложно попасть. Расширьте целевую зону — дайте возможность нажимать не только на чекбокс, но и на лейбл (или любой другой дополнительный текст).
Используйте чекбоксы для изменения настроек; не используйте для обозначения действия
Представим себе опцию, которая подразумевает только два возможных варианта. Что использовать в этом случае: переключатель или чекбокс? Основное отличие в том, что чекбокс означает статус, а переключатель — действие. Можете представить себе реальный выключатель — какое действие он выполняет в вашей ситуации? Если картинка сложилась, можете смело использовать для этой опции переключатель.
Посмотрите на пример ниже. Понятно, что переключатель сети Wi-Fi находится в положении “on”. А вот чекбокс немного смущает. Пользователю приходится думать, включен ли Wi-Fi или поставить галочку, чтобы включить его.
Обеспечьте обратную связь от взаимодействия с переключателем/чекбоксом
Вообще, когда пользователь взаимодействует с чекбоксами (например, заполняя какую-то форму), он не ждет мгновенной обратной связи. Изменения произойдут потом, когда он нажмет “сохранить” или “отправить”.
А вот с переключателями все наоборот. Когда пользователь двигает переключатель, он ожидает немедленных изменений. Мы привыкли к этому в реальной жизни: когда щелкаешь выключателем, сразу загорается свет.
А чекбоксы отлично работают в ситуациях, когда нужно сделать несколько промежуточных шагов, чтобы изменения вступили в силу.
Заключение
Выбирая элементы интерфейса, будьте последовательны и предсказуемы. Следуйте стандартам дизайна — и вашим пользователям будет проще понять, как работает тот или иной элемент. В свою очередь, нарушение принципов дизайна делает интерфейс хрупким и непредсказуемым — словно что угодно может случиться без предупреждения.
Спасибо!
Подписывайтесь на UX Planet: Twitter | Facebook
Впервые опубликовано на babich.biz
Если вам понравилась статья и перевод, дайте нам знать — нажмите ♡
А если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Нас можно найти в Facebook: Ольга Скулкина и Ринат Шайхутдинов.
Мобильное приложение «Заметки о психике» | Mental Notes
Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.
Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.
Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн
Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!
Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!
