Przeszukiwalne listy rozwijane: tworzenie długich list przyjaznych dla użytkownika

Lista rozwijana z 200 krajami. Lista 50 stanów. Setki produktów do wyboru. Przewijanie długich list rozwijanych jest frustrujące i powoduje porzucanie formularzy.

Przeszukiwalne listy rozwijane Rozwiąż ten problem, pozwalając użytkownikom na natychmiastowe filtrowanie opcji za pomocą wpisywania. Zamiast przewijania, wpisują „can” i widzą Kanadę na górze.

W tym przewodniku dowiesz się, kiedy korzystać z wyszukiwalnych list rozwijanych i jak je skonfigurować w formularzach WordPress.

Problem z długimi listami rozwijanymi

Standardowe listy rozwijane stają się bezużyteczne wraz ze wzrostem liczby opcji:

Problemy z doświadczeniem użytkownika

• Ciągłe przesuwanie – Znalezienie „Stanów Zjednoczonych” na alfabetycznej liście krajów oznacza przewinięcie listy ponad 180 krajów
• Mobilny koszmar – Małe obszary przewijania na ekranach dotykowych
• Czasochłonne – Użytkownicy spędzają ponad 10 sekund na znalezieniu jednej opcji
• Podatne na błędy – Łatwo przypadkowo wybrać zły przedmiot
• Denerwujący – Powtarzane dla wielu pól rozwijanych

Kiedy rozwijane menu staje się problematyczne

Jak działają rozwijane listy wyszukiwania

Lista rozwijana z możliwością wyszukiwania łączy wpisany tekst z listą rozwijaną:

1. Użytkownik klika pole rozwijane
2. Pojawia się pole wyszukiwania (lub samo pole staje się przeszukiwalne)
3. Użytkownik wpisuje kilka znaków
4. Opcje filtrują się w czasie rzeczywistym, aby dopasować się do danych wejściowych
5. Użytkownik dokonuje wyboru z przefiltrowanej listy skróconej

Przykład: Wybór kraju

Bez wyszukiwania: Przewiń listę ponad 200 krajów, aby znaleźć „Niemcy”

Z wyszukiwaniem: Wpisz „ger” → zobacz Niemcy, Algieria, Nigeria → kliknij Niemcy

Oszczędność czasu: 10+ sekund → 2 sekundy

Typowe przypadki użycia przeszukiwalnych list rozwijanych

Wybór kraju

Klasyczny przykład. Przy ponad 195 krajach wyszukiwanie jest niezbędne:

• Wpisz „uni” → Stany Zjednoczone, Wielka Brytania, Zjednoczone Emiraty Arabskie
• Wpisz „aus” → Australia, Austria
• Wpisz „nowy” → Nowa Zelandia, Nowa Kaledonia

Wybór stanu/prowincji

50 stanów USA, 13 prowincji Kanady lub regionów na całym świecie:

• Wpisz „cal” → Kalifornia
• Wpisz „nowy” → Nowy Jork, New Jersey, New Hampshire, Nowy Meksyk

Termin oddania

Witryny e-commerce oferujące setki typów produktów:

• Wpisz „laptop” → Laptopy, Akcesoria do laptopów, Torby na laptopy
• Wpisz „telefon” → Telefony, Etui na telefony, Ładowarki do telefonów

Stanowiska/Branże

Formularze kariery z obszernymi listami stanowisk:

• Wpisz „inżynier” → Inżynier oprogramowania, Inżynier budownictwa, Inżynier mechanik
• Wpisz „rynek” → Menedżer ds. marketingu, Analityk rynku, Specjalista ds. rynku

Języki

Preferencje językowe spośród ponad 100 opcji:

• Wpisz „span” → hiszpański
• Wpisz „chin” → chiński (uproszczony), chiński (tradycyjny)

Uniwersytety/Szkoły

Listy placówek edukacyjnych:

