Отже, яка різниця між полем зі списком, множинним вибором, списком і розкривним меню? Хоча всі ці компоненти інтерфейсу можуть виглядати схожими, вони служать різним цілям. Вибір часто зводиться до кількості доступних опцій та їх видимості. Давайте подивимося, чим вони відрізняються, для чого служать і як вибрати правильний, уникаючи непорозумінь і помилкових очікувань.
Не всі шаблони списків однакові Усі виділені вище компоненти інтерфейсу користувача мають одну спільну рису: вони підтримують взаємодію користувачів зі списками. Однак вони роблять це трохи інакше. Давайте подивимося на кожен окремо:
Випадаюче меню → список приховано, доки його не буде активовано. Поле зі списком → введіть для фільтрування + виберіть 1 варіант. Множинний вибір → введіть для фільтрування + виберіть багато параметрів. Список → усі параметри списку видимі за замовчуванням (+ прокручування). Подвійний список → переміщення елементів між двома списками.
Іншими словами, Combobox поєднує поле введення тексту з розкривним списком, тож користувачі можуть вводити фільтри та вибирати один параметр. За допомогою Multiselect користувачі можуть вибрати багато варіантів (часто відображаються у вигляді таблеток або чіпсів). У списках відображаються всі параметри списку, видимі за замовчуванням, часто з прокручуванням. Це корисно, коли користувачам потрібно негайно побачити всі доступні варіанти. Подвійний список (також званий списком передачі) — це варіант списку, який дозволяє користувачам переміщувати елементи між двома списками (лівий ↔ правий), як правило, для масового вибору. Ніколи не приховуйте часто використовувані параметри Як згадувалося вище, вибір правильного компонента інтерфейсу користувача залежить від 2 факторів: скільки параметрів списку доступно та чи всі ці параметри мають бути видимими за замовчуванням. Усі списки також можуть мати деревовидні структури, вкладення та груповий вибір.
Є один принцип, якого я дотримуюся роками для будь-якого компонента інтерфейсу користувача: ніколи не приховуйте часто використовувані параметри. Якщо користувачі часто покладаються на певний вибір, немає сенсу приховувати це від них. Ми могли б або зробити його попередньо вибраним, або (якщо є лише 2–3 часто використовувані параметри) показати їх як фішки чи кнопки, а потім показати решту списку під час взаємодії. Загалом, добре завжди відображати популярні параметри, навіть якщо це може захаращувати інтерфейс. Як вибрати який? Не для кожного списку потрібен складний метод відбору. Для списків, які містять менше 5 елементів, зазвичай найкраще працюють прості перемикачі або прапорці. Але якщо користувачам потрібно вибрати з великого списку параметрів (наприклад, понад 200 елементів), combobox + multiselect стане в нагоді завдяки швидшій фільтрації (наприклад, вибір країни).
Списки корисні, коли людям потрібно отримати доступ до багатьох параметрів одночасно, особливо якщо їм також потрібно вибрати багато параметрів із цього списку. Вони можуть бути корисними для часто використовуваних фільтрів.
Подвійний список часто не помічається та ігнорується. Але це може бути дуже корисним для складних завдань, наприклад масового вибору або призначення ролей, завдань, обов’язків. Це єдиний компонент користувальницького інтерфейсу, який дозволяє користувачам переглядати свій повний список вибору поруч із вихідним списком перед закріпленням (також називається «Список передачі»). Насправді подвійний список часто швидший, точніший і доступніший, ніж перетягування. Спосіб зручності використання Пам’ятайте про одне важливе зауваження: усі типи списків мають підтримувати навігацію з клавіатури (наприклад, клавіші зі стрілками ↑/↓) для забезпечення доступності. Деякі люди майже завжди покладаються на клавіатуру для вибору параметрів, коли починають друкувати.
Крім цього:
Для списків із 7+ параметрами розгляньте можливість додавання функцій «Вибрати все» та «Очистити все», щоб спростити взаємодію користувача. Для довгих списків із полем зі списком відкрийте всі параметри для користувачів, натиснувши/торкнувшись, інакше їх ніколи не побачать, Найважливіше, не відображайте неінтерактивні елементи як кнопки, щоб уникнути плутанини — і не відображайте інтерактивні елементи як статичні мітки.
Підсумок: не все є спадним списком Імена мають значення. Вертикальний список параметрів зазвичай описується як «випадаючий список», але часто він надто загальний, щоб мати сенс. «Випадаюче меню» означає, що список за замовчуванням приховано. «Множинний вибір» означає багаторазовий вибір (прапорець) у списку. «Combobox» передбачає введення тексту. А «Listbox» — це просто список доступних для вибору елементів, видимих у будь-який час. Мета полягає не в узгодженості з визначеннями, наведеними вище, заради цього. Але скоріше для узгодження намірів — говоріть однією мовою, приймаючи рішення, проектуючи, створюючи та використовуючи ці компоненти інтерфейсу користувача. Це повинно працювати дляусі — дизайнери, інженери та кінцеві користувачі — доки статичні мітки не виглядають як інтерактивні кнопки, а перемикачі не діють як прапорці. Зустрічайте «Шаблони проектування для інтерфейсів AI» Зустрічайте шаблони дизайну для інтерфейсів штучного інтелекту, новий відеокурс Віталія з практичними прикладами з реальних продуктів — незабаром відбудеться навчальний курс UX. Перейти до безкоштовного попереднього перегляду. Зустрічайте шаблони дизайну для інтерфейсів штучного інтелекту, відеокурс Віталія про дизайн інтерфейсу та UX.
Відео + навчання UX Лише відео Відео + навчання UX $ 450,00 $ 799,00
Отримайте відео + тренінг UX30 відеоуроків (10 годин) + тренінг UX в реальному часі. 100 днів гарантії повернення грошей. Лише відео 275,00 $ 395,00 $
Отримайте відеокурс30 відеоуроків (10 год). Оновлюється щороку. Також доступний як UX Bundle із 3 відеокурсами.
Корисні ресурси
Autocomplete: UX Guidelines, автор Віталій Фрідман Combobox від eBay 👍 Combobox від Elastic Combobox, Еліза Combobox, MongoDB 👍 Combobox від Visa 👍 Combobox, Watson (Docplanner) Combobox, Вікімедіа Combobox від Zendesk Multiselect (документація MongoDB Combobox Design), від MongoDB 👍 Multiselect Lookup, Wikimedia Комбінований список із множинним вибором, автор Vaadin Multiselect, від Visa Передача (приклад Listbox), Ant Design Listbox, автор Hopper List Box, автор Vaadin Listbox від Visa Селектор подвійного списку від Red Hat (PatternFly) Dual Listbox від Salesforce (Lightning Design System) Список переказів, автор Мантін Dual Listbox від Dashlite Значки проти таблеток проти чіпсів проти бірок, Віталій Фрідман Списки проти випадаючих списків, Анна Кейлі (NN/g)
