Випадаючі списки з можливістю пошуку: створення зручних для користувача довгих списків

Випадаючий список із 200 країнами. Список із 50 штатів. Сотні варіантів товарів. Прокручування довгих випадаючих списків дратує і призводить до залишення форми.

Випадаючі списки з можливістю пошуку вирішіть цю проблему, дозволивши користувачам миттєво фільтрувати параметри. Замість прокручування вони вводять «can» і бачать угорі «Канада».

У цьому посібнику ви дізнаєтеся, коли використовувати випадаючі списки з можливістю пошуку та як налаштувати їх у формах WordPress.

Проблема з довгими випадаючими списками

Стандартні випадаючі списки стають непридатними для використання зі збільшенням кількості опцій:

Проблеми взаємодії з користувачем

• Нескінченне прокручування – Пошук «Сполучені Штати» в алфавітному списку країн означає прокручування понад 180 країн.
• Мобільний кошмар – Крихітні області прокручування на сенсорних екранах
• Витрата часу – Користувачі витрачають понад 10 секунд на пошук одного варіанта
• Схильний помилятися – Легко випадково вибрати неправильний елемент
• Розчарування – Повторюється для кількох полів випадаючих списків

Коли випадаючі меню стають проблематичними

Як працюють випадаючі списки з можливістю пошуку

Випадаючий список з можливістю пошуку поєднує введення тексту з випадаючим списком:

1. Користувач натискає на поле випадаючого списку
2. З’являється поле пошуку (або саме поле стає доступним для пошуку)
3. Користувач вводить кілька символів
4. Фільтр параметрів у режимі реального часу відповідно до вхідних даних
5. Користувач вибирає з відфільтрованого короткого списку

Приклад: Вибір країни

Без пошуку: Прогорніть понад 200 країн, щоб знайти «Німеччина»

З пошуком: Введіть «ger» → див. Німеччина, Алжир, Нігерія → натисніть Німеччина

Зекономлений час: 10+ секунд → 2 секунди

Типові випадки використання випадаючих списків з можливістю пошуку

Вибір країни

Класичний приклад. З більш ніж 195 країнами пошук є надзвичайно важливим:

• Введіть «uni» → Сполучені Штати, Велика Британія, Об’єднані Арабські Емірати
• Введіть «aus» → Австралія, Австрія
• Введіть «новий» → Нова Зеландія, Нова Каледонія

Вибір штату/провінції

50 штатів США, 13 канадських провінцій або регіонів по всьому світу:

• Введіть «cal» → Каліфорнія
• Введіть «новий» → Нью-Йорк, Нью-Джерсі, Нью-Гемпшир, Нью-Мексико

категорії продуктів

Сайти електронної комерції з сотнями типів товарів:

• Введіть «ноутбук» → Ноутбуки, аксесуари для ноутбуків, сумки для ноутбуків
• Введіть «телефон» → Телефони, Чохли для телефонів, Зарядні пристрої для телефонів

Посади/Галузі

Кар'єрні форми з розширеним списком вакансій:

• Введіть «інженер» → Інженер-програміст, Інженер-будівельник, Інженер-механік
• Введіть «ринок» → Менеджер з маркетингу, Аналітик ринку, Спеціаліст з ринку

мови

Мовні налаштування з більш ніж 100 варіантами:

• Введіть «span» → Іспанська
• Введіть «підборіддя» → Китайська (спрощена), Китайська (традиційна)

Університети/Школи

Списки навчальних закладів:

• Введіть «гарвард» → Гарвардський університет
• Введіть «MIT» → Массачусетський технологічний інститут

Часові зони

Понад 400 варіантів часових поясів:

• Введіть «тихоокеанський» → Тихий океан/Окленд, Тихий океан/Гонолулу, США/Тихий океан
• Введіть «нью-йорк» → Америка/Нью-Йорк

Налаштування випадаючих списків з можливістю пошуку

Ось як створити випадаючі списки з можливістю пошуку за допомогою Автоматичний конструктор форм:

Крок 1: Встановлення автоматичного конструктора форм

1. Перейдіть до Плагіни → Додати новий
2. Шукати "АФБ«(скорочена назва від Auto Form Builder)»
3. Знайти "AFB – Auto Form Builder – Конструктор форм перетягуванням"
4. Натисніть Встановити зараз, То активувати