• Wpisz „harvard” → Uniwersytet Harvarda
• Wpisz „MIT” → Massachusetts Institute of Technology

Strefy czasowe

Ponad 400 opcji stref czasowych:

• Wpisz „pacific” → Pacific/Auckland, Pacific/Honolulu, US/Pacific
• Wpisz „nowy jork” → Ameryka/Nowy_Jork

Konfigurowanie przeszukiwalnych list rozwijanych

Oto jak utworzyć przeszukiwalne listy rozwijane za pomocą Automatyczny kreator formularzy:

Krok 1: Zainstaluj Auto Form Builder

1. Iść do Wtyczki → Dodaj nowy
2. Szukać "A.F.B.(skrócona nazwa Auto Form Builder)
3. Odnaleźć "AFB – Automatyczny kreator formularzy – Kreator formularzy typu „przeciągnij i upuść”"
4. Kliknij zainstaluj teraz, następnie Aktywuj

Krok 2: Dodaj pole rozwijane

1. Utwórz lub edytuj swój formularz
2. Przeciągnij Dropdown pole do formularza
3. Kliknij, aby otworzyć ustawienia

Krok 3: Dodaj swoje opcje

Wprowadź swoją listę opcji. W przypadku długich list możesz:

• Wpisz ręcznie – Wprowadź każdą opcję po kolei
• Dodawanie zbiorcze – Wklej listę opcji (po jednej w każdym wierszu)

Krok 4: Włącz wyszukiwanie

W ustawieniach rozwijanych poszukaj Możliwość wyszukiwania or Włącz wyszukiwanie opcja. Włącz ją.

Lista rozwijana będzie teraz zawierać pole wyszukiwania/filtrowania, które filtruje opcje w miarę wpisywania tekstu przez użytkownika.

Krok 5: Skonfiguruj zachowanie wyszukiwania

W zależności od narzędzia do tworzenia formularzy możesz mieć do wyboru następujące opcje:

• Minimalna liczba znaków – Rozpocznij filtrowanie po wpisaniu X znaków
• Pozycja wyszukiwania – Dopasuj od początku opcji lub gdziekolwiek indziej
• Tekst zastępczy – „Wpisz, aby wyszukać…” lub „Szukaj w krajach…”

Najlepsze praktyki dotyczące pól rozwijanych

1. Zawsze włączaj wyszukiwanie dla ponad 20 opcji

Jeśli lista rozwijana zawiera więcej niż 20 opcji, włącz wyszukiwanie. To takie proste. Użytkownicy będą Ci wdzięczni.

2. Użyj wyraźnego tekstu zastępczego

Poinformuj użytkowników, że mogą wyszukiwać:

• „Wybierz kraj (wpisz, aby wyszukać)”
• „Wybierz swój stan…”
• „Szukaj lub wybierz…”

3. Logiczne zamawianie opcji

Nawet podczas wyszukiwania kolejność opcji ma znaczenie:

• Alfabetyczny – Najlepiej w przypadku nazw (kraje, stany)
• Najczęściej pierwszy – Umieść popularne opcje na górze (USA, Wielka Brytania, Kanada)
• zgrupowane – Kategorie z separatorami

4. Uwzględnij popularne warianty

Użytkownicy mogą szukać:

• „USA” lub „Stany Zjednoczone” lub „US” lub „Ameryka”
• „UK” lub „Zjednoczone Królestwo” lub „Brytania” lub „Anglia”

Jeśli to możliwe, uwzględnij powszechnie stosowane skróty lub warianty oznaczające tę samą opcję.

5. Przetestuj na urządzeniu mobilnym

Rozwijane listy wyszukiwania powinny działać płynnie na urządzeniach dotykowych:

• Wprowadzanie danych wyszukiwania jest łatwe i intuicyjne
• Pojawia się klawiatura do pisania
• Opcje są wystarczająco duże, aby móc precyzyjnie wybierać

Kiedy NIE używać rozwijanych list wyszukiwania

Rozwijane listy wyszukiwania nie zawsze są rozwiązaniem:

Krótkie listy (poniżej 10 opcji)

W przypadku 5–10 opcji standardowa lista rozwijana jest szybsza. Nie musisz nic pisać, skoro wszystko widzisz naraz.

Kiedy użytkownicy nie znają dokładnego terminu

Wyszukiwanie wymaga od użytkowników wiedzy, co wpisać. Jeśli przeglądają/eksplorują opcje, lepszym rozwiązaniem może być lista kategorii lub przyciski radiowe.

Tak/Nie lub wybory binarne

Zamiast tego użyj przycisków radiowych. Dwie opcje w ogóle nie potrzebują listy rozwijanej.

Zakresy liczbowe

Przy wyborze przedziałów wiekowych lub ilości należy wziąć pod uwagę:

• Pole wprowadzania liczb
• Slider
• Krótkie menu rozwijane (1-10)

Alternatywy dla rozwijanych menu przeszukiwalnych

W zależności od posiadanych danych, rozważ następujące alternatywy:

Pole tekstowe z automatycznym uzupełnianiem

Użytkownik może swobodnie wpisywać, a sugestie pojawiają się poniżej. Przydatne, gdy użytkownicy mogą wprowadzać wartości spoza listy.

Kaskadowe menu rozwijane

Podziel jedną długą listę na dwie krótsze:

• Pierwsze menu rozwijane: Wybierz kontynent
• Druga lista rozwijana: Wybierz kraj (filtrowany według kontynentu)

Przyciski radiowe z opcją „Inne”

Wyświetlaj 5–7 najlepszych opcji jako przyciski radiowe z opcją „Inne”, która ukazuje pole tekstowe.

Opcje grupowane/kategoryzowane

Użyj optgroups do uporządkowania opcji według kategorii:

• Ameryka Północna
  • Kanada
  • Meksyk
  • United States
• Europa
  • Francja
  • Niemcy
  • Wielka Brytania

Wstępnie zbudowane listy opcji

Nie wymyślaj koła na nowo. Oto popularne listy, których będziesz potrzebować:

Kraje

195 państw członkowskich ONZ wraz z terytoriami. Rozważ umieszczenie wspólnych krajów (USA, Wielka Brytania, Kanada, Australia) na górze, a następnie w kolejności alfabetycznej.

Stany Zjednoczone

50 stanów plus Dystrykt Kolumbii i terytoria. Alfabetycznie działa dobrze.

Prowincje kanadyjskie

13 prowincji i terytoriów. Na tyle krótki, że wyszukiwanie jest opcjonalne.

Strefy czasowe

Użyj standardowych identyfikatorów strefy czasowej (Ameryka/Nowy Jork, Europa/Londyn). Grupuj według regionu.

Języki

Kody języków ISO z nazwami wyświetlanymi. Na pierwszym miejscu stawiaj popularne języki.

Branże

Standardowe listy klasyfikacji branżowej (NAICS, SIC) lub listy niestandardowe dla Twojej grupy odbiorców.

Rozważania dotyczące wydajności

Bardzo duże listy (ponad 1000 opcji)

W przypadku bardzo dużych list:

• Opcje ładowania na żądanie – Pobierz z serwera jako typy użytkownika
• Ustaw minimalną liczbę znaków – Wymagaj 2-3 znaków przed wyszukiwaniem
• Wyświetlono wyniki limitu – Wyświetlaj 20 najlepszych wyników, a nie wszystkie 500

Wpływ ładowania strony

Długie listy opcji zwiększają rozmiar strony. W przypadku list zawierających ponad 500 opcji, rozważ:

• Ładowanie opcji przez AJAX
• Przechodzenie do kaskadowych menu rozwijanych
• Korzystanie z wyszukiwania po stronie serwera

Dostępność bez barier

Upewnij się, że rozwijane listy wyszukiwania są dostępne:

Nawigacja za pomocą klawiatury

• Naciśnij klawisz Tab, aby ustawić ostrość pola
• Wpisz, aby wyszukać
• Klawisze strzałek do nawigacji po opcjach
• Wprowadź, aby wybrać
• Ucieczka do zamknięcia

Czytniki ekranu

• Właściwe etykiety ARIA
• Ogłoś liczbę wyników
• Ogłoś wybraną opcję

Wskaźniki wizualne

• Wyraźne stany skupienia
• Podświetlona aktualna opcja
• Wskaźnik ładowania podczas wyszukiwania

Najczęściej zadawane pytania

Ile opcji jest dostępnych zanim zacznę szukać?

Włącz wyszukiwanie w dowolnym menu rozwijanym z ponad 20 opcjami. Przy ponad 50 opcjach wyszukiwanie jest niezbędne. Niektórzy użytkownicy doceniają wyszukiwanie nawet w 10-15 opcjach.

Czy wyszukiwanie ma się odbywać od początku czy gdziekolwiek?

Dopasowanie „Anywhere” jest bardziej wyrozumiałe. Wyszukiwanie „york” powoduje znalezienie „New York”. Dopasowanie tylko do początku jest szybsze w przypadku znanych terminów.

Czy użytkownicy nadal mogą przewijać wszystkie opcje?

Tak, rozwijane listy wyszukiwania zazwyczaj początkowo pokazują pełną listę. Wyszukiwanie filtruje ją w dół, ale użytkownicy nadal mogą przewijać, jeśli wolą.

A co jeśli użytkownicy popełnią błąd wpisując wyszukiwane hasło?

Wyszukiwanie podstawowe nie obsługuje literówek. W przypadku ważnych pól (takich jak kraj) upewnij się, że uwzględnione są częste błędy ortograficzne lub skorzystaj z dopasowania przybliżonego, jeśli jest dostępne.

Czy rozwijane listy wyszukiwania działają na urządzeniach mobilnych?

Tak. Często sprawdzają się na urządzeniach mobilnych lepiej niż standardowe listy rozwijane, ponieważ pisanie jest szybsze niż przewijanie długiej listy z małym obszarem przewijania.

Podsumowanie

Uczyń długie listy rozwijane przyjaznymi dla użytkownika:

1. Identyfikuj długie listy – Dowolna lista rozwijana z ponad 20 opcjami
2. Włącz wyszukiwanie – Pozwól użytkownikom wpisywać, aby filtrować
3. Użyj wyraźnych symboli zastępczych – „Wpisz, aby wyszukać…”
4. Uporządkuj logicznie – Najpierw popularne pozycje, potem alfabetycznie
5. Test na urządzeniu mobilnym – Zapewnij płynne wrażenia dotykowe
6. Rozważ alternatywy – Kaskadowe listy rozwijane, opcje grupowane

Wniosek

Długie listy rozwijane obniżają wskaźnik wypełniania formularzy. Przeszukiwalne listy rozwijane Przekształć doświadczenie — użytkownicy znajdą potrzebne opcje w ciągu kilku sekund, zamiast przewijać je w nieskończoność.

Niezależnie od tego, czy chodzi o kraje, stany, produkty czy jakąkolwiek listę zawierającą ponad 20 opcji, dodanie funkcji wyszukiwania sprawi, że Twoje formularze będą szybsze i bardziej przyjazne dla użytkownika.

Automatyczny kreator formularzy umożliwia tworzenie pól rozwijanych z funkcją wyszukiwania, dzięki czemu użytkownicy mogą szybko znaleźć to, czego potrzebują, nawet na najdłuższych listach.

Gotowy na udoskonalenie swoich formularzy? Pobierz Auto Form Builder i już dziś zadbaj o to, aby Twoje listy rozwijane były przyjazne dla użytkownika.