Використання випадаючих меню в формах здається очевидним: вони не займають багато місця в інтерфейсі, автоматично перевіряють введені дані, їх підтримують всі браузери та платформи, їх легко і дешево реалізувати, вони достатньо зрозумілі користувачам.
У той же час, випадаюче меню дуже часто неправильно використовують.
Давайте подивимося на деякі обмеження та проблеми:
- У випадаючому меню доступні опції не відображаються, доки ви не клікнете чи торкнетеся, щоб відкрити його. Також довжина списку спершу прихована, тобто користувачі не можуть передбачити: міститиме меню 2 або ж 50 елементів.
- Вибір варіанта з випадаючого списку (особливо на мобільному телефоні) — це багатоетапний процес: потрібно натиснути меню, щоб відкрити список параметрів, потім прокручувати та проглядати їх, доки не трапиться потрібний, а потім закрити випадаюче меню.
- Через випадаючі меню дизайнери можуть ледачкувати: надзвичайно легко додати всі можливі варіанти до випадаючого списку без будь-якої пріоритизації (що, до речі, нагадує ситуацію з «гамбургер-меню»).
- Більш довгі випадаючі меню, такі як вибір країни, можуть перетворитись на пошуковий жах, особливо на мобільних пристроях, де пошук клавіатурою зазвичай недоступний.
- Прокрутка параметрів може бути тяжкою на деяких екранах мобільних пристроїв, де видима та прокручувана область списку невелика.
Є і гарна новина — в багатьох випадках існує безліч альтернативних елементів керування введенням, які є набагато ефективнішими.
Обміркуйте кількість опцій
Для бінарних (вкл./викл.) рішень випадаюче меню є дуже поганим вибором. Вам потрібен прапорець або перемикач.
Для невеликої кількості взаємовиключних параметрів рекомендуються радіо-кнопки або меню-закладки, щоб усі доступні параметри були видимі одночасно, без відкриття списку.
Для великої кількості чітко визначених параметрів, коли користувачі точно знають, що шукають, розглянемо рішення «почати набирати…», де відображається список відібраних опцій після введення одної-двох літер.
Для великих та різноманітних списків спробуйте використовувати існуючі дані користувача, щоб визначити пріоритетні параметри, показуючи найпопулярніші саме для нього варіанти. Таким чином, існує шанс, що 90% користувачів знайдуть свої уподобання миттєво, і лише 10% мають вибрати «Інше», а потім вказати його в наступному запиті.
Передбачте варіанти запитів
Однією з переваг випадаючого списку є те, що користувачам не потрібно багато набирати. Однак, якщо очікуваний запит не надто довгий та часто вводиться (наприклад, особисті дані), зазвичай його легше вводити вручну, ніж вибирати зі списку.
Загалом, введення цифрового значення на мобільному зазвичай є більш ефективним за допомогою цифрової клавіатури.
Якщо важливо перевірити введені дані, спосіб «почати набирати…» може бути корисним, коли поле введення використовується для фільтрації доступних параметрів.
Можливість пошуку в списку опцій особливо корисна, коли порядок сортування елементів незрозумілий.
Такий самий підхід слід застосувати і до списку країн: замість того, щоб перерахувати більше 200 елементів, дозвольте користувачам набирати та фільтрувати результати якомога швидше.
Для дискретних значень, що показують кількість (наприклад, кількість пасажирів або кількість предметів у кошику), степпер дозволить користувачам швидко збільшувати або зменшувати число за допомогою одного кліка або дотику.
Для недискретних значень або значень, які розташовані за шкалою, подумайте про використання повзунка.
Вибір дати з меню, де є кілька опцій, може стати дійсно неприємним досвідом, тому для введення найближчих дат завжди користуйтеся спеціальним меню вибору дати. (Але ніколи не використовуйте його для введення дат народження!)
Обдумайте створення розумніших випадаючих меню
Само собою зрозуміло, що випадаючого меню не завжди слід уникати. Будуть випадки, коли саме цей елемент стане найбільш підходящим, і це нормально, просто спробуйте зробити його максимально зручним.
- Використовуйте змістовні назви: назва або опис меню має бути чіткою і доступною, навіть коли список відкритий. У випадаючому вибору використовуйте описовий текст, який повідомляє користувачам, що саме вони вибирають (тобто «Вибрати тип» замість «Будь ласка, виберіть»).
- Сортуйте елементи розумно: на основі даних користувача спробуйте поставити найпопулярніші варіанти у верхній частині списку. Або навіть заздалегідь виберіть найпопулярніший за замовчуванням.
- Використовуйте розумні стандартні налаштування: телефонам та браузерам відомо місце розташування користувача, дата та безліч інших даних. Використовуйте їх, щоб передбачити найбільш вірогідний варіант для кожного користувача.
- Скоротіть кількість полів і нехай комп’ютер зробить решту: якщо користувач вводить поштовий індекс, комп’ютер повинен визначити місто та країну — питати не потрібно. Якщо користувач вводить номер кредитної картки, комп’ютер розуміє, що це MasterCard — питати не потрібно.
- Подумайте про використання API: вхід за допомогою кнопки Facebook Connect набагато простіший, ніж заповнення реєстраційної форми. Платіж за допомогою PayPal простіший, ніж введення даних кредитної картки.