Крок 2: Додайте поле випадаючого списку

1. Створення або редагування форми
2. перетягніть Випадання поле у ​​вашу форму
3. Натисніть, щоб відкрити налаштування

Крок 3: Додайте свої опції

Введіть список варіантів. Для довгих списків ви можете:

• Введіть вручну – Введіть кожен варіант по черзі
• Масове додавання – Вставити список опцій (по одній на рядок)

Крок 4: Увімкнути пошук

У випадаючих налаштуваннях знайдіть Можливий пошук or Увімкнути пошук опцію. Увімкніть її.

Випадаючий список тепер міститиме поле пошуку/фільтра, яке фільтруватиме параметри під час введення користувачем запиту.

Крок 5: Налаштування поведінки пошуку

Залежно від вашого конструктора форм, у вас можуть бути такі опції:

• Мінімум символів – Почати фільтрацію після введення X символів
• Позиція пошуку – Збіг з початку опції або з будь-якого місця
• Текст-заповнювач – «Введіть текст для пошуку…» або «Шукайте країни…»

Найкращі практики для випадаючих полів

1. Завжди вмикайте пошук для понад 20 варіантів

Якщо у вашому випадному списку є понад 20 варіантів, увімкніть пошук. Це так просто. Користувачі будуть вам вдячні.

2. Використовуйте прозорий текст-заповнювач

Повідомте користувачів, що вони можуть шукати:

• «Виберіть країну (введіть назву для пошуку)»
• «Оберіть свій штат…»
• «Пошук або вибір…»

3. Логічно упорядкуйте параметри

Навіть під час пошуку порядок опцій має значення:

• за алфавітом – Найкраще підходить для назв (країн, штатів)
• Найпоширеніші спочатку – Розмістіть популярні варіанти на початку (США, Велика Британія, Канада)
• Угруповання – Категорії з роздільниками

4. Включіть поширені варіації

Користувачі можуть шукати:

• «США» або «Сполучені Штати» або «США» або «Америка»
• «Велика Британія» або «Сполучене Королівство», або «Британія» або «Англія»

Якщо можливо, вкажіть поширені скорочення або варіанти, що відповідають одному й тому ж параметру.

5. Тестування на мобільному пристрої

Випадаючі списки з можливістю пошуку повинні безперебійно працювати на сенсорних пристроях:

• Пошуковий запит легко торкатися
• Клавіатура з'являється для введення тексту
• Опцій достатньо багато для точного натискання

Коли НЕ слід використовувати випадаючі списки з можливістю пошуку

Випадаючі списки з можливістю пошуку не завжди є відповіддю:

Короткі списки (менше 10 варіантів)

Для 5-10 варіантів стандартний випадаючий список працює швидше. Не потрібно друкувати, коли ви бачите все одразу.

Коли користувачі не знають точного терміна

Пошук вимагає від користувачів знати, що вводити. Якщо вони переглядають/досліджують варіанти, список за категоріями або радіокнопки можуть працювати краще.

Так/Ні або бінарний вибір

Використовуйте натомість радіокнопки. Для двох варіантів взагалі не потрібен випадаючий список.

Числові діапазони

Щодо вікових груп або вибору кількості, враховуйте:

• Поле введення числа
• Повзунок
• Короткий випадаючий список (1-10)

Альтернативи випадаючим спискам з можливістю пошуку

Залежно від ваших даних, розгляньте такі альтернативи:

Текстове поле автозаповнення

Користувач вільно вводить текст, пропозиції з’являються нижче. Це добре, коли користувачі можуть вводити значення, яких немає у вашому списку.

Каскадні випадаючі меню

Розбийте один довгий список на два коротші:

• Перший випадаючий список: Виберіть континент
• Другий випадаючий список: Виберіть країну (відфільтровано за континентом)

Перемикачі з пунктом «Інше»

Відображати 5–7 найкращих варіантів як перемикачі з опцією «Інше», яка відкриває текстове поле.

Згруповані/категоризовані параметри

Використовуйте optgroups для впорядкування опцій за категоріями:

• Північна Америка
  • Канада
  • Мексика
  • Сполучені Штати Америки
• Європа
  • Франція
  • Німеччина
  • Об'єднане Королівство

Попередньо створені списки опцій

Не винаходьте велосипед. Ось поширені списки, які вам знадобляться:

країни

