Meniuri derulante cu funcție de căutare: Crearea unor liste lungi ușor de utilizat

O listă derulantă cu 200 de țări. O listă cu 50 de state. Sute de opțiuni de produse. Derularea prin liste lungi derulante este frustrantă - și duce la abandonul formularului.

Meniuri derulante care pot fi căutate Rezolvă problema permițând utilizatorilor să tasteze instantaneu pentru a filtra opțiunile. În loc să deruleze, aceștia tastează „poate” și văd Canada în partea de sus.

În acest ghid, veți învăța când să utilizați meniurile derulante cu funcție de căutare și cum să le configurați în formularele WordPress.

Problema cu meniurile derulante lungi

Meniurile derulante standard devin inutilizabile pe măsură ce opțiunile cresc:

Probleme legate de experiența utilizatorului

• Derulare nesfârșită – Găsirea numelui „Statele Unite” într-o listă alfabetică de țări înseamnă derularea peste 180 de țări
• Coșmarul mobil – Zone de derulare minuscule pe ecranele tactile
• Consumă timp – Utilizatorii petrec peste 10 secunde căutând o opțiune
• predispus la erori – Este ușor să selectați accidental elementul greșit
• Frustrant – Repetat pentru mai multe câmpuri derulante

Când meniurile derulante devin problematice

Cum funcționează meniurile derulante cu funcție de căutare

O listă derulantă cu funcție de căutare combină o introducere de text cu o listă derulantă:

1. Utilizatorul dă clic pe câmpul derulant
2. Apare o casetă de căutare (sau câmpul în sine devine căutabil)
3. Utilizatorul tastează câteva caractere
4. Opțiunile se filtrează în timp real pentru a se potrivi cu datele introduse
5. Utilizatorul selectează din lista scurtă filtrată

Exemplu: Selectarea țării

Fără căutare: Derulați prin peste 200 de țări pentru a găsi „Germania”

Cu căutare: Tastați „ger” → vedeți Germania, Algeria, Nigeria → faceți clic pe Germania

Timp economisit: 10+ secunde → 2 secunde

Cazuri comune de utilizare pentru listele derulante cu funcție de căutare

Selecția țării

Exemplul clasic. Cu peste 195 de țări, căutarea este esențială:

• Tastați „uni” → Statele Unite, Regatul Unit, Emiratele Arabe Unite
• Tastați „aus” → Australia, Austria
• Tastați „nou” → Noua Zeelandă, Noua Caledonie

Selectarea statului/provinciei

50 de state americane, 13 provincii canadiene sau regiuni din întreaga lume:

• Tastați „cal” → California
• Tastați „nou” → New York, New Jersey, New Hampshire, New Mexico

Categorii de produse

Site-uri de comerț electronic cu sute de tipuri de produse:

• Tip „laptop” → Laptopuri, Accesorii pentru laptopuri, Genți pentru laptopuri
• Tastați „telefon” → Telefoane, Huse de telefon, Încărcătoare de telefon

Titluri de locuri de muncă/Industrii

Formulare de carieră cu liste extinse de locuri de muncă:

• Tip „inginer” → Inginer software, Inginer constructor, Inginer mecanic
• Tip „piață” → Manager de marketing, Analist de piață, Specialist în piață

Limbă

Preferință lingvistică cu peste 100 de opțiuni:

• Tastează „span” → Spaniolă
• Tastați „bărbie” → Chineză (simplificată), Chineză (tradițională)

Universități/Școli

Listele instituțiilor de învățământ:

• Tastați „harvard” → Universitatea Harvard
• Tastați „MIT” → Institutul de Tehnologie din Massachusetts

Fusuri orare

Peste 400 de opțiuni de fus orar:

• Tip „pacific” → Pacific/Auckland, Pacific/Honolulu, SUA/Pacific
• Tastați „new york” → America/New_York

Configurarea meniurilor derulante cu funcție de căutare

Iată cum se creează meniuri derulante cu funcție de căutare cu Constructor automat de formulare:

Pasul 1: Instalați Auto Form Builder

1. Accesează Pluginuri → Adăugare nouă
2. Caută "A.F.B.„(denumirea prescurtată pentru Auto Form Builder)”
3. Găsi "AFB – Auto Form Builder – Creator de formulare cu glisare și plasare
4. Clic Instalaţi acum, Apoi Activati

Pasul 2: Adăugați un câmp derulant

1. Creați sau editați formularul
2. Trageți dropdown câmp în formularul dvs.
3. Faceți clic pentru a deschide setările

