Действительно ли вашей форме нужен выпадающий список?
Недостатки выпадающих списков
Выпадающие списки скрывают варианты выбора, из‑за чего:
• снижается доступность — пользователи могут не заметить список или не изучить все варианты;
• растёт «стоимость» взаимодействия — нужно открыть список, прокрутить и выбрать вариант;
• возникают проблемы у людей с нарушениями моторики и при работе с клавиатурой;
• пользователи не могут предугадать, какие варианты есть в списке, пока его не откроют;
• если нужного варианта нет, пользователь может выбрать неподходящий или оставить поле пустым.
Когда лучше избегать выпадающих списков
• Мало вариантов (меньше 5–7) — лучше использовать переключатели. Системы проектирования (USWDS, Google Material Design, IBM Carbon) рекомендуют переключатели при малом числе опций.
• Слишком много вариантов (больше 15) — удобнее поле с фильтрацией или другие решения. Например, для списка стран лучше поле с поиском.
• Данные хорошо знакомы пользователям (возраст, дата рождения) — ввод текстом быстрее и точнее.
• Нужно визуальное сравнение (выбор цвета, размера товара) — эффективнее кнопки с образцами, а не выпадающие списки.
Когда выпадающие списки уместны
Использовать их стоит, если:
• набор допустимых данных строго ограничен и предопределён (например, способы доставки),
• критически важна стандартизация данных — чтобы избежать ошибок при обработке, данные категориальные, а не непрерывные (например, выбор размера одежды: S, M, L),
• выбор упрощает задачу (например, краткий отзыв в опросе), количество вариантов умеренное (примерно 5–10),
• поле второстепенное — не мешает основной задаче пользователя, а также поле часть группы связанных элементов — сохраняет структуру формы.
Примеры удачного использования
Выбор языка в футере сайта 1Password: 10 вариантов, умеренное число, элемент второстепенный, а также настройка логики пропуска в скрининговом опросе: точность важна, структура предложения сохраняется благодаря компактности списков.
В итоге выпадающие списки — компромиссный вариант. Прежде чем их использовать, нужно оценить число вариантов, потребность в их видимости и выгоду от скрытия в макете.
Автор: Хьюи-Син Ван из NNG
Перевод: @askusers_ux
Недостатки выпадающих списков
Выпадающие списки скрывают варианты выбора, из‑за чего:
• снижается доступность — пользователи могут не заметить список или не изучить все варианты;
• растёт «стоимость» взаимодействия — нужно открыть список, прокрутить и выбрать вариант;
• возникают проблемы у людей с нарушениями моторики и при работе с клавиатурой;
• пользователи не могут предугадать, какие варианты есть в списке, пока его не откроют;
• если нужного варианта нет, пользователь может выбрать неподходящий или оставить поле пустым.
Когда лучше избегать выпадающих списков
• Мало вариантов (меньше 5–7) — лучше использовать переключатели. Системы проектирования (USWDS, Google Material Design, IBM Carbon) рекомендуют переключатели при малом числе опций.
• Слишком много вариантов (больше 15) — удобнее поле с фильтрацией или другие решения. Например, для списка стран лучше поле с поиском.
• Данные хорошо знакомы пользователям (возраст, дата рождения) — ввод текстом быстрее и точнее.
• Нужно визуальное сравнение (выбор цвета, размера товара) — эффективнее кнопки с образцами, а не выпадающие списки.
Когда выпадающие списки уместны
Использовать их стоит, если:
• набор допустимых данных строго ограничен и предопределён (например, способы доставки),
• критически важна стандартизация данных — чтобы избежать ошибок при обработке, данные категориальные, а не непрерывные (например, выбор размера одежды: S, M, L),
• выбор упрощает задачу (например, краткий отзыв в опросе), количество вариантов умеренное (примерно 5–10),
• поле второстепенное — не мешает основной задаче пользователя, а также поле часть группы связанных элементов — сохраняет структуру формы.
Примеры удачного использования
Выбор языка в футере сайта 1Password: 10 вариантов, умеренное число, элемент второстепенный, а также настройка логики пропуска в скрининговом опросе: точность важна, структура предложения сохраняется благодаря компактности списков.
В итоге выпадающие списки — компромиссный вариант. Прежде чем их использовать, нужно оценить число вариантов, потребность в их видимости и выгоду от скрытия в макете.
Автор: Хьюи-Син Ван из NNG
Перевод: @askusers_ux