Использование выпадающих меню в формах кажется очевидным: они не занимают много места в интерфейсе, автоматически проверяют введенные данные, их поддерживают все браузеры и платформы, их легко и дешево реализовать, они достаточно понятны пользователям.
В то же время, выпадающее меню очень часто неправильно используют.
Давайте посмотрим на некоторые ограничения и проблемы:
- В выпадающем меню доступны опции не отображаются, пока вы не кликните или коснетесь, чтобы открыть его. Также длина списка сначала скрытая, то есть пользователи не могут предусмотреть: содержать меню 2 или 50 элементов.
- Выбор варианта из выпадающего списка (особенно на мобильном телефоне) – это многоэтапный процесс: нужно нажать меню, чтобы открыть список параметров, затем прокручивать и просматривать их, пока не случится нужен, а потом закрыть выпадающее меню.
- Через выпадающие меню дизайнеры могут ледачкуваты: очень легко добавить все возможные варианты в выпадающем списке без всякой приоритизации (что, кстати, напоминает ситуацию с «гамбургер-меню»).
- Более длинные выпадающие меню, такие как выбор страны, могут превратиться в поисковый ужас, особенно на мобильных устройствах, где поиск клавиатурой обычно недоступен.
- Прокрутка параметров может быть тяжелой на некоторых экранах мобильных устройств, где видимая и прокруток область списке невелика.
На iOS, количество видимых вариантов может быть на первый взгляд удивительно низкой.
Есть и хорошая новость – во многих случаях существует множество альтернативных элементов управления вводом, которые намного эффективнее.
Обдумайте количество опций
Для бинарных (вкл. / Выкл.) Решений выпадающее меню очень плохим выбором. Вам нужен флажок или переключатель.
Если выпадающее меню содержит только да / нет или Вкл. / Выкл., Используйте вместо простой переключатель.
Для небольшого количества взаимоисключающих параметров рекомендуются радио-кнопки или меню-закладки, чтобы все доступные параметры были видны одновременно, без открытия списка.
Меню-закладки показывают выбранный и альтернативный вариант (ы) одновременно.
Количество видимых параметров зависит от ширины экрана и длины их подписей, но более 5 элементов не рекомендуется.
Для большого количества четко определенных параметров, когда пользователи точно знают, что ищут, рассмотрим решение «начать набирать …», где отображается список отобранных опций после введения одной-двух букв.
Вместо того, чтобы прокручивать список, пользователи начинают вводить текст и видят только отфильтрованные параметры.
Для больших и разнообразных списков попробуйте использовать существующие данные пользователя, чтобы определить приоритетные параметры, показывая самые популярные именно для него варианты. Таким образом, существует шанс, что 90% пользователей найдут свои предпочтения мгновенно, и только 10% имеют выбрать «Другое», а затем указать его в следующем запросе.
Хотя «Другое» и не является изящным решением, такое определение приоритетов может облегчить работу для большинства пользователей.
Предусмотрите варианты запросов
Одним из преимуществ выпадающего списка является то, что пользователям не нужно много набирать. Однако, если ожидаемый запрос не слишком длинный и часто вводится (например, личные данные), обычно его легче вводить вручную, чем выбирать из списка.
Введение года на мобильном устройстве проще выполнить с помощью цифровой клавиатуры, чем прокруткой длинного списка.
В общем, введение цифрового значения на мобильном обычно является более эффективным с помощью цифровой клавиатуры.
Несмотря на то, что порядок сортировки цифрового выпадающего меню понятен, ручной ввод будет проще, чем прокрутки.
Если важно проверить введенные данные, способ «начать набирать …» может быть полезным, когда поле ввода используется для фильтрации доступных параметров.
При выборе штата США, набрав лишь одну букву, можно будет хорошо отфильтровать список.
Возможность поиска в списке опций особенно полезна, когда порядок сортировки элементов непонятен.
Порядок сортировки валют может быть непонятным для пользователей, поэтому убедитесь, что они могут осуществлять поиск и по имени, и по коду валюты.
Такой же подход следует применить и в список стран: вместо того, чтобы перечислить более 200 элементов, позвольте пользователям набирать и фильтровать результаты как можно скорее.
Для дискретных значений, показывающие количество (например, количество пассажиров или количество предметов в корзине), степпер позволит пользователям быстро увеличивать или уменьшать число с помощью одного клика или прикосновения.
Для недискретные значений или значений, которые расположены по шкале, подумайте об использовании ползунка.
Показ минимального и максимального значения шкалы может помочь в понимании контекста.
Выберите дату в меню, где есть несколько опций, может стать действительно неприятным опытом, поэтому для ввода ближайших дат всегда пользуйтесь специальным меню выбора даты. (Но никогда не используйте его для ввода дат рождения!)
Обдумайте создания умных выпадающих меню
Само собой разумеется, что выпадающего меню не всегда следует избегать. Будут случаи, когда именно этот элемент станет самым подходящим, и это нормально, просто попробуйте сделать его максимально удобным.
- Используйте содержательные названия: название или описание меню должна быть четкой и доступной, даже когда список открыт. В выпадающем выбора используйте описательный текст, который сообщает пользователям, что именно они выбирают (то есть «Выбрать тип» вместо «Выберите»).
- Сортируйте элементы разумно: на основе данных пользователя попробуйте поставить самые популярные варианты в верхней части списка. Или даже заранее выберите самый популярный по умолчанию.
- Используйте умные стандартные настройки: телефонам и браузерам известно местоположение пользователя, дата и множество других данных. Используйте их, чтобы предсказать наиболее вероятный вариант для каждого пользователя.
- Сократите количество полей и пусть компьютер сделает остальных: если пользователь вводит почтовый индекс, компьютер должен определить город и страну – спрашивать не нужно. Если пользователь вводит номер кредитной карты, компьютер понимает, что это MasterCard – спрашивать не нужно.
- Подумайте об использовании API: вход с помощью кнопки Facebook Connect намного проще, чем заполнение регистрационной формы. Платеж с помощью PayPal проще, чем ввода данных кредитной карты.
