Дизайн выпадающего списка: когда нужны поиск и радиокнопки

Выпадающий список полезен, когда нужно выбрать значение, но не требуется одновременно сравнивать все варианты. Для небольшого набора знакомых значений подойдёт обычный список выбора. Если нужный вариант трудно найти, используйте комбинированное поле с поиском. Если важны различия между вариантами, оставьте их на виду в виде радиокнопок. Меню команд «Дублировать» или «Удалить» решает другую задачу: оно выполняет действие, а не сохраняет выбранное значение в форме.

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

Обычный список, радиокнопки или поле с поиском?

Сначала запишите, что человеку необходимо понять до выбора. В форме заказа оборудования способ доставки определяет, когда и куда привезут заказ. Регион — знакомая категория. А в списке офисов может быть много похожих названий. Эти три решения не обязательно оформлять одним компонентом.

Что нужно выбрать	С чего начать	Что это даёт
Доставку в офис, на дом или самовывоз	Радиокнопки с короткими пояснениями	Можно сравнить условия, не открывая список.
Один из регионов организации	Обычный выпадающий список	Поле занимает мало места и показывает выбранное значение.
Конкретный офис в большом справочнике	Комбинированное поле с поиском	Ввод сокращает список и избавляет от долгого просмотра.
Дублирование или отмену сохранённой заявки	Меню действий	Элемент выполняет команду, а не собирает значение поля.

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

Паттерн группы радиокнопок WAI-ARIA описывает выбор, при котором одновременно отмечен не более чем один вариант. Он подходит для способа доставки: альтернативы здесь стоит оставлять на виду. Не скрывайте существенную разницу в стоимости или сроках только ради экономии места по вертикали.

Отделяйте название поля от выбранного значения

«Регион» — название поля. «Северный регион» — возможное значение. «Выберите регион» — инструкция до выбора. Если эти роли разделены, поле остаётся понятным и после заполнения, и при повторной проверке формы.

Не используйте текст-подсказку внутри поля как единственную подпись: после выбора он исчезает. Само название «Риверсайд» не объясняет, идёт ли речь об офисе, пункте выдачи или месте регистрации учётной записи.

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

Формулируйте варианты единообразно. «Доставка в офис», «Доставка на дом» и «Самовывоз» понятнее, чем сочетание действия, названия места и расплывчатого прилагательного. Если у двух офисов одинаковое название, добавьте в каждый вариант отличающее их местоположение. Короткая вторая строка полезнее, чем иконка, по которой нужно угадывать разницу.

Добавляйте поиск, когда он действительно упрощает выбор

Поле поиска требует собственных решений: что можно вводить, по каким данным искать, как упорядочивать результаты и допускается ли произвольный текст. В нашей форме поле офиса принимает только значение из справочника. Ввод «Ривер» сокращает список, но не создаёт новый адрес доставки.

Паттерн combobox в WAI-ARIA различает редактируемые элементы, элементы только для выбора и несколько вариантов автодополнения. Выберите поведение осознанно. Одна стрелка вниз не объясняет, можно ли вводить текст или нужно выбрать пункт из фиксированного списка.

В этом примере поиск должен учитывать названия офисов и города, показанные рядом с ними. Результат должен соответствовать видимому тексту: если офис подписан «Риверсайд — Бристоль», поиск по слову «Бристоль» должен давать понятный результат. Отдельно решите, поддерживаются ли альтернативные названия и сокращения, а не предполагайте, что любое сокращение автоматически сработает.

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

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

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

Закрытое поле региона должно продолжать показывать выбранный регион. Кнопка «Действия», напротив, открывает команды для уже существующей заявки. У этих элементов может быть похожее оформление, но это не делает их взаимодействие одинаковым.

Например, выбор «Северный регион» устанавливает значение поля. Команда «Отменить заявку» из меню запускает сценарий с последствиями. Не помещайте её в конец списка местоположений, где человек может принять её за ещё один безопасный вариант.

Паттерн кнопки меню WAI-ARIA описывает открытие меню, его раскрытое состояние и вход с клавиатуры. Используйте паттерн, соответствующий реальному поведению, а не переносите семантику меню на обязательное поле формы.

Множественный выбор тоже меняет задачу. Если сотрудник может заказать несколько аксессуаров, группа чекбоксов часто понятнее, чем попытка превратить список с одним выбранным значением в корзину. Когда для длинного списка всё же нужен множественный выбор, ясно показывайте выбранные элементы, их удаление и общее количество. Добавления галочек недостаточно, чтобы корректно переделать одиночный выбор в множественный.

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

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

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

Отличайте выбранное значение от пункта, который пользователь сейчас просматривает. Человек должен иметь возможность открыть список, рассмотреть другой офис и понять, что произойдёт при закрытии. Выбранная модель взаимодействия должна явно определять, меняет ли перемещение по вариантам значение поля или требуется отдельное подтверждение.

Длинные названия должны оставаться различимыми. Два пункта «Северный корпус — Сервис…» бесполезны, даже если скрытые окончания у них разные. Разрешите перенос или вынесите отличающую часть во вторую строку. Не прячьте единственное различие во всплывающей подсказке при наведении, особенно если интерфейсом пользуются на сенсорном экране.

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

Объясняйте связь между зависимыми полями

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

Допустим, выбран офис «Риверсайд — Бристоль», а сотрудник переключает регион на другой, в котором этого офиса нет. Сохраните новый регион, сбросьте несовместимый офис и покажите короткое сообщение: «Выберите офис в указанном регионе». При попытке продолжить обратите внимание пользователя на это поле, а не сообщайте, что адрес доставки полностью готов.

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

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

Сравните варианты элементов управления в форме Pixso

Соберите форму заказа оборудования с тремя разными элементами: видимым выбором способа доставки, списком регионов и поиском офиса. Используйте единые подписи, типографику, интервалы и вспомогательный текст, чтобы различия в поведении не создавали лишней визуальной неоднородности.

В Pixso переиспользуемые компоненты и Auto Layout — автоматическая компоновка — помогают сохранять единое устройство полей при проработке закрытого, раскрытого, заполненного и ошибочного состояний. В списке оставляйте варианты из того же примера. Подмена реальных названий офисов на «Вариант 1» и «Вариант 2» скрывает именно те проблемы с переносами и различимостью, которые нужно решить.

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

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

Сравните элементы формы в Pixso на реальных вариантах, между которыми будут выбирать пользователи.