Так в чем же разница между ComboBox, MultiSelect, ListBox и Dropdown? Хотя все эти компоненты пользовательского интерфейса могут выглядеть одинаково, они служат разным целям. Выбор часто сводится к Количество доступных опций И их видимость.
Давайте посмотрим, чем они отличаются, какой цели они служатИ как выбрать правильный – избежав на этом пути недоразумений и ложных ожиданий.
Не все шаблоны списков одинаковы
Все выделенные выше компоненты пользовательского интерфейса имеют одну общую черту: они поддерживают взаимодействие пользователей со списками. Однако делают они это немного по-другому.
Давайте рассмотрим каждый по отдельности:
- падать → Список остается скрытым до тех пор, пока не будет активирован.
- поле со списком → Введите + 1 для фильтрации и выберите опцию.
- множественный выбор → Введите + выберите несколько параметров для фильтрации.
- окно списка → Все параметры списка отображаются по умолчанию (+прокрутка).
- двойной список → Перемещать элементы между двумя списками.
Другими словами, поле со списком Сочетает поле ввода текста с раскрывающимся списком, чтобы пользователи могли Введите фильтр И выберите вариант. с множественный выборПользователи могут выбирать из нескольких вариантов (часто отображаемых в виде таблеток или чипсов).
списки Отображать Все параметры списка видны По умолчанию с частой прокруткой. Это полезно, когда пользователям нужно быстро просмотреть все доступные параметры. двойной список (также называемый список трансферов) — это форма списка, позволяющая пользователям Переместить элемент между двумя списками (слева ↔ справа), обычно для массового выбора.
Никогда не скрывайте часто используемые параметры
Как упоминалось выше, выбор правильного компонента пользовательского интерфейса зависит от 2 фактора: сколько вариантов списка доступно и все ли эти параметры должны быть видимыми по умолчанию. Все списки также могут иметь древовидную структуру, вложенность и групповой выбор.
Существует принцип, которому я следую уже много лет для любого компонента пользовательского интерфейса: Никогда не скрывайте часто используемые параметры. Если пользователи часто полагаются на определенный выбор, нет смысла скрывать его от них.
мы могли бы либо сделать это предварительно выбранныйИли (если часто используемых вариантов всего 2-3) покажите их как фишки или пуговицыА затем покажите остальную часть списка по взаимодействию. В общем, всегда полезно отображать популярные параметры, даже если это загромождает пользовательский интерфейс.
Как выбрать какой?
Не каждый список требует сложного метода отбора. для списков с менее 5 предметовПростые переключатели или флажки обычно работают лучше всего. Но если пользователям необходимо выбирать среди большой список Среди опций (например, более 200 позиций) ComboBox + MultiSelect полезны за счет быстрой фильтрации (например, выбора страны).
списки Они полезны, когда людям нужен доступ несколько вариантов одновременноОсобенно, если им тоже нужно выбрать несколько вариантов из этого списка. Они могут быть полезны для часто используемых фильтров.
двойной список Часто упускают из виду и игнорируют. Но это может быть очень полезно для сложных задач, таких как массовый отбор или распределение ролей, задач, обязанностей. Это единственный компонент пользовательского интерфейса, который позволяет пользователям просматривать список источников, а также полный список выбора перед фиксацией (также известный как «Список трансферов»).
Фактически, двойной список часто оказывается быстрее, точнее и доступнее, чем перетаскивание.
соображения удобства использования
Важно помнить, что необходимо поддерживать все типы списков. навигация с помощью клавиатуры (Например, клавиши со стрелками ↑/↓) для доступа. Некоторые люди почти всегда полагаются на клавиатуру для выбора параметров, когда начинают печатать.
Помимо этого:
- для списков с 7+ вариантовРассмотрите возможность добавления функций «Выбрать все» и «Очистить все», чтобы упростить взаимодействие с пользователем.
- Для длинных списков со списком: выделить все варианты Для пользователей по клику/нажатию, иначе их бы никогда не увидели,
- Самое главное, Не отображайте неинтерактивные элементы в виде кнопок. И не отображайте интерактивные элементы как статические метки, чтобы избежать путаницы.
Закрытие: не все является раскрывающимся списком
Имена имеют значение. А вертикальный список опций Обычно это называют «выпадающим списком», но часто это слишком общий смысл, чтобы иметь смысл. “падать” Указывает, что список скрыт по умолчанию. “множественный выбор” Подразумевает множественный выбор (флажки) внутри списка. “поле со списком” Означает ввод текста. А «список» — это просто список выбираемых элементов, видимый в любое время.
Цель состоит не в том, чтобы просто соответствовать приведенным выше определениям. скорее, чтобы согласовать намерения – Говорите на одном языке при принятии решений, проектировании, создании и последующем использовании этих компонентов пользовательского интерфейса.
это должно работать для всех — дизайнеры, инженеры и конечные пользователи — при условии, что статические метки не выглядят как интерактивные кнопки, а переключатели не работают как флажки.
Встречайте «Шаблоны проектирования для AI-интерфейсов»
встретиться Шаблоны проектирования для AI-интерфейсовВиталий новый видеокурс Скоро появится живое обучение UX — с практическими примерами из реальных продуктов. Посетите бесплатный предварительный просмотр.
полезные ресурсы
- Автозаполнение: Рекомендации по UX, Виталий Фридман
- Combobox от eBay 👍
- ComboBox от Elastic
- Combobox от Алисы
- ComboBox от MongoDB 👍
- ComboBox от Visa 👍
- ComboBox от Watson (DocPlanner)
- ComboBox, через Викимедиа
- ComboBox от Zendesk
- MultiSelect (Документация по дизайну Combobox MongoDB), автор MongoDB 👍
- Поиск с множественным выбором от Wikimedia
- Поле со списком с множественным выбором от Vaadin
- Множественный выбор от Visa
- Перенос (пример списка), автор Ant Design
- Список от Хоппера
- Список от vaadin
- Список, от Visa
- Селектор двойного списка (Patternfly) от Red Hat
- Двойной список от Salesforce (система Lightning Design)
- Список трансферов, по ведению
- Двойной список от Dashlight
- Бейджи vs Таблетки vs Чипы vs Бирки Виталий Фридман
- Список против выпадающих списков (NN/G) от Анны Келли
(ок)