195 держав-членів ООН плюс території. Розгляньте можливість розміщення поширених країн (США, Велика Британія, Канада, Австралія) зверху, а потім в алфавітному порядку.

Держав США

50 штатів плюс округ Колумбія та території. Алфавітний порядок добре працює.

Канадські провінції

13 провінцій та територій. Досить короткий термін, тому пошук необов'язковий.

Часові зони

Використовуйте стандартні ідентифікатори часових поясів (Америка/Нью-Йорк, Європа/Лондон). Групуйте за регіоном.

мови

Коди мов ISO з назвами, що відображаються. Розміщуйте поширені мови на першому місці.

Промисловість

Стандартні списки галузевої класифікації (NAICS, SIC) або власні списки для вашої аудиторії.

Висновки щодо ефективності

Дуже великі списки (понад 1000 варіантів)

Для надзвичайно великих списків:

• Варіанти завантаження на вимогу – Отримання з сервера під час введення користувачем
• Встановити мінімальну кількість символів – Потрібно 2-3 символи перед пошуком
• Обмежити кількість відображених результатів – Відображати 20 найкращих матчів, а не всі 500

Вплив завантаження сторінки

Довгі списки варіантів збільшують розмір сторінки. Для списків понад 500 варіантів врахуйте:

• Завантаження параметрів через AJAX
• Розбиття на каскадні випадні меню
• Використання пошуку на стороні сервера

Доступність

Переконайтеся, що випадаючі списки з можливістю пошуку доступні:

Навігація по клавіатурі

• Натисніть Tab, щоб сфокусувати поле
• Введіть для пошуку
• Клавіші зі стрілками для навігації по опціях
• Введіть, щоб вибрати
• Втеча, щоб закрити

Програми зчитування з екрана

• Належні мітки ARIA
• Оголосити кількість результатів
• Оголосити вибраний варіант

Візуальні показники

• Чіткі стани фокусування
• Виділений поточний варіант
• Індикатор завантаження під час пошуку

Поширені запитання

Скільки варіантів залишилося, перш ніж мені знадобиться пошук?

Увімкніть пошук для будь-якого випадаючого списку з 20+ варіантами. Для 50+ варіантів пошук є важливим. Деякі користувачі цінують пошук навіть для 10-15 варіантів.

Пошуковий запит має збігатися з самого початку чи з будь-якого місця?

Зіставлення «Будь-де» є більш поблажливим. Пошук за запитом «york» знайде «New York». Зіставлення лише на початку пошуку відбувається швидше для відомих термінів.

Чи можуть користувачі все ще прокручувати всі опції?

Так, у випадаючому списку з можливістю пошуку зазвичай спочатку відображається повний список. Пошук фільтрує його, але користувачі все одно можуть прокручувати, якщо забажають.

Що робити, якщо користувачі введуть неправильний пошуковий запит?

Базовий пошук не обробляє друкарські помилки. Для важливих полів (наприклад, країни) переконайтеся, що охоплено поширені орфографічні помилки, або використовуйте нечітке зіставлення, якщо доступне.

Чи працюють випадаючі списки з можливістю пошуку на мобільних пристроях?

Так, і вони часто кращі на мобільних пристроях, ніж стандартні випадаючі меню, тому що друкувати текст швидше, ніж гортати довгий список з крихітною областю прокручування.

Резюме

Зробіть довгі випадні списки зручними для користувача:

1. Визначте довгі списки – Будь-який випадаючий список із понад 20 варіантами
2. Увімкніть пошук – Дозволити користувачам вводити текст для фільтрації
3. Використовуйте прозорі заповнювачі – «Введіть текст для пошуку…»
4. Упорядкуйте логічно – Спочатку популярні товари, потім за алфавітом
5. Тест на мобільному пристрої – Забезпечити плавний дотик
6. Розгляньте альтернативи – Каскадні випадальні меню, згруповані опції

Висновок

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

Чи то країни, штати, продукти чи будь-який список із понад 20 варіантами, додавання функції пошуку робить ваші форми швидшими та зручнішими для користувача.

Автоматичний конструктор форм дозволяє створювати випадаючі поля з функцією пошуку, допомагаючи користувачам швидко знаходити потрібну інформацію навіть у найдовших списках.

Готові покращити свої форми? Завантажити автоматичний конструктор форм і зробіть ваші випадні списки зручними для користувача вже сьогодні.