Падащи менюта с възможност за търсене: Създаване на дълги списъци, удобни за потребителя
Падащо меню с 200 държави. Списък с 50 щата. Стотици опции за продукти. Превъртането през дълги падащи списъци е разочароващо и води до изоставяне на формуляри.
Падащи менюта с възможност за търсене Решете това, като позволите на потребителите да филтрират опциите мигновено чрез въвеждане. Вместо да превъртат, те въвеждат „can“ и виждат Канада най-отгоре.
В това ръководство ще научите кога да използвате падащи менюта с възможност за търсене и как да ги настроите във вашите WordPress формуляри.
Проблемът с дългите падащи менюта
Стандартните падащи менюта стават неизползваеми с увеличаване на опциите:
Проблеми с потребителското изживяване
- Безкрайно скролиране – Намирането на „Съединени щати“ в азбучен списък с държави означава превъртане през над 180 държави
- Мобилен кошмар – Малки области за превъртане на сензорни екрани
- Времеемко – Потребителите прекарват над 10 секунди в търсене на една опция
- Податливи на грешки – Лесно е случайно да изберете грешен артикул
- Разочароващ – Повтаря се за множество падащи полета
Когато падащите менюта станат проблематични
| Брой опции | Потребителско възприятие |
|---|---|
| 5-10 варианта | ✅ Лесен за сканиране |
| 10-20 варианта | ⚠️ Управляемо |
| 20-50 варианта | ⚠️ Става досадно |
| 50+ опции | ❌ Необходимо е търсене |
| 100+ опции | ❌ Търсенето е от съществено значение |
Как работят падащите менюта с възможност за търсене
Падащо меню с възможност за търсене комбинира въвеждане на текст с падащ списък:
- Потребителят кликва върху падащото поле
- Появява се поле за търсене (или самото поле става достъпно за търсене)
- Потребителят въвежда няколко символа
- Опциите се филтрират в реално време, за да съответстват на входните данни
- Потребителят избира от филтрирания кратък списък
Пример: Избор на държава
Без търсене: Превъртете през над 200 държави, за да намерите „Германия“
С търсене: Въведете „ger“ → вижте Германия, Алжир, Нигерия → кликнете върху Германия
Спестено време: 10+ секунди → 2 секунди
Често срещани случаи на употреба на падащи менюта с възможност за търсене
Избор на държава
Класическият пример. С над 195 държави, търсенето е от съществено значение:
- Въведете „uni“ → Съединени щати, Великобритания, Обединени арабски емирства
- Въведете „aus“ → Австралия, Австрия
- Въведете „нов“ → Нова Зеландия, Нова Каледония
Избор на щат/провинция
50 щата на САЩ, 13 канадски провинции или региони по целия свят:
- Въведете „cal“ → Калифорния
- Въведете „нов“ → Ню Йорк, Ню Джърси, Ню Хемпшир, Ню Мексико
Продуктови категории
Сайтове за електронна търговия със стотици видове продукти:
- Въведете „лаптоп“ → Лаптопи, Аксесоари за лаптопи, Чанти за лаптопи
- Въведете „телефон“ → Телефони, Калъфи за телефони, Зарядни за телефони
Длъжности/Отрасли
Формуляри за кариера с обширни списъци с работни места:
- Въведете „инженер“ → Софтуерен инженер, Строителен инженер, Машинен инженер
- Въведете „пазар“ → Маркетинг мениджър, Пазарен анализатор, Специалист по пазарни услуги
Езици
Предпочитан език с над 100 опции:
- Въведете „span“ → Испански
- Тип „брадичка“ → Китайски (опростен), Китайски (традиционен)
Университети/Училища
Списъци с образователни институции:
- Въведете „харвард“ → Харвардски университет
- Въведете „MIT“ → Масачузетски технологичен институт
Времеви зони
Над 400 опции за часови зони:
- Въведете „тихоокеански“ → Тихоокеански/Окланд, Тихоокеански/Хонолулу, САЩ/Тихоокеански
- Въведете „ню Йорк“ → Америка/Ню_Йорк
Настройване на падащи менюта с възможност за търсене
Ето как да създадете падащи менюта с възможност за търсене с Автоматичен конструктор на формуляри:
Стъпка 1: Инсталирайте Auto Form Builder
- Отиди Приставки → Добавяне на нови
- Търся "A.F.B.„(съкратеното име за Auto Form Builder)“
- Намирам "AFB – Auto Form Builder – Създател на формуляри с плъзгане и пускане"
- Кликнете инсталиране Сега, тогава Активирате
Стъпка 2: Добавяне на падащо поле
- Създайте или редактирайте формуляра си
- Плъзнете Падащо поле във формуляра си
- Кликнете, за да отворите настройките
Стъпка 3: Добавете вашите опции
Въведете списъка си с опции. За дълги списъци можете:
- Въведете ръчно – Въведете всяка опция една по една
- Групово добавяне – Поставете списък с опции (по една на ред)
Стъпка 4: Активиране на търсенето
В настройките на падащото меню потърсете За търсене or Активиране на търсенето опция. Включете го.
Падащото меню вече ще включва поле за търсене/филтриране, което филтрира опциите, докато потребителите въвеждат.
Стъпка 5: Конфигуриране на поведението при търсене
В зависимост от вашия конструктор на формуляри, може да имате опции като:
- Минимален брой знаци – Започнете филтрирането след въвеждане на X символа
- Позиция за търсене – Съвпадение от началото на опцията или от всяко друго място
- Текст на заместител – „Въведете текст, за да търсите…“ или „Търсене по държави…“
Най-добри практики за полета в падащото меню
1. Винаги активирайте търсенето за 20+ опции
Ако падащото ви меню има повече от 20 опции, активирайте търсенето. Толкова е просто. Потребителите ще ви благодарят.
2. Използвайте ясен текст-заместител
Кажете на потребителите, че могат да търсят:
- „Изберете държава (въведете текст за търсене)“
- „Изберете си щат…“
- „Търсене или избор…“
3. Логично подредете опциите
Дори при търсене, редът на опциите има значение:
- По азбучен ред – Най-подходящо за имена (държави, щати)
- Най-често срещаните първи – Поставете популярните опции на върха (САЩ, Великобритания, Канада)
- Групирани – Категории с разделители
4. Включете често срещани вариации
Потребителите може да търсят:
- „САЩ“ или „Съединени щати“ или „САЩ“ или „Америка“
- „UK“ или „Обединено кралство“ или „Великобритания“ или „Англия“
Ако е възможно, включете често срещани съкращения или варианти, които съответстват на една и съща опция.
5. Тествайте на мобилно устройство
Падащите менюта с възможност за търсене би трябвало да работят безпроблемно на сензорни устройства:
- Търсенето е лесно достъпно чрез докосване
- Клавиатурата се появява за въвеждане
- Опциите са достатъчно големи, за да се докосва прецизно
Кога НЕ е добре да използвате падащи менюта с възможност за търсене
Падащите менюта с възможност за търсене не винаги са решението:
Кратки списъци (под 10 опции)
За 5-10 опции, стандартното падащо меню е по-бързо. Няма нужда да пишете, когато можете да видите всичко наведнъж.
Когато потребителите не знаят точния термин
Търсенето изисква потребителите да знаят какво да пишат. Ако разглеждат/проучват опции, категоризиран списък или радио бутони може да работят по-добре.
Да/Не или двоичен избор
Използвайте вместо това радио бутони. Две опции изобщо не се нуждаят от падащо меню.
Числови диапазони
За избор на възрастови групи или количество, помислете за:
- Поле за въвеждане на число
- Slider
- Кратко падащо меню (1-10)
Алтернативи на падащите менюта с възможност за търсене
В зависимост от вашите данни, помислете за следните алтернативи:
Текстово поле за автоматично попълване
Потребителят пише свободно, предложенията се показват по-долу. Подходящо е, когато потребителите въвеждат стойности, които не са във вашия списък.
Каскадни падащи менюта
Разделете един дълъг списък на два по-кратки:
- Първо падащо меню: Изберете континент
- Второ падащо меню: Изберете държава (филтрирано по континент)
Радио бутони с „Друго“
Показване на първите 5-7 опции като радио бутони с опция „Други“, която разкрива текстово поле.
Групирани/категоризирани опции
Използвайте optgroups, за да организирате опциите по категории:
- Северна Америка
- Канада
- Мексико
- Съединени щати
- Европа
- Франция
- Германия
- Великобритания
Предварително изградени списъци с опции
Не преоткривайте колелото. Ето често срещани списъци, от които ще имате нужда:
Държави
195 държави-членки на ООН плюс територии. Помислете дали да не поставите най-често срещаните държави (САЩ, Великобритания, Канада, Австралия) най-отгоре, а след това по азбучен ред.
САЩ
50 щата плюс Вашингтон и територии. Подреждането по азбучен ред работи добре.
Канадски провинции
13 провинции и територии. Достатъчно кратко, че търсенето е по избор.
Времеви зони
Използвайте стандартни идентификатори на часови зони (Америка/Ню Йорк, Европа/Лондон). Групирайте по регион.
Езици
ISO езикови кодове с показвани имена. Поставете често срещаните езици на първо място.
Industries
Стандартни списъци за класификация на индустрията (NAICS, SIC) или персонализирани списъци за вашата аудитория.
Съображения за производителност
Много големи списъци (над 1000 опции)
За изключително големи списъци:
- Опции за зареждане при поискване – Извличане от сървъра, когато потребителят въведе данни
- Задайте минимален брой знаци – Изискват се 2-3 символа преди търсене
- Ограничаване на показаните резултати – Показване на първите 20 мача, не на всичките 500
Въздействие при зареждане на страницата
Дългите списъци с опции увеличават размера на страницата. За списъци с над 500 опции, помислете за следното:
- Опции за зареждане чрез AJAX
- Разбиване на каскадни падащи менюта
- Използване на търсене от страна на сървъра
Достъпност
Уверете се, че падащите менюта с възможност за търсене са достъпни:
Навигация с клавиатура
- Натиснете Tab, за да фокусирате полето
- Въведете за търсене
- Клавиши със стрелки за навигиране в опциите
- Въведете, за да изберете
- Бягство, за да затворите
Екранни четци
- Правилни ARIA етикети
- Обявете броя на резултатите
- Обявяване на избраната опция
Визуални индикатори
- Ясни състояния на фокус
- Маркирана текуща опция
- Индикатор за зареждане по време на търсене
Често задавани въпроси
Колко опции имам, преди да ми се наложи търсене?
Активирайте търсенето за всяко падащо меню с 20+ опции. За 50+ опции търсенето е от съществено значение. Някои потребители оценяват търсенето дори за 10-15 опции.
Търсенето трябва ли да съвпада от самото начало или от всяко друго място?
Съвпадението „Навсякъде“ е по-лесно за намиране. Търсенето на „york“ открива „New York“. Съвпадението само в началото е по-бързо за известни термини.
Могат ли потребителите все още да превъртат през всички опции?
Да, падащите менюта с възможност за търсене обикновено показват пълния списък първоначално. Търсенето го филтрира надолу, но потребителите все още могат да превъртат, ако предпочитат.
Ами ако потребителите изпишат погрешно търсенето си?
Основното търсене не обработва печатни грешки. За важни полета (като държава) се уверете, че са покрити често срещани правописни грешки или използвайте размито съвпадение, ако е възможно.
Работят ли падащите менюта с възможност за търсене на мобилни устройства?
Да, и те често са по-добри на мобилни устройства от стандартните падащи менюта, защото писането е по-бързо от превъртането през дълъг списък с малка област за превъртане.
Oбобщение
Направете дългите падащи списъци лесни за ползване:
- Идентифицирайте дълги списъци – Всяко падащо меню с над 20 опции
- Активиране на търсенето – Позволете на потребителите да въвеждат, за да филтрират
- Използвайте ясни заместители – „Въведете текст, за да търсите…“
- Подредете логично – Първо популярни артикули, след това по азбучен ред
- Тествайте на мобилно устройство – Осигурете плавно изживяване при докосване
- Помислете за алтернативи – Каскадни падащи менюта, групирани опции
Заключение
Дългите падащи списъци намаляват процента на попълване на формуляри. Падащи менюта с възможност за търсене трансформирайте преживяването – потребителите намират желаната опция за секунди, вместо да скролват безкрайно.
Независимо дали става въпрос за държави, щати, продукти или който и да е списък с над 20 опции, добавянето на функция за търсене прави формулярите ви по-бързи и по-лесни за ползване.
Автоматичен конструктор на формуляри ви позволява да създавате падащи полета с функция за търсене, помагайки на потребителите бързо да намерят това, което им е необходимо, дори в най-дългите списъци.
Готови ли сте да подобрите формите си? Изтегляне на Auto Form Builder и направете падащите си списъци лесни за ползване още днес.
