Так в чем же разница между полем со списком, множественным выбором, списком и раскрывающимся списком? Хотя все эти компоненты пользовательского интерфейса могут показаться похожими, они служат разным целям. Выбор часто сводится к количеству доступных опций и их видимости. Давайте разберемся, чем они отличаются, какой цели служат и как выбрать правильный, избегая при этом недоразумений и неверных ожиданий.
Не все шаблоны списков одинаковы У всех выделенных выше компонентов пользовательского интерфейса есть одна общая черта: они поддерживают взаимодействие пользователей со списками. Однако делают они это немного по-другому. Давайте рассмотрим каждый по отдельности:
Раскрывающийся список → список скрыт до тех пор, пока он не будет активирован. Поле со списком → введите фильтр + выберите 1 вариант. Множественный выбор → введите для фильтрации + выберите множество параметров. Список → все параметры списка отображаются по умолчанию (+ прокрутка). Двойной список → перемещать элементы между двумя списками.
Другими словами, Combobox объединяет поле ввода текста с раскрывающимся списком, поэтому пользователи могут вводить текст для фильтрации и выбирать один вариант. С помощью Multiselect пользователи могут выбирать множество вариантов (часто отображаемых в виде таблеток или чипсов). В списках отображаются все параметры списка, видимые по умолчанию, часто с прокруткой. Это полезно, когда пользователям нужно сразу увидеть все доступные варианты. Двойной список (также называемый списком переноса) — это вариант списка, который позволяет пользователям перемещать элементы между двумя списками (слева ↔ справа), обычно для массового выбора. Никогда не скрывайте часто используемые параметры Как упоминалось выше, выбор правильного компонента пользовательского интерфейса зависит от двух факторов: сколько вариантов списка доступно и должны ли все эти параметры быть видимыми по умолчанию. Все списки также могут иметь древовидную структуру, вложенность и выбор групп.
Есть один принцип, которому я следую уже много лет в отношении любого компонента пользовательского интерфейса: никогда не скрывайте часто используемые параметры. Если пользователи часто полагаются на определенный выбор, скрывать его от них очень мало смысла. Мы могли бы либо сделать их заранее выбранными, либо (если часто используемых вариантов всего 2–3) показывать их в виде фишек или кнопок, а затем показывать остальную часть списка при взаимодействии. В общем, всегда полезно отображать популярные параметры, даже если это может загромождать пользовательский интерфейс. Как выбрать какой? Не каждый список нуждается в сложном методе отбора. Для списков, содержащих менее 5 элементов, обычно лучше всего работают простые переключатели или флажки. Но если пользователям необходимо выбрать из большого списка опций (например, более 200 элементов), поле со списком + множественный выбор полезны из-за более быстрой фильтрации (например, выбора страны).
Списки полезны, когда людям нужно получить доступ к множеству опций одновременно, особенно если им также нужно выбрать много опций из этого списка. Они могут быть полезны для часто используемых фильтров.
Двойной список часто игнорируется. Но это может быть очень полезно для сложных задач, например, массового выбора или распределения ролей, задач и обязанностей. Это единственный компонент пользовательского интерфейса, который позволяет пользователям просматривать свой полный список выбора рядом со списком источников перед фиксацией (также называемый «списком переноса»). Фактически, двойной список часто оказывается быстрее, точнее и доступнее, чем перетаскивание. Вопросы удобства использования Важно помнить, что все типы списков должны поддерживать навигацию с помощью клавиатуры (например, клавиши со стрелками ↑/↓) для обеспечения доступности. Некоторые люди почти всегда полагаются на клавиатуру для выбора параметров, когда начинают печатать.
Помимо этого:
Для списков с более чем 7 параметрами рассмотрите возможность добавления функций «Выбрать все» и «Очистить все», чтобы упростить взаимодействие с пользователем. Для длинных списков с полем со списком предоставляйте пользователям все параметры по щелчку/нажатию, так как в противном случае они могут быть никогда не видны. Самое главное: не отображайте неинтерактивные элементы в виде кнопок, чтобы избежать путаницы, и не отображайте интерактивные элементы в виде статических меток.
Подведение итогов: не все — это раскрывающийся список Имена имеют значение. Вертикальный список опций обычно описывается как «выпадающий список», но зачастую он слишком общий, чтобы иметь смысл. «Выпадающий список» намекает, что по умолчанию список скрыт. «Множественный выбор» подразумевает множественный выбор (флажок) внутри списка. «Комбобокс» подразумевает ввод текста. А «Listbox» — это просто список выбираемых элементов, видимый в любое время. Цель состоит не в том, чтобы просто соответствовать приведенным выше определениям. Но скорее для согласования намерений — говорите на одном языке при принятии решений, проектировании, создании и последующем использовании этих компонентов пользовательского интерфейса. Это должно работать длявсем — дизайнерам, инженерам и конечным пользователям — при условии, что статические метки не выглядят как интерактивные кнопки, а переключатели не действуют как флажки. Встречайте «Шаблоны проектирования для интерфейсов искусственного интеллекта» Встречайте «Шаблоны проектирования для интерфейсов искусственного интеллекта» — новый видеокурс Виталия с практическими примерами из реальных продуктов. Скоро состоится живое обучение UX. Перейти к бесплатному предварительному просмотру. Знакомьтесь: Design Patterns For AI Interfaces, видеокурс Виталия по дизайну интерфейсов и UX.
Обучение «Видео + UX» Только видеоВидео и обучение UX 450,00 $ 799,00 $
Получите видео + UX-обучение. 30 видеоуроков (10 часов) + живое UX-обучение. 100-дневная гарантия возврата денег. Только видео$ 275,00$ 395,00
Получите видеокурс: 30 видеоуроков (10 часов). Обновляется ежегодно. Также доступен в виде UX-пакета с 3 видеокурсами.
Полезные ресурсы
Автозаполнение: Рекомендации по UX, Виталий Фридман Combobox от eBay 👍 Combobox от Elastic Combobox от Элизы Combobox от MongoDB 👍 Combobox от Visa 👍 Combobox от Watson (Docplanner) Combobox, Викимедиа Комбобокс от Zendesk Multiselect (Документация по дизайну Combobox MongoDB), автор MongoDB 👍 Поиск с множественным выбором, Wikimedia Поле со списком с множественным выбором, автор: Vaadin Мультиселект от Visa Перенос (пример списка), автор Ant Design Список, автор Хоппер Список, автор Vaadin Список, от Visa Селектор двойного списка от Red Hat (PatternFly) Двойной список от Salesforce (система Lightning Design) Список трансферов, автор: Мантин Двойной список от Dashlite Бейджи против таблеток против чипов против меток, Виталий Фридман Списки против раскрывающихся списков, Анна Кейли (NN/g)
