Дизайн выпадающего списка в форме запроса: количество вариантов, логика группировки и удобство для пользователя
1. Почему выпадающий список — невидимый шлюз конверсии формы
Заполняя форму запроса, покупатель может пропустить текстовое поле, оставить его пустым или написать что угодно. С выпадающим списком иначе — он заставляет пользователя выбирать из набора вариантов, в которых тот не всегда разбирается, и без правильного выбора отправить форму нельзя. Это одно действие решает, продолжит он заполнять или закроет страницу и уйдёт.
Многие команды воспринимают выпадающий список как инструмент, избавляющий пользователя от набора текста, но на самом деле это фильтр. Хорошо продуманные варианты помогают покупателю быстро определить свою потребность; плохие — оставляют его в недоумении и он просто уходит. Доля отказов у выпадающих списков обычно в два-три раза выше, чем у текстовых полей.
| Элемент интерфейса | Средняя стоимость заполнения | Опытный диапазон отказов | Подходящий тип информации |
|---|---|---|---|
| Текстовое поле | Низкая, можно пропустить | от 10% до 20% | Свободное описание потребности |
| Выпадающий список | Средняя, нужно выбрать один вариант | 20–35% | Структурированная категорийная информация |
| Группа радиокнопок | Низкая, всё видно сразу | 5–10% | 2–4 взаимоисключающих варианта |
| Группа флажков | Средняя, можно выбрать несколько | 15–25% | Складываемые предпочтения |
| Поле с поиском | Средне-высокая, нужно вводить текст | 15–25% | Более 30 длинных вариантов |
Таблица выше — опытный диапазон для форм на B2B-сайтах; в разных отраслях цифры колеблются, но систематически повышенная доля отказов у выпадающих списков — факт. Выпадающий список и Проектирование полей формы заявки и конверсия— две стороны одной логики: количество полей определяет общую длину, а варианты в списке — стоимость заполнения отдельного поля.
2. Золотой диапазон количества вариантов: от 8 до 15
Чем больше вариантов в выпадающем списке, тем лучше — это не так. Без прокрутки человек видит примерно 7 вариантов; на телефоне из-за узкого экрана — 4–5. Как только это число превышено, пользователь начинает прокручивать и теряет концентрацию. Данные по B2B-формам показывают, что списки с 8–15 вариантами дают самый высокий процент отправки; после 30 он заметно падает.
Есть контринтуитивный вывод: чем больше вариантов, тем точнее, как вам кажется, вы соберёте данные — а на деле тем больше заявок вы теряете. Выпадающий список, где покупатель ищет свою страну среди 40 государств, даёт как минимум на 15 процентных пунктов больше отказов, чем список всего из 20 основных рынков. Лишние 20 стран — это люди, которые просто закрывают форму.
| Число вариантов | Рекомендуемый формат | Типичный сценарий | Влияние на отправку |
|---|---|---|---|
| От 1 до 7 | Обычный выпадающий список или радиокнопки | Бюджет, тип запроса | Негатива нет, можно даже заменить группой кнопок |
| От 8 до 15 | Стандартный выпадающий список | Основные рынки, категории продуктов | Оптимальный диапазон, отправка стабильна |
| От 16 до 30 | Выпадающий список с группами (optgroup) | Отрасли, сферы применения | Без группировки падает больше чем на 10% |
| От 31 до 60 | Комбобокс с поиском (combobox) | Список стран, модели продуктов | Без поиска падает больше чем на 20% |
| Больше 60 | Два связанных выпадающих списка | Многоуровневые категории, иерархия регионов | Одноуровневый список почти полностью теряет пользователей |
Вот два конкретных случая. Первый: вы делаете промышленные детали, у вас 12 крупных категорий — обычного выпадающего списка хватит, покупатель видит всё сразу и выбирает. Второй: вы делаете оборудование для клиентов по всему миру, целевых рынков 40 — на телефоне такой список придётся прокручивать восемь экранов, и здесь нужен комбобокс с поиском, чтобы человек набирал буквы и фильтровал.
Порядок вариантов тоже важен. Частые варианты ставьте вперёд, не сортируйте по алфавиту. Пять рынков, откуда приходит 80% заявок, поставьте в самое начало списка, а длинный хвост — после них. Обычно такая правка поднимает заполняемость поля на 5–10 процентных пунктов.
3. Логика категорий: когда выбирать плоский список, группы или поиск
Когда вариантов много, от их группировки напрямую зависит, как быстро пользователь найдёт нужный. Есть три распространённых подхода: плоский список, группировка и комбобокс с поиском. Выбирать нужно не на глаз, а по числу вариантов и по тому, насколько они знакомы пользователю.
| Способ группировки | Подходящее число вариантов | Усилия пользователя | Сложность реализации | Когда подходит |
|---|---|---|---|---|
| Плоский список | ≤15 | Низкие, просто клик | Низкая, нативный select | Основные рынки, крупные категории |
| Группы optgroup | От 16 до 30 | Средние: сначала группа, потом вариант | Низкая, поддерживается нативно | Отрасли, сферы применения |
| Поле с поиском | От 31 до 100 | Средние, нужно набирать текст для фильтра | Средняя, нужен сторонний компонент | Страны, модели, SKU |
| Два связанных списка | Больше 100 | Высокие: сначала первый уровень, потом второй | Высокая, нужна логика связи на фронтенде | Многоуровневые категории, регионы и города |
| Древовидный каскад | Больше 200 | Высокие, много уровней раскрытия | Высокая, применять осторожно | Сложный BOM, структура компании |
Частая ошибка — группировать через optgroup, но называть группы размыто. Например, разбить отрасли на «производство», «услуги» и «прочее»: покупатель не понимает, к какой группе относится его отрасль, и группировка только добавляет путаницы. Названия групп должны быть словами, которые пользователь узнаёт, а не внутренними терминами.
Другой случай: у вас 80 моделей товара, и в названии каждой есть префикс и суффикс. Здесь лучше использовать комбинированный список с поиском: пусть пользователь вводит ключевое слово модели и фильтрует, это гораздо удобнее, чем прокручивать 80 вариантов. Технически это реализуется с помощью открытых компонентов вроде Select2 или Tom Select — интеграция занимает полчаса.
4. Значения по умолчанию, плейсхолдеры и доступность
В дизайне выпадающих списков есть железное правило: для обязательных полей не устанавливайте первый вариант значением по умолчанию. Многие разработчики форм для экономии времени делают первый пункт списка выбранным по умолчанию, и в итоге 80% покупателей отправляют форму, даже не тронув этот список — вы получаете данные, которые задали сами, а не то, что покупатель имел в виду.
| Элемент дизайна | Рекомендуемая практика | Неправильный подход | Последствия |
|---|---|---|---|
| Значение по умолчанию для обязательного списка | Плейсхолдер «Выберите» | Первый вариант выбран по умолчанию | Собираются ложные данные |
| Значение по умолчанию для необязательного списка | Пустое значение или выход «Другое» | Заставляем выбрать один вариант | Пользователь застревает и бросает |
| Текст плейсхолдера | Явное действие: «Выберите вашу страну» | Размытое «Country» | Пользователь не понимает, что делать |
| Текст вариантов | Слова с точки зрения пользователя | Внутренний артикул SKU | Покупатель не понимает |
| Высота списка | На телефоне — полноэкранный список | Маленькое всплывающее окно показывает только 5 пунктов | На телефоне приходится прокручивать снова и снова |
Доступность часто упускают из виду. В выпадающем списке при работе с клавиатуры Tab должен переводить фокус, стрелки — выбирать, Enter — подтверждать; эти нативные действия в кастомных компонентах списков часто ломаются. Если ваша форма должна соответствовать требованиям доступности, обратитесь к Доступность сайта (WCAG)— там описаны требования к клавиатурному взаимодействию для компонентов списков, не изобретайте велосипед.
Ещё одна деталь: нативный выпадающий список в мобильном браузере на самом деле удобнее кастомного компонента — он открывает полноэкранный колесообразный выбор. На телефоне, если вам не нужен поиск, честно используйте нативный select, а не кастомное всплывающее окно: проблем с совместимостью на разных моделях хватит на неделю разбирательств.
5. Частые ошибки в выпадающих списках
| Заблуждение | Что делают | Что получают | Правильный подход |
|---|---|---|---|
| Чем больше вариантов, тем профессиональнее | Перечислить все отрасли | Не находят вариант и бросают отправку | Ограничьте 15 пунктами, длинный хвост — в «Другое» |
| Первый пункт выбран по умолчанию | Разработчику так проще | 80% покупателей не выбирают, получаем ложные данные | Заставляем выбрать через плейсхолдер |
| Названия групп на внутреннем жаргоне | Группировка по внутренним отделам | Пользователь не может сопоставить | Группируйте словами, понятными покупателю |
| Кастомное всплывающее окно на телефоне | Стремление к визуальному единообразию | Проблемы совместимости на каждом шагу | На мобильных используйте нативный select |
| Варианты отсортированы по алфавиту | Проще не сортировать | Частые варианты спрятаны внизу | Частые варианты — наверху |
Из этих пяти ошибок самая незаметная — первый пункт, выбранный по умолчанию. Она не заставляет пользователя сразу уйти, но забивает вашу CRM ложными данными: при обзвоне продавец обнаруживает, что 80% клиентов «выбрали» один и тот же вариант, смысл которого вы сами не знаете. Проверка качества данных после отправки формы и Надёжность формы запроса— это один и тот же чек-лист.
После доработки выпадающего списка обязательно проверьте с помощью A/B-тест формы Как проверить результат: до редизайна соберите базовую линию за 2 недели, после — ещё 2 недели, и сравните, стало ли изменение конверсии статистически значимым. Не полагайтесь на ощущения в духе «мне кажется, так лучше»: за каждым изменением в опциях выпадающего списка должны стоять данные.
FAQ: частые вопросы
Сколько вариантов оптимально помещать в выпадающий список?
Нужно ли задавать вариант по умолчанию в выпадающем списке?
Как сгруппировать варианты, чтобы не испортить опыт при большом количестве?
На мобильных использовать нативный выпадающий список или собственный компонент?
В вариантах выпадающего списка указывать внутренний артикул SKU или понятные пользователю слова?
Как проверить, дал ли редизайн выпадающего списка результат?
В заключение
Выпадающее меню кажется всего лишь маленьким элементом формы, но на самом деле именно оно определяет, сможет ли покупатель без труда структурированно рассказать вам о своих потребностях. Плохо спроектированный выпадающий список заставит вас потерять треть потенциальных клиентов ещё до того, как вы начнёте собирать заявки.
Три шага к внедрению: сначала посчитайте, сколько вариантов в каждом выпадающем списке, и держите общее количество в золотом диапазоне от 8 до 15; затем выберите формат взаимодействия по числу вариантов — если их больше 15, группируйте, если больше 30, добавьте поиск; и наконец, замените значения по умолчанию у обязательных выпадающих списков на плейсхолдеры, чтобы исключить фейковые данные. После этих трёх шагов запустите ещё один раунд A/B-теста, чтобы проверить изменение конверсии в отправку.
Запомните одну фразу: выпадающее меню становится профессиональнее не от количества вариантов — 8–15 вариантов без прокрутки приносят настоящие заявки лучше, чем список из 60 пунктов с прокруткой. Логика категорий и настройка значений по умолчанию важнее визуального оформления в десять раз.