Випадаючий список (спадний список / меню), здобув велику популярність у світі інтерфейсів - і, якщо чесно, не без причини. Якщо вони зроблені погано, вони стають громіздкими, приголомшливими і потворними. Але в цій статті ми поговоримо про те, що робити, коли ви змушені їх використовувати.
Я також хочу уточнити, що є два основних типи списків, що розкриваються: ті, які використовуються для навігації, і ті, які використовуються у формах. У цій статті ми розглянемо тільки другий тип, який використовується у формах.
1. Анатомія
Анатомія розкривного списку дуже схожа на анатомію поля введення тексту. Щоб порівняти їх, прочитайте попередню статтю.
Анатомія розкривного списку форми
2. Типи та варіанти розкривних списків
Хоча стандартні списки, що випадають, широко відомі, є кілька різних типів і варіантів, які вам, можливо, доведеться розглянути для вашого наступного проекту. Зверніть увагу, що в ці приклади я включив тільки списки, що розкриваються, які використовуються у формах, а не ті, які використовуються в навігації.
Стандартний випадаючий список
Стандартний випадаючий список - це те, про що ми думаємо, коли чуємо словосполучення "список, що розкривається" або "список, що випадає". В активному стані він має бути зовні схожий на поле введення тексту, поки ви не натиснете на нього і не відкриєте меню.
Стандартний список випадаючий список
Список, що розкривається, з автодоповненням (autosuggest)
Я їх люблю. Уперше я дізнався про автодоповнення в полі пошуку Google, однак, я й гадки не маю, де воно було вперше реалізовано. (Пишіть у коментарях, якщо знаєте). Це особливо корисно, коли у вас є довгі списки, а користувач уже знає відповідь (наприклад, країну проживання).
Випадаючий список з автодоповненням
Розгорнутий список з автодоповненням і автозаповненням (autocomplete)
Автодоповнення не слід плутати з автозаповненням (autocomplete). Автодоповнення - це, коли в полі введення відображаються варіанти, з яких користувач може вибирати. Автозаповнення - це, коли форма пропонує спосіб завершення слова або фрази.
Випадаючий список з автодоповненням і автозаповненням
Іноді поля з автозаповненням замасковані під поле введення тексту, поки ви не почнете друкувати.
Розгорнутий список із множинним вибором
Хоча більшість списків, що розкриваються, є розширенням перемикачів (ви можете вибрати тільки один елемент), цей список, що розкривається, є розширенням прапорців: користувач може вибрати кілька елементів в одному полі введення.
Випадаючий список з множинним вибором
Якщо можливо, постарайся уникати цього типу списків. Мені довелося використовувати його через шалено довгий перелік категорій, і я все ще прокидаюся вночі в холодному поту через це рішення. В ідеалі, хотілося б використовувати автодоповнення з автозаповненням.
Випадаючий список із групами
Хоча довгі списки, що випадають, не ідеальні, ви можете згрупувати деякі елементи за різними категоріями, щоб спростити пошук потрібного варіанту.
Розгорнутий список із групами
Меню з множинним вибором
Хоча технічно це не список, що розкривається, меню з множинним вибором є альтернативою. На відміну від списку, що розкривається, воно відкрите з самого початку і являє собою невелике вікно прокрутки.
Фіксоване прокручуване меню, що прокручується
Хоча вони хороші для настільних комп'ютерів, вони жахливі для мобільних пристроїв, оскільки є "прокруткою всередині прокрутки".
Особисто я використовував цей шаблон лише раз (мушу сказати, що мене змусили), і я рідко зустрічаю його. Якщо у вас є додаткова інформація про нього, будь ласка, пишіть у коментарях :)
Вибірник дат (Date picker)
Вибірник дати слід використовувати тільки для планування зборів, подій тощо. Наявність календаря із зазначенням днів тижня чудово допомагає вам вирішити, коли організувати бранч, але неймовірно дратує, якщо ви хочете ввести дату закінчення терміну дії паспорта. Мені подобаються форми, в яких ви можете друкувати, а також обирати дату зі списку, що випадає, - просто переконайтеся, що введення досить розумне, щоб додати "/" між місяцями, днями та роками, інакше це трохи заплутує.
Вибірник дат
Рекомендації Тесс, як змусити людей ненавидіти тебе:
- Коли ви просите людей вказати день, коли спливає термін дії картки або паспорта, використовуйте випадаюче меню календаря. Адже їм важливо точно знати, в який день тижня закінчується термін дії їхньої картки.
- При запиті користувачів ввести дату народження, використовуйте календар, що випадає. Бонус: переконайтеся, що натискання на кожен місяць - єдиний спосіб, яким користувачі можуть переміщатися по роках. {Ще бонус: цей патерн дизайну особливо корисний в онлайн-формах для будинків для людей похилого віку.
Вибірники дат і діапазони дат - це складні звірі, тому я не став вдаватися в подробиці, але, можливо, одного разу я напишу про них окрему статтю. Можливо.
3. Стилі розкривних списків
На відміну від типів списків, що розкриваються, "стилі списків, що розкриваються" відносяться до того, як насправді виглядає список, що випадає, а не як він працює. Нижче я перерахував низку поширених стилів.
Стандартний стиль із прикріпленим списком (attached)
Я називаю цей стиль "стандартним", тому що саме його ми звикли бачити.
Стандартний стиль (attached)
Стандартний стиль з окремим списком (detached)
Я зустрічаю стиль з окремим меню все частіше і частіше. Це має сенс, оскільки дає змогу меню перебувати над або під полем залежно від області перегляду браузера.
Стандартний стиль (detached)
Закруглені межі
Закруглені межі чудово підходять інтерфейсам, що мають грайливий зовнішній вигляд.
Закруглені межі
З іконками
Додавання простої іконки на початок поля введення може зробити його більш "спроектованим". Коли хтось скаржиться, що форма виглядає занадто нудно ("Стіве, це форма з 20 полями введення - як думаєш, на що вона буде схожа?"), я просто додаю іконки.
Список, що розкривається, з іконками
Порада ледачого дизайнера: Якщо хтось скаржиться на нудну форму, просто додайте іконки. Це перевірений і вірний метод, який практично не вимагає зусиль, і ваш клієнт буде задоволений.
Із зображеннями
Як правило, я уникаю додавати зображення до елементів у випадаючому списку - просто тому, що оновлювати його вкрай важко, особливо, якщо список сильно змінюється. Однак це дуже корисно, коли ви хочете показати різницю між речами (собаками, тістечками, офісними меблями тощо).
Список із зображеннями, що розкривається. Фото з Unspalsh.Фото: Strawberry cake - @alinasagirova , Cheese cake - @patuphotos, Chocolate cake - @tuvaloland
Однак, я дотримуюся думки, що через обмежений розмір списку, що розкривається, дуже важко побачити, що являють собою зображення (див. скріншот вище). Тому зазвичай це не варте зусиль, якщо ви не зробите зображення справді великими.
Розкривний список Material Design із заливкою
Мої постійні читачі знають, що я великий шанувальник Material Design, включно з їхніми випадаючими списками.
Поле "тільки лінія" більше не використовується в керівництві Material Design, але ви все одно зустрінете його в Інтернеті. Якщо ви хочете дізнатися більше, я написав про це в попередній статті, а Dave Chui відповів тут.
Розгорнутий список Material Design з лінією
Поле "тільки лінія" було замінено на "список, що розкривається, із заливкою", і, судячи з користувацьких тестів, воно працює краще. Це набагато зручніше для користувача - і в цьому головне.
Розгорнутий список Material Design із заливкою
Випадаючий список Material Design з рамкою
Як і їхні текстові поля з рамкою, розкривні списки з рамкою Material Design круті. Їхнє меню відокремлене від контейнера, що розкривається, що може допомогти вирішити деякі проблеми юзабіліті.
Я впевнений, що всі бачили симпатичну маленьку анімацію, коли у фокусі мітка стає меншою у верхній частині поля введення. Я також хотів відзначити один момент, який часто не беру до уваги. Якщо ви подивитеся на фактичний розкривний список, ви помітите, що перший елемент порожній. Це зроблено для того, щоб користувач міг "скинути" розкривний список, якщо захоче повернутися до цього питання пізніше або залишити його порожнім.
Розкривний список Material Design з рамкою
4. Стани розкривних списків
Коли користувач взаємодіє з полем введення будь-якого типу, воно повинно перемикати стани або змінювати зовнішній вигляд, щоб дати користувачеві зворотний зв'язок. Тут ми розглянемо різні стани списків, що розкриваються.
Активний стан
Активний стан - це те, як виглядатиме список, що розкривається, до того, як користувач із ним взаємодіє.
Активний стан
Відключений стан
Якщо ви вимкнете поле введення, користувачі не зможуть взаємодіяти з ним, але зможуть його побачити. Ви можете використовувати його, якщо цього вимагають ваші бізнес-правила, але, ймовірно, це буде не дуже часто.
Вимкнений стан
Наведення курсору
Якщо користувач наводить курсор на список, що розкривається, він повинен показати, що він клікабельний.
Стан наведення курсору
{Порада нуба:Ви не можете наводити курсор на сенсорних пристроях, тому, якщо проєктуєте додатки для мобільних пристроїв або планшетів, не створюйте для них подібні стани.
Стан виділення
Стан виділення - це коли користувач використовує tabbing map (тобто використовує "tab" для навігації інтерфейсом і "enter" для введення інформації) і виділяє список, що розкривається, перед його вибором. Зазвичай ми бачимо це як "синій ореол" на інтерактивних елементах.
Однак деякі сайти поєднують у собі стан виділення і фокусу, тому, навіть якщо користувач не натискає клавішу "Enter", список, що розкривається, одразу ж відкривається. Я не знаю, яка система краща. Логічно, що об'єднання двох станів має сенс. Однак мене заплутує, коли випадаючі списки відкриваються, а я не казав їм це робити. Хто-небудь мав подібний досвід? Пишіть у коментарях.
Альтернативні стани виділення
Стан фокусу
Стан фокусу - це коли елемент є інтерактивним. Щойно ви натиснете на список, що випадає, відкриється меню і відобразяться його варіанти.
Незважаючи на те, що багато розкривних списків, з якими я взаємодіяв, залишають стрілку незмінною в активному і фокусному станах, я віддаю перевагу зміні напрямку стрілки. А ще ви можете анімувати зміну напрямку стрілки.
Стан фокусу
Коли користувач наводить курсор на пункти в меню, він повинен відображати, який варіант знаходиться під ним.
Стан фокуса під час наведення курсору
Завершене введення
Щойно користувач вибрав варіант, вікно введення має бути прив'язане або анімоване назад в активний стан, з тією різницею, що в ньому відображатиметься обраний елемент.
Завершене введення
Помилка зворотного зв'язку
При вільному введенні тексту користувач може зробити друкарську помилку. Однак, оскільки варіанти відповіді в списку, що розкривається, визначені наперед, повинен бути тільки один тип зворотного зв'язку при помилці - "Будь ласка, заповніть поле", якщо користувач натисне кнопку "Відправити" до того, як закінчить заповнення форми.
Помилка зворотного зв'язку
5. Що має сказати плейсхолдер
Як правило, я б залишив плейсхолдер / текст підказки аналогічним до решти полів. Все ще не впевнені? Ось кілька варіантів:
Порожній плейсхолдер
Залиште плейсхолдер порожнім, якщо в інших текстових полях немає плейсхолдерів.
Список, що розкривається, з порожнім плейсхоледром
Загальні підказки в плейсхолдері
"- Select -", "Choose" і т.д. - це класичні підказки для списків, що розкриваються.
Список, що розкривається, із загальними підказками
Спонукальна фраза в плейсхолдері
Використання універсальних "Select" / "Choose", а потім того, що ви хочете, щоб користувачі вибрали, є класним способом зберегти узгодженість у списках, що розкриваються, а також дати вашим користувачам підказку щодо того, що робити.
Список, що розкривається, зі спонукаючою фразою
Обраний варіант як плейсхолдер
Хоча у вас є можливість відобразити попередньо вибраний елемент у списку, що розкривається, ви маєте бути обережними, щоб переконатися, що користувач його помітив і прочитав - інакше він може дати згоду на те, чого не хоче. #КасичнийПрийомТемнихПаттернів
Список, що розкривається, з обраним варіантом як плейсхолдером
Так який варіант вибрати? Якщо ви сумніваєтеся, зберігайте послідовність. Якщо всі текстові поля мають плейсхолдери, використовуйте їх.
6. Коли не використовувати список, що випадає (а коли потрібно)
Цей розділ присвячений усім сайтам, які змушують мене вводити рік народження, використовуючи список, що випадає: f *** you. Не потрібно нагадувати мені про швидко зростаючий вік, перегортаючи довгий список місяців, поки я врешті-решт не знайду рік свого народження.
Якщо у вас менше п'яти варіантів
Якщо у вас менше п'яти варіантів, можливо, простіше використовувати перемикачі, а не додатковий клік, щоб перейти до всіх параметрів списку. Тому що список більше п'яти варіантів, починає займати багато місця.
Альтернатива списку, що випадає: якщо у вас менше п'яти варіантів
Примітка: деякі люди кажуть, що повинно бути менше шести варіантів, але ви самі вирішите, яке правило вам підходить.
Якщо простіше надрукувати, ніж вибрати
Якщо вашому користувачеві знадобиться менше часу, щоб набрати текст, ніж вибрати варіант зі списку, що випадає, вам дійсно потрібна відповідь, що краще? Наприклад, для дати народження легше надрукувати, ніж використовувати три окремі списки, що розкриваються.
Альтернатива випадаючого списку: якщо легше надрукувати
Іноді розробники можуть заперечити проти цього, оскільки простіше зробити список, що розкривається, ніж встановити всі правила, що користувачі можуть і не можуть вводити в полях вільного набору тексту. На жаль, я багато разів програвав цю битву, але продовжую вести боротьбу.
Якщо у вас є два варіанти, і це "on" і "off" (або "так" і "ні")
Спливаючий список із двома варіантами трохи дратує. Особливо з питаннями "так / ні". Перемикачі чудово підходять для подібних запитань.
Альтернатива списку, що випадає: якщо у вас є питання з двома варіантами відповіді
Якщо варіанти відповіді числові
Якщо варіанти відповіді числові, у вас є кілька варіантів.
Перший - дозволити користувачеві надрукувати відповідь. Степпери також корисні, але я б запропонував використовувати їх тільки в тому випадку, якщо очікується, що буде не більше п'яти варіантів. В іншому випадку ваш бідний користувач буде довго сидіти, клікаючи до 100.
Альтернатива списку, що випадає: якщо варіанти числові
Другий використовує повзунок (слайдер), щоб вибрати значення. Слайдери особливо корисні для великих чисел або приблизних значень.
Альтернатива списку, що випадає: якщо варіанти числові
Альтернатива списку, що випадає: якщо варіанти мають діапазон
Якщо варіантів багато
Якщо у випадаючому списку багато варіантів (яких за можливості слід уникати), дозвольте користувачеві "шукати" потрібний варіант. Найчастіше це можна побачити у випадаючих списках країн, оскільки вони довгі, але на них легко відповісти. Як згадувалося раніше, це найкраще працює в парі з автозаповненням.
Альтернатива списку, що випадає: якщо варіантів багато, АЛЕ користувач знає відповідь, перш ніж натиснути на список, що розкривається
Отже, коли ви повинні використовувати список, що розкривається?
Дані введення повинні відповідати двом вимогам, щоб розглянути можливість використання розкривного списку:
- Є більше шести варіантів.
- Коли варіанти не є чимось, що користувач одразу впізнає. Наприклад, уявіть, що ваш користувач завантажує відео, а хост має знати, яку ліцензію прикріпити до відео. Середньостатистичний користувач не знатиме всіх варіантів, доступних на платформі, тому потрібен список, що розкривається.
7. Нативні списки, що розкриваються
Ми схильні використовувати нативні або стандартні варіанти, коли час і бюджет обмежені або, коли ми працюємо над MVP. Наявність кастомних полів введення - це глазур на торті, але іноді у нас немає можливості зробити цю солодку глазур. У цьому випадку корисно знати, з чим вам доведеться працювати.
Крім того, нативні списки, що розкриваються, безпечніші, коли справа доходить до юзабіліті на різних пристроях.
Наші широкомасштабні тести юзабіліті та порівняльний аналіз свідчать, що в той час як 82% сайтів електронної комерції використовують у процесі оформлення замовлення кастомні списки, що розкриваються, 31% із них мають значні проблеми юзабіліті.
- Крістіан Хольст
Статтю можна прочитати тут
За замовчуванням
Ось кілька прикладів нативних розкривних списків. Щоб спробувати їх, перейдіть за посиланням: https://html.com/attributes/option-selected/
Нативні мобільні розкривні списки | https://html.com/attributes/option-selected/
Нативні декстопні розкривні списки https://html.com/attributes/option-selected/
Як ви можете бачити в цих прикладах, усі вони трохи різняться залежно від платформи та браузера. Вони не красиві, але дуже зручні у використанні.
Використання оболонки
Раніше я називав подібні списки, що розкриваються, "напів-кастомними", але нещодавно знайшов статтю, в якій цей патерн називається оболонкою (shell) - це звучить куди формальніше. Тому надалі я називатиму це оболонкою, і використовуватиму цей термін на нарадах. Я буду насолоджуватися, коли люди запитуватимуть мене, що це означає, просто щоб я міг показати, наскільки я розумний.
"АЛЕ, що таке оболонка?", запитаєте ви. Оболонка - це коли поле має нестандартний вигляд, але, коли ви натискаєте на нього, воно використовує нативний стиль списку, що розкривається. Це простий спосіб зберегти стиль сторінки відповідно до вашого бренду і знизити вартість розробки. Це також допомагає вирішити проблеми UX, які можуть виникнути з кастомними полями введення.
Оболонка списку, що розкривається
8. Перевірка доступності?
1 Активний стан списку, що розкривається (включно з міткою), перевищує 44px? (Ми враховуємо мітку, тому що, якщо ви клацнете по мітці, список, що розкривається, все одно повинен відкритися).
- Всі варіанти в спадному списку мають висоту понад 44px з відстанню 8px між ними?
- Чи відповідають кольори стандартам доступності AAA?
- У вашого розкривного списку є виділений стан?
- Переконайтеся, що списки, що випадають, працюють із tabbing map.
- Якщо ви використовуєте кастомний список, що розкривається, переконайтеся, що він може відкриватися вгору або вниз у тому випадку, якщо область перегляду браузера знаходиться занадто низько.
І, якщо ви сумніваєтеся, відвідайте https://webaim.org/techniques/forms/controls
Як знають мої постійні читачі, минуло багато часу відтоді, як я написав попередню статтю, і я шкодую, що це зайняло так багато часу. Знаєте, немає нічого кращого, ніж глобальна пандемія, яка змусить вас повернутися до написання статей.
Багато хто ненавидить списки, що розкриваються, - і це правильно. Але іноді існує кілька можливих альтернатив, і, якщо це так, ви маєте поліпшити списки, що розкриваються.
Спасибі Lesedi Hermans.
Переклад статті uxdesign.cc
Топ коментарі (0)