Хватит неправильно использовать выпадающие списки

Формы состоят из самых разных элементов интерфейса. Если вы не знаете, как правильно с ними обращаться, вы можете сильно усложнить заполнение форм. Чаще всего ошибаются, применяя выпадающие списки (select menu).

Когда использовать

Иногда можно встретить выпадающие списки с 2 вариантами, иногда — с более чем 20. В обоих случаях это неправильно. Если у пользователя есть менее 5 вариантов выбора, следует использовать радиокнопки. Так выбор будет проще и быстрее, потому что пользователю нужно лишь взглянуть на варианты и один раз кликнуть. С выпадающим списком ему нужно нажать на него, найти подходящий вариант и кликнуть снова. Также другие варианты не видны, пока вы не нажмёте на выпадающий список. Если их меньше 5, лучше наглядно показать их в форме в виде радиокнопок — пользователи смогут быстро их просмотреть.

cf49db1bb1670bfb20aa7aefe8379d65

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

2a06eb732f44130857b23a8856c710a1

Как называть

Как у любого другого элемента формы, у выпадающего списка должно быть находящееся рядом название (label). Однако, надпись о том, что пользователь выбирает, должна быть и внутри элемента. Она должна чётко описывать набор вариантов. Пользователям с ограниченными возможностями, использующим при заполнении форм экранных дикторов (screen readers), будет недостаточно универсального «Выберите, пожалуйста». Добавление названия и снаружи, и внутри выпадающего списка позволит любому пользователю делать выбор быстрее и без какой-либо замешки.

b8388cdf8be70ac7c078544a563ebd5c

Когда подставлять вариант по умолчанию

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

e42105018bece6b67255a923ed4aff4c

Группировка вариантов выбора

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

aaa42c854de7f33691d11ed4a6bafcf7

Использование для навигации

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

f789ee08d73b531c7b9f8e158dc5a463

Больше подходят для форм, а не навигации

Хоть вы и встретите выпадающие списки, используемые в навигации, мы рекомендуем использовать их только в формах. Мобильные сайты часто используют их как основную навигацию, чтобы сэкономить место. Однако с этим решением связаны проблемы, касающиеся юзабилити, доступности и поисковой оптимизации.

59c2581d44b8824107152b951c3c70e2

На первый взгляд, навигация с помощью выпадающего списка выглядит неуместной, так как не сочетается с дизайном сайта. Также она неудобна, потому что нажатие на выпадающий список приводит к появлению вращающегося колеса (spinning wheel), использующегося для выбора из вариантов в мобильных формах. Пользователь должен нажать на выпадающий список, найти и выбрать вариант, нажать кнопку «Готово», а это немало действий. Не говоря уже о том, что кнопки «Предыдущий», «Следующий» и «Автозаполнение» в данной ситуации бесполезны, так как вы не заполняете форму.

Ваш выпадающий список нельзя будет использовать для навигации, если джаваскрипт выключен. Это касается пользователей некоторых экранных дикторов. Доступнее будет меню, которое откроется при перемещении на него табом и позволит тем же самым табом пройтись по другим вариантам. Это возможно только если пункты меню являются настоящими ссылками. По этой же причине выпадающие меню бесполезны с точки зрения поисковой оптимизации. Если вы хотите, чтобы ваша навигация была оптимизирована для поисковиков, не используйте выпадающие списки, а предлагайте пользователям раскрывающиеся меню (dropdown menu).

Хватит неправильно использовать выпадающие списки

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

От переводчика

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