Выпадающий список или радиокнопки — что выбрать для формы

Выпадающий список кажется аккуратнее. Он занимает одну строку, не растягивает форму, выглядит собранно. Поэтому в него суют всё подряд: страну, город, тип обращения, «да/нет».

А вот как на это смотрит дизайн-система GOV.UK. Их рекомендация по компоненту select начинается словами: использовать только как крайнее средство в публичных сервисах, потому что исследования показывают — части людей он даётся очень тяжело.

Разберёмся, где это правда важно, а где можно не драматизировать.

Что делает каждый

Радиокнопки показывают все варианты сразу; выбрать можно один. Выпадающий список прячет варианты за одну строку; открыть — отдельное действие.

Разница не в красоте, а в том, когда человек видит варианты: до выбора или только после того, как догадается нажать.

Сравнение по критериям, которые реально видно

• Количество действий. Радиокнопки: одно нажатие. Список: открыть, прокрутить, выбрать, закрыть — и на телефоне это ещё и системная «шторка» поверх формы.
• Видимость вариантов. У радиокнопок человек видит весь набор и понимает, о чём вопрос, ещё до ответа. Со списком вопрос понятен только тому, кто его уже открыл.
• Сравнение между собой. «Экспресс за 500 ₽» и «Обычная за 200 ₽» рядом сравниваются глазами. В списке их приходится держать в голове.
• Место на экране. Тут список выигрывает, и это его единственное настоящее преимущество: тридцать вариантов радиокнопками — это экран прокрутки.
• Защита от ерунды. Список не даёт ввести то, чего нет в наборе. NN/g отмечает это как плюс: данные приходят заведомо из допустимых.
• Мобильные экраны и доступность. Тут у списка всё плохо, и это задокументировано. GOV.UK перечисляет, что видели в исследованиях: люди не могли закрыть список, пытались печатать в нём, путали подсвеченный вариант с выбранным, пытались зумить варианты пальцами, не понимали, что список можно прокручивать дальше.

Кому что подойдёт — прямой ответ

• Два варианта — радиокнопки, всегда. Список из двух пунктов — это три действия там, где хватает одного.
• Три-пять вариантов — радиокнопки. Они помещаются, читаются и сравниваются.
• Шесть-пятнадцать — по ситуации. Если варианты короткие и человеку важно их сравнить, всё ещё радиокнопки. Если это служебная настройка — можно список.
• Больше пятнадцати и список знакомый — не список, а поле с автодополнением. NN/g прямо советует избегать выпадающих списков там, где напечатать быстрее: типичные примеры — страна и регион. Печатать «Ка…» и выбрать из трёх подсказок быстрее, чем искать глазами среди двухсот.
• Дата рождения — никогда не список. Отдельная рекомендация NN/g: не прячьте в списки данные, которые человек знает наизусть, — день, месяц, год «зашиты в пальцы», а выбор из длинного меню превращает секунду в полминуты. Три текстовых поля лучше; только не вешай на них маску ввода.

Кстати, про «пытались печатать в списке». Люди делают это не от растерянности: на компьютере в открытом <select> печать реально работает — браузер прыгает к варианту, начинающемуся с набранных букв. Просто об этом почти никто не знает, а на телефоне такого нет вовсе. Отсюда и совет NN/g держать клавиатурный ввод в списках рабочим и не ломать его своими скриптами: для того, кто про него знает, это самый быстрый способ выбрать из двухсот стран. Если ты решил сделать свой «красивый» список на div-ах — ты этот способ у человека отнял, вместе с поддержкой скринридеров. В форме обратной связи такая замена почти никогда не окупается.

Есть и вариант «ни то, ни другое»: иногда правильный ход — задать другой вопрос. GOV.UK советует сначала попробовать переформулировать так, чтобы вариантов стало меньше. «Выберите тип обращения» из двенадцати пунктов часто разворачивается в два простых вопроса по три варианта — и заполняется быстрее.

Две ловушки, в которые попадают оба

Предвыбранный вариант. В настройках он уместен. В вопросе — нет: GOV.UK предупреждает, что заранее выбранный ответ влияет на то, что человек ответит, и часть людей просто пролистает его, не заметив.

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

И то, и другое чаще всего чинится не кодом, а формулировкой вопроса.

А если вариантов действительно тридцать?

Тогда список честнее радиокнопок, но лучше — текстовое поле с подсказками по мере ввода. Держи при этом варианты в одном предсказуемом порядке (алфавит, годы по возрастанию) и не прячь подпись: NN/g отдельно отмечает, что подпись должна оставаться видимой, когда список открыт, иначе человек забывает, что именно выбирает.

Радиокнопки не растянут форму на мобильном?

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