Pasul 3: Adăugați opțiunile dvs.

Introduceți lista de opțiuni. Pentru liste lungi, puteți:

• Tastați manual – Introduceți fiecare opțiune una câte una
• Adăugare în bloc – Lipiți o listă de opțiuni (una pe linie)

Pasul 4: Activați căutarea

În setările derulante, căutați Căutabil or Activați căutarea opțiune. Activați-o.

Meniul derulant va include acum o casetă de căutare/filtrare care filtrează opțiunile pe măsură ce utilizatorii tastează.

Pasul 5: Configurați comportamentul de căutare

În funcție de constructorul de formulare, puteți avea opțiuni precum:

• Caractere minime – Începeți filtrarea după tastarea a X caractere
• Poziție de căutare – Potrivire de la începutul opțiunii sau de oriunde
• Text substituent – „Scrieți pentru a căuta…” sau „Căutați țări…”

Cele mai bune practici pentru câmpurile derulante

1. Activați întotdeauna căutarea pentru peste 20 de opțiuni

Dacă meniul derulant are mai mult de 20 de opțiuni, activează căutarea. E atât de simplu. Utilizatorii îți vor mulțumi.

2. Folosește text substituent clar

Spuneți utilizatorilor că pot căuta:

• „Selectați o țară (tastați pentru a căuta)”
• „Alege-ți statul…”
• „Căutați sau selectați…”

3. Ordonați opțiunile logic

Chiar și în cazul căutării, ordinea opțiunilor contează:

• Alfabetic – Cel mai potrivit pentru nume (țări, state)
• Cel mai frecvent primul – Puneți opțiunile populare în partea de sus (SUA, Marea Britanie, Canada)
• grupate – Categorii cu separatoare

4. Includeți variante comune

Utilizatorii ar putea căuta:

• „SUA” sau „Statele Unite” sau „SUA” sau „America”
• „Regatul Unit” sau „Marea Britanie” sau „Anglia”

Dacă este posibil, includeți abrevieri comune sau variante care corespund aceleiași opțiuni.

5. Testați pe mobil

Meniurile derulante cu funcție de căutare ar trebui să funcționeze fără probleme pe dispozitivele tactile:

• Introducerea de informații în căutare este ușor de atinget
• Apare tastatura pentru tastare
• Opțiunile sunt suficient de mari pentru a fi atinse cu precizie

Când NU să folosiți listele derulante cu funcție de căutare

Meniurile derulante cu funcție de căutare nu sunt întotdeauna soluția:

Liste scurte (sub 10 opțiuni)

Pentru 5-10 opțiuni, o listă derulantă standard este mai rapidă. Nu este nevoie să tastați când puteți vedea totul deodată.

Când utilizatorii nu cunosc termenul exact

Căutarea necesită ca utilizatorii să știe ce să tasteze. Dacă răsfoiesc/explorează opțiuni, o listă categorizată sau butoane radio ar putea funcționa mai bine.

Da/Nu sau Opțiuni Binare

Folosește butoane radio. Două opțiuni nu necesită deloc un meniu derulant.

Intervale numerice

Pentru intervalele de vârstă sau selecția cantității, luați în considerare:

• Câmp de introducere a numărului
• Cursor
• Meniu derulant scurt (1-10)

Alternative la meniurile derulante cu funcție de căutare

În funcție de datele de care dispuneți, luați în considerare aceste alternative:

Câmp de text cu completare automată

Utilizatorul tastează liber, sugestiile apar mai jos. Este util atunci când utilizatorii ar putea introduce valori care nu se află în lista dvs.

Meniuri derulante în cascadă

Împărțiți o listă lungă în două listă mai scurtă:

• Prima listă derulantă: Selectați continentul
• A doua meniu derulant: Selectați țara (filtrată după continent)

Butoane radio cu „Altele”

Afișează primele 5-7 opțiuni ca butoane radio cu o opțiune „Altele” care dezvăluie un câmp de text.

Opțiuni grupate/categorizate

Folosește optgroups pentru a organiza opțiunile după categorie:

• America de Nord
  • Canada
  • Mexico
  • Statele Unite
• Europa
  • France
  • Germania
  • United Kingdom

Liste de opțiuni predefinite

Nu reinventa roata. Iată câteva liste comune de care vei avea nevoie:

Țări

195 de state membre ale ONU plus teritorii. Luați în considerare plasarea țărilor comune (SUA, Regatul Unit, Canada, Australia) în partea de sus, apoi în ordine alfabetică.

Statele SUA

50 de state plus DC și teritorii. Alfabetul funcționează bine.

