Выпадающие списки с возможностью поиска: как сделать длинные списки удобными для пользователя.

Выпадающий список из 200 стран. Список из 50 штатов. Сотни вариантов товаров. Прокрутка длинных выпадающих списков вызывает раздражение и приводит к отказу от заполнения формы.

Поисковые выпадающие списки Решите эту проблему, позволив пользователям мгновенно вводить текст для фильтрации. Вместо прокрутки они вводят «can» и видят Канаду вверху списка.

В этом руководстве вы узнаете, когда следует использовать выпадающие списки с возможностью поиска и как настроить их в формах WordPress.

Проблема длинных выпадающих списков

Стандартные выпадающие списки становятся непригодными для использования по мере увеличения количества вариантов:

Проблемы с пользовательским опытом

• Бесконечная прокрутка — Чтобы найти «Соединенные Штаты» в алфавитном списке стран, нужно пролистать более 180 стран.
• Мобильный кошмар – Миниатюрные области прокрутки на сенсорных экранах
• Кропотливый – Пользователи тратят более 10 секунд на поиск одного варианта.
• Подвержен ошибкам – Легко случайно выбрать не тот товар
• Разочаровывающий – Повторить для нескольких выпадающих списков

Когда выпадающие списки становятся проблематичными

Как работают выпадающие списки с возможностью поиска

Выпадающий список с возможностью поиска объединяет текстовое поле ввода и выпадающий список:

1. Пользователь нажимает на выпадающее поле
2. Появляется поле поиска (или само поле становится доступным для поиска).
3. Пользователь вводит несколько символов.
4. Фильтр параметров работает в режиме реального времени, чтобы соответствовать введенным данным.
5. Пользователь выбирает из отфильтрованного короткого списка.

Пример: Выбор страны

Без поиска: Пролистайте более 200 стран, чтобы найти «Германия».

С помощью поиска: Введите «ger» → см. Германия, Алжир, Нигерия → нажмите Германия

Сэкономленное время: более 10 секунд → 2 секунды

Типичные сценарии использования выпадающих списков с возможностью поиска

Выбор страны

Классический пример. При наличии более 195 стран поиск просто необходим:

• Введите “uni” → Соединенные Штаты, Соединенное Королевство, Объединенные Арабские Эмираты
• Введите «aus» → Австралия, Австрия.
• Введите «новый» → Новая Зеландия, Новая Каледония

Выбор штата/провинции

50 штатов США, 13 провинций Канады или регионов по всему миру:

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

Категории продукта

Сайты электронной коммерции с сотнями наименований товаров:

• Введите «ноутбук» → Ноутбуки, Аксессуары для ноутбуков, Сумки для ноутбуков
• Введите «телефон» → Телефоны, Чехлы для телефонов, Зарядные устройства для телефонов

Должности/Отрасли

Бланки заявлений о трудоустройстве с подробным списком вакансий:

• Введите «инженер» → Программист, Инженер-строитель, Инженер-механик
• Введите «рынок» → Менеджер по маркетингу, Аналитик рынка, Специалист по рыночным площадкам

Языки

Выбор языка с более чем 100 вариантами:

• Введите “span” → Spanish
• Введите «chin» → Китайский (упрощенный), Китайский (традиционный)

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

Список образовательных учреждений:

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

Часовые пояса

Более 400 вариантов часовых поясов:

• Введите “pacific” → Pacific/Auckland, Pacific/Honolulu, US/Pacific
• Введите “new york” → America/New_York

Настройка выпадающих списков с возможностью поиска

Вот как создать выпадающие списки с возможностью поиска. Автоматический конструктор форм:

Шаг 1: Установите Auto Form Builder

1. Перейдите на Плагины → Добавить новый
2. Искать "AFB(сокращенное название 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 провинций и территорий. Достаточно короткий список, поэтому поиск необязателен.

Часовые пояса

Используйте стандартные идентификаторы часовых поясов (America/New_York, Europe/London). Группируйте по регионам.

Языки

Коды языков ISO с отображаемыми именами. Указывайте распространенные языки в первую очередь.

Отрасли

Стандартные отраслевые классификации (NAICS, SIC) или пользовательские списки для вашей целевой аудитории.

Соображения производительности

Очень большие списки (более 1000 вариантов)

Для очень больших списков:

• Загрузка опций по запросу – Получение данных с сервера по мере ввода пользователем текста.
• Установите минимальное количество символов – Для начала поиска требуется 2-3 символа.
• Ограничение отображаемых результатов – Отобразить 20 лучших матчей, а не все 500.

Влияние скорости загрузки страницы

Длинные списки вариантов увеличивают размер страницы. Для списков, содержащих более 500 вариантов, следует учитывать следующее:

• Загрузка параметров через AJAX
• Разбиение на каскадные выпадающие списки
• Использование поиска на стороне сервера

Универсальный доступ

Убедитесь, что выпадающие списки с возможностью поиска доступны:

Клавиатура навигации

• Нажмите Tab, чтобы сфокусироваться на поле.
• Тип поиска
• Клавиши со стрелками для навигации по параметрам
• Войдите, чтобы выбрать
• Сбежать, чтобы закрыть

Программы чтения с экрана

• Надлежащие этикетки ARIA
• Объявите количество результатов
• Объявить выбранный вариант

Визуальные индикаторы

• Четкое определение состояний фокусировки
• Выделенный текущий вариант
• Индикатор загрузки во время поиска

Часто задаваемые вопросы (FAQ)

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

Включите поиск для любого выпадающего списка с более чем 20 вариантами. Для списков с более чем 50 вариантами поиск необходим. Некоторые пользователи ценят поиск даже для 10-15 вариантов.

Поиск должен начинаться с самого начала или с любого места?

Поиск по слову «везде» более лоялен. Поиск по слову «Йорк» выдает «Нью-Йорк». Поиск только по началу слова быстрее для известных терминов.

Пользователи по-прежнему могут прокручивать все варианты?

Да, в выпадающих списках с возможностью поиска обычно изначально отображается полный список. Поиск фильтрует его, но пользователи по-прежнему могут прокручивать список, если им так удобнее.

Что произойдет, если пользователи неправильно напишут свой поисковый запрос?

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

Работают ли выпадающие списки с возможностью поиска на мобильных устройствах?

Да, и на мобильных устройствах они часто лучше, чем стандартные выпадающие списки, потому что набирать текст быстрее, чем прокручивать длинный список с крошечной областью прокрутки.

Резюме

Сделайте длинные выпадающие списки удобными для пользователя:

1. Выявить длинные списки – Любой выпадающий список с более чем 20 вариантами
2. Включить поиск – Разрешить пользователям вводить текст для фильтрации.
3. Используйте понятные заполнители – «Введите текст для поиска…»
4. упорядочить логически – Сначала популярные товары, затем в алфавитном порядке.
5. Тест на мобильном телефоне – Обеспечьте плавное сенсорное взаимодействие
6. Рассмотрите альтернативы – Каскадные выпадающие списки, сгруппированные варианты

Заключение

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

Будь то страны, штаты, товары или любой список с более чем 20 вариантами, добавление функции поиска делает ваши формы быстрее и удобнее для пользователей.

Автоматический конструктор форм Позволяет создавать выпадающие списки с функцией поиска, помогая пользователям быстро находить нужную информацию даже в самых длинных списках.

Готовы улучшить свои формы? Скачать Auto Form Builder Сделайте ваши выпадающие списки удобными для пользователей уже сегодня.