1 1160x620 - Советы по дизайну селекторов (checkboxes, radio buttons, switches и тд.)

Выбор селекторов никогда не был приятным. Мы подробно рассмотрим дизайн различных элементов управления

Читайте также: Radio buttons, checkboxes и другие виды селекторов

Слово «тумблер» (toggle) является отсылкой к переключателю с короткой ручкой, который чередуется между двумя состояниями при каждой его активации. Вы сталкиваетесь с ним всякий раз, когда «включаете» свет.

Что касается «радиокнопок» (Radio Buttons), то это слово происходит от автомобильных радиоприемников, которые обычно, имеют набор кнопок под циферблатом. Он может механически сохранять предустановки станций, поэтому пользователь быстрее переключается между ними. Нажатие одной из этих кнопок приведет к тому, что она останется внизу, пока не будет нажата другая.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Советы по дизайну селекторов (checkboxes, radio buttons, switches и тд.)

Checkboxes (флажки) – используются, когда есть один или несколько независимых вариантов, и пользователи могут выбирать любое количество вариантов, в том числе ни одного, один или несколько.

Radio buttons (Радиокнопки) – используются, когда существует список из двух или более взаимоисключающих вариантов, и пользователи должны выбрать только один из них.

Toggle switches (Тумблеры или переключатели) – используются, когда есть два взаимоисключающих варианта и всегда имеют значение по умолчанию. Выбор переключателя вступает в силу немедленно.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Советы по дизайну селекторов (checkboxes, radio buttons, switches и тд.)

Choice chips – это компактная альтернатива радиокнопкам. Они содержат, как минимум два варианта, но пользователь может выбрать только один.

Multiselect chips – это компактная альтернатива флажкам. Позволяют пользователям выбирать несколько вариантов и в основном используются на мобильных устройствах для фильтрации.

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Советы по дизайну селекторов (checkboxes, radio buttons, switches и тд.)
Вдохновением послужила статья NNG «Checkboxes vs. Radio Buttons»

Состояния

Флажки (checkboxes) и радиокнопки (radio buttons) могут быть выбраны или не выбраны, а переключатели (toggles) могут быть включены или выключены. Все они имеют включенное, отключенное, сфокусированное и нажатое состояния и состояние наведения курсора. Знаю, кажется, что это много, но для надежного взаимодействия нужно создать все эти состояния.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Советы по дизайну селекторов (checkboxes, radio buttons, switches и тд.)

Не забывайте о неопределенном состоянии

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Советы по дизайну селекторов (checkboxes, radio buttons, switches и тд.)

Прекратите неправильно использовать переключатели

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Советы по дизайну селекторов (checkboxes, radio buttons, switches и тд.)

Когда выбор немедленно вступает в силу, используйте переключатели

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Советы по дизайну селекторов (checkboxes, radio buttons, switches и тд.)

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Советы по дизайну селекторов (checkboxes, radio buttons, switches и тд.)

Расположение вариантов в вертикальном списке поможет пользователям легко сканировать их

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Советы по дизайну селекторов (checkboxes, radio buttons, switches и тд.)

Используйте chips, если вертикальное пространство является проблемой

Вы должны не допустить ситуацию, когда трудно увидеть, какой элемент управления выбран (не забудьте добавить пустое пространство между кнопками и метками). Подумайте об использовании chips, чтобы четко визуально отделить варианты выбора.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Советы по дизайну селекторов (checkboxes, radio buttons, switches и тд.)

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Советы по дизайну селекторов (checkboxes, radio buttons, switches и тд.)

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

Если количество вариантов больше 6–7, вам следует рассмотреть возможность их включения в раскрывающийся список, поскольку пользователи в любом случае не смогут запомнить все варианты. То же самое будет применяться к предсказуемым, аналогичным или инкрементным вариантам. Например, увеличение – 10%, 20%, 30%.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Советы по дизайну селекторов (checkboxes, radio buttons, switches и тд.)

Лучше иметь выбранную радиокнопку по умолчанию

Пользователи не могут отменить выбор и установить радиокнопку обратно в исходное состояние после ее выбора. Если пользователям может потребоваться воздержаться от выбора, вы должны добавить радиокнопку «None». Структурируйте список вариантов в логическом порядке.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Советы по дизайну селекторов (checkboxes, radio buttons, switches и тд.)

Пишите понятные метки, избегайте отрицаний

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Советы по дизайну селекторов (checkboxes, radio buttons, switches и тд.)

Выделите выбранные параметры, чтобы привлечь внимание пользователей

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Советы по дизайну селекторов (checkboxes, radio buttons, switches и тд.)

Поддержка группового выбора и очистки

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Советы по дизайну селекторов (checkboxes, radio buttons, switches и тд.)

Для надежного взаимодействия сделайте кликабельные области достаточно большими

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Советы по дизайну селекторов (checkboxes, radio buttons, switches и тд.)
Свежие вакансии
                        Geoscan Geoscan Технический дизайнер Офис Санкт-Петербург 60 000 - 80 000 ₽
                        Eiter-mortgage Eiter-mortgage Директор по UXUI дизайну Офис Ереван
                        Intermedia Intermedia Intermedia Офис Санкт-Петербург
                        Perfluence Perfluence Perfluence ищет UX/UI-дизайнера Удаленно Москва От 90 000 ₽
                        Кометрика Кометрика Кометрика ищет Middle UI/UX Полная Москва, Казань, Нижний Новгород от 100 000 ₽
Все вакансии

Оригинал: uxdesign.cc

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Добавить комментарий
Похожие записи

Тренды UI/UX дизайна на 2020 год

Подборка основных трендов UI/UX дизайна, которые мы увидим в 2020 году

Паттерн нижней панели навигации на мобильных веб-сайтах, исследование

Гамбургер-меню? Есть ли лучшая альтернатива? В этой статье я попытаюсь рассмотреть эти вопросы

47 важных советов для UI и UX дизайнеров

Эта статья – список важных советов для UI / UX дизайнеров, дизайнеров взаимодействия или продуктовых дизайнеров любого уровня