provinciile canadiene

13 provincii și teritorii. Suficient de scurt încât căutarea este opțională.

Fusuri orare

Folosește identificatori standard de fus orar (America/New_York, Europa/Londra). Grupează după regiune.

Limbă

Coduri ISO de limbă cu nume afișate. Puneți limbile comune pe primul loc.

industrii

Liste standard de clasificare a industriilor (NAICS, SIC) sau liste personalizate pentru publicul dvs.

Considerații de performanță

Liste foarte mari (peste 1000 de opțiuni)

Pentru liste extrem de mari:

• Opțiuni de încărcare la cerere – Preluare de pe server ca tipuri de utilizatori
• Setați un număr minim de caractere – Necesită 2-3 caractere înainte de căutare
• Limită rezultate afișate – Afișează primele 20 de meciuri, nu toate cele 500

Impactul încărcării paginii

Listele lungi de opțiuni măresc dimensiunea paginii. Pentru liste cu peste 500 de opțiuni, luați în considerare:

• Opțiuni de încărcare prin AJAX
• Intrarea în meniuri derulante în cascadă
• Utilizarea căutării pe server

Accesibilitate

Asigurați-vă că meniurile derulante cu funcție de căutare sunt accesibile:

Navigare prin tastatură

• Tab pentru a focaliza câmpul
• Tastați pentru a căuta
• Taste săgeată pentru navigare prin opțiuni
• Enter pentru a selecta
• Escape pentru a închide

Cititoare de ecran

• Etichete ARIA adecvate
• Anunțați numărul de rezultate
• Anunțați opțiunea selectată

Indicatori vizuali

• Stări clare de focalizare
• Opțiunea curentă evidențiată
• Indicator de încărcare în timpul căutării

Întrebări frecvente

Câte opțiuni sunt înainte să fie nevoie să caut?

Activează căutarea pentru orice meniu derulant cu peste 20 de opțiuni. Pentru peste 50 de opțiuni, căutarea este esențială. Unii utilizatori apreciază căutarea chiar și pentru 10-15 opțiuni.

Ar trebui ca rezultatele căutării să corespundă de la început sau de oriunde?

Potrivirea termenilor „oriunde” este mai permisivă. Dacă căutați „york”, veți găsi „New York”. Potrivirea doar la început este mai rapidă pentru termenii cunoscuți.

Pot utilizatorii să deruleze în continuare prin toate opțiunile?

Da, meniurile derulante cu funcție de căutare afișează de obicei inițial lista completă. Căutarea o filtrează în jos, dar utilizatorii pot derula în continuare dacă preferă.

Ce se întâmplă dacă utilizatorii scriu greșit căutarea?

Căutarea simplă nu gestionează greșelile de scriere. Pentru câmpurile importante (cum ar fi țara), asigurați-vă că sunt acoperite greșelile de ortografie comune sau folosiți potrivirea fuzzy, dacă este disponibilă.

Funcționează meniurile derulante cu funcție de căutare pe mobil?

Da, și adesea sunt mai bune pe mobil decât meniurile derulante standard, deoarece tastarea este mai rapidă decât derularea printr-o listă lungă cu o zonă de derulare mică.

Rezumat

Faceți listele derulante lungi ușor de utilizat:

1. Identificați liste lungi – Orice meniu derulant cu peste 20 de opțiuni
2. Activați căutarea – Permiteți utilizatorilor să tasteze pentru a filtra
3. Folosește substituenți transparenți – „Scrie pentru a căuta…”
4. Ordonează logic – Articolele populare mai întâi, apoi alfabetic
5. Testează pe mobil – Asigură o experiență tactilă fluidă
6. Luați în considerare alternative – Meniuri derulante în cascadă, opțiuni grupate

Concluzie

Listele lungi derulante diminuează ratele de completare a formularelor. Meniuri derulante care pot fi căutate transformă experiența — utilizatorii găsesc opțiunea în câteva secunde, în loc să deruleze la nesfârșit.

Fie că este vorba de țări, state, produse sau orice listă cu peste 20 de opțiuni, adăugarea funcționalității de căutare face ca formularele tale să fie mai rapide și mai ușor de utilizat.

Constructor automat de formulare vă permite să creați câmpuri derulante cu funcționalitate de căutare, ajutând utilizatorii să găsească rapid ceea ce au nevoie chiar și în cele mai lungi liste.

Ești gata să-ți îmbunătățești formularele? Descărcați Auto Form Builder și faceți listele derulante ușor de utilizat chiar astăzi.