Søgbare dropdowns: Gør lange lister brugervenlige

En rullemenu med 200 lande. En liste med 50 stater. Hundredvis af produktmuligheder. Det er frustrerende at scrolle gennem lange rullelister – og det fører til, at formularen forlades.

Søgbare rullemenuer Løs dette ved at lade brugerne skrive for at filtrere muligheder med det samme. I stedet for at scrolle, skriver de "kan" og ser Canada øverst.

I denne guide lærer du, hvornår du skal bruge søgbare dropdown-menuer, og hvordan du konfigurerer dem i dine WordPress-formularer.

Problemet med lange dropdowns

Standard dropdown-menuer bliver ubrugelige, efterhånden som mulighederne øges:

Problemer med brugeroplevelse

• Uendelig scrolling – At finde "USA" i en alfabetisk landeliste betyder at scrolle forbi 180+ lande
• Mobilt mareridt – Små scroll-områder på berøringsskærme
• Tidskrævende – Brugere bruger 10+ sekunder på at finde én mulighed
• Risiko for fejl – Det er nemt at komme til at vælge den forkerte vare ved et uheld
• frustrerende – Gentaget for flere rullemenuer

Når dropdowns bliver problematiske

Sådan fungerer søgbare dropdowns

En søgbar rullemenu kombinerer tekstinput med en rullemenu:

1. Brugeren klikker på rullemenuen
2. Der vises et søgefelt (eller selve feltet bliver søgbart)
3. Brugeren skriver et par tegn
4. Indstillinger filtreres i realtid for at matche inputtet
5. Brugeren vælger fra den filtrerede korte liste

Eksempel: Valg af land

Uden søgning: Rul gennem 200+ lande for at finde "Tyskland"

Med søgning: Skriv “ger” → se Tyskland, Algeriet, Nigeria → klik på Tyskland

Tid sparet: 10+ sekunder → 2 sekunder

Almindelige anvendelsesscenarier for søgbare dropdowns

Landevalg

Det klassiske eksempel. Med over 195 lande er søgning afgørende:

• Skriv “uni” → USA, Storbritannien, Forenede Arabiske Emirater
• Skriv "aus" → Australien, Østrig
• Skriv "ny" → New Zealand, Ny Kaledonien

Valg af stat/provins

50 amerikanske stater, 13 canadiske provinser eller regioner verden over:

• Skriv “cal” → Californien
• Skriv “ny” → New York, New Jersey, New Hampshire, New Mexico

Produktkategorier

E-handelssider med hundredvis af produkttyper:

• Skriv “bærbar” → Bærbare computere, Tilbehør til bærbare computere, Tasker til bærbare computere
• Skriv “telefon” → Telefoner, Telefoncovers, Telefonopladere

Jobtitler/brancher

Karriereformularer med omfattende joblister:

• Skriv "ingeniør" → Softwareingeniør, Civilingeniør, Maskiningeniør
• Skriv “marked” → Marketingchef, markedsanalytiker, markedspladsspecialist

Other languages

Sprogpræference med 100+ muligheder:

• Skriv “span” → Spansk
• Skriv “hage” → Kinesisk (forenklet), Kinesisk (traditionelt)

Universiteter/Skoler

Lister over uddannelsesinstitutioner:

• Skriv “harvard” → Harvard Universitet
• Skriv “MIT” → Massachusetts Institute of Technology

Tidszoner

400+ tidszonemuligheder:

• Skriv "pacific" → Pacific/Auckland, Pacific/Honolulu, USA/Stillehavet
• Skriv “new york” → Amerika/New_York

Opsætning af søgbare dropdowns

Sådan opretter du søgbare dropdown-menuer med Automatisk formularbygger:

Trin 1: Installer Auto Form Builder

1. Gå til Plugins → Tilføj nyt
2. Søge efter "A.F.B."(det korte navn for Auto Form Builder)
3. Find "AFB – Automatisk formularbygger – Træk og slip formularopretter"
4. Klik Installer nu, derefter Aktivere

Trin 2: Tilføj et rullemenufelt

1. Opret eller rediger din formular
2. Træk Dropdown felt på din formular
3. Klik for at åbne indstillinger

Trin 3: Tilføj dine muligheder

Indtast din liste over muligheder. For lange lister kan du:

• Skriv manuelt – Indtast hver mulighed én efter én
• Massetilføjelse – Indsæt en liste med muligheder (én pr. linje)

Trin 4: Aktivér søgning

I rullemenuindstillingerne skal du kigge efter Søgbar or Aktiver søgning valgmulighed. Slå den til.

Rullemenuen vil nu indeholde et søge-/filterfelt, der filtrerer muligheder, mens brugerne skriver.

Trin 5: Konfigurer søgeadfærd

Afhængigt af din formularbygger kan du have muligheder som:

• Minimum antal tegn – Start filtrering efter X tegn er indtastet
• Søg position – Match fra starten af ​​muligheden eller hvor som helst
• Pladsholdertekst – “Skriv for at søge…” eller “Søg i lande…”

Bedste fremgangsmåder for rullemenufelter

1. Aktiver altid søgning for 20+ muligheder

Hvis din rullemenu har mere end 20 muligheder, skal du aktivere søgning. Så enkelt er det. Brugerne vil takke dig.

2. Brug tydelig pladsholdertekst

Fortæl brugerne, at de kan søge:

• "Vælg et land (skriv for at søge)"
• "Vælg din stat..."
• "Søg eller vælg..."

3. Logisk sortering af muligheder

Selv med søgning er rækkefølgen af ​​muligheder vigtig:

• Alfabetisk – Bedst til navne (lande, stater)
• Mest almindelige først – Placer populære muligheder øverst (USA, Storbritannien, Canada)
• grupperet – Kategorier med separatorer

4. Inkluder almindelige variationer

Brugere kan søge efter:

• "USA" eller "USA" eller "US" eller "Amerika"
• "Storbritannien" eller "Storbritannien" eller "England"

Hvis det er muligt, så inkluder almindelige forkortelser eller variationer, der knytter sig til den samme mulighed.

5. Test på mobil

Søgbare rullemenuer burde fungere problemfrit på berøringsenheder:

• Søgeinput er let at trykke på
• Tastaturet vises til indtastning
• Valgmulighederne er store nok til at trykke præcist

Hvornår man IKKE skal bruge søgbare dropdowns

Søgbare dropdown-menuer er ikke altid svaret:

Korte lister (under 10 muligheder)

For 5-10 muligheder er en standard dropdown-menu hurtigere. Du behøver ikke at skrive, når du kan se alt på én gang.

Når brugerne ikke kender det nøjagtige udtryk

Søgning kræver, at brugerne ved, hvad de skal skrive. Hvis de browser/udforsker muligheder, kan en kategoriseret liste eller radioknapper fungere bedre.

Ja/Nej eller binære valg

Brug i stedet radioknapper. To muligheder behøver slet ikke en rullemenu.

Numeriske områder

Overvej følgende for aldersgrupper eller valg af mængde:

• Nummerindtastningsfelt
• skyderen
• Kort rullemenu (1-10)

Alternativer til søgbare dropdowns

Afhængigt af dine data, overvej disse alternativer:

Autofuldførelsestekstfelt

Brugeren skriver frit, forslag vises nedenfor. Godt, når brugerne muligvis indtaster værdier, der ikke er på din liste.

Kaskaderende dropdowns

Opdel en lang liste i to kortere:

• Første rullemenu: Vælg kontinent
• Anden rullemenu: Vælg land (filtreret efter kontinent)

Radioknapper med "Andet"

Vis de 5-7 bedste muligheder som radioknapper med en "Andet"-mulighed, der viser et tekstfelt.

Grupperede/kategoriserede muligheder

Brug optgroups til at organisere muligheder efter kategori:

• Nordamerika
  • Canada
  • Mexico
  • United States
• Europa
  • Frankrig
  • Tyskland
  • United Kingdom

Forudbyggede indstillinger

Du skal ikke opfinde hjulet på ny. Her er nogle almindelige lister, du skal bruge:

Lande

195 FN-medlemsstater plus territorier. Overvej at placere fælles lande (USA, Storbritannien, Canada, Australien) øverst og derefter alfabetisk.

Amerikanske stater

50 stater plus Washington D.C. og territorier. Alfabetisk rækkefølge fungerer godt.

Canadiske provinser

13 provinser og territorier. Kort nok til, at søgning er valgfri.

Tidszoner

Brug standard tidszone-identifikatorer (Amerika/New York, Europa/London). Gruppér efter region.

Other languages

ISO-sprogkoder med visningsnavne. Sæt almindelige sprog først.

Brancher

Standard brancheklassifikationslister (NAICS, SIC) eller brugerdefinerede lister til din målgruppe.

Ydelsesovervejelser

Meget store lister (1000+ muligheder)

For ekstremt store lister:

• Indlæs muligheder efter behov – Hent fra server som brugertyper
• Angiv minimumskrav for tegn – Kræver 2-3 tegn før søgning
• Begræns viste resultater – Vis top 20 kampe, ikke alle 500

Indvirkning på sideindlæsning

Lange lister over valgmuligheder øger sidestørrelsen. For lister over 500 valgmuligheder, overvej:

• Indlæsningsmuligheder via AJAX
• Opbrydning i kaskaderende dropdowns
• Brug af serversidesøgning

Tilgængelighed

Sørg for, at der er adgang til søgbare rullemenuer:

Tastaturnavigation

• Tab for at fokusere feltet
• Skriv for at søge
• Piletaster til at navigere i muligheder
• Enter for at vælge
• Escape for at lukke

Skærmlæsere

• Korrekte ARIA-etiketter
• Annoncer antallet af resultater
• Annoncer den valgte mulighed

Visuelle indikatorer

• Klare fokustilstande
• Fremhævet aktuel mulighed
• Indlæsningsindikator under søgning

Ofte stillede spørgsmål

Hvor mange muligheder har jeg, før jeg skal søge?

Aktiver søgning for enhver rullemenu med 20+ muligheder. For 50+ muligheder er søgning afgørende. Nogle brugere sætter pris på at søge selv for 10-15 muligheder.

Skal søgningen matche fra starten eller et andet sted?

Søgning efter "hvor som helst" er mere tilgivende. Søgning efter "york" finder "New York". Søgning efter kun begyndelsesord er hurtigere for kendte termer.

Kan brugerne stadig rulle gennem alle muligheder?

Ja, søgbare rullemenuer viser typisk den fulde liste først. Søgning filtrerer den ned, men brugerne kan stadig rulle, hvis de foretrækker det.

Hvad hvis brugerne staver deres søgning forkert?

Grundlæggende søgning håndterer ikke stavefejl. For vigtige felter (som land) skal du sørge for at dække almindelige stavefejl, eller bruge fuzzy matching, hvis det er muligt.

Virker søgbare dropdown-menuer på mobil?

Ja, og de er ofte bedre på mobilen end almindelige dropdown-menuer, fordi det er hurtigere at skrive end at rulle gennem en lang liste med et lille rulleområde.

Resumé

Gør lange rullelister brugervenlige:

1. Identificér lange lister – Enhver rullemenu med 20+ muligheder
2. Aktivér søgning – Lad brugerne skrive for at filtrere
3. Brug tydelige pladsholdere – “Skriv for at søge…”
4. Logisk rækkefølge – Populære varer først, derefter alfabetisk
5. Test på mobil – Sørg for en jævn berøringsoplevelse
6. Overvej alternativer – Kaskaderende dropdowns, grupperede muligheder

Konklusion

Lange rullelister dræber formularudfyldelsesprocenter. Søgbare rullemenuer Transformér oplevelsen – brugerne finder deres valg på få sekunder i stedet for at scrolle uendeligt.

Uanset om det er lande, stater, produkter eller en hvilken som helst liste med over 20 muligheder, gør tilføjelse af søgefunktioner dine formularer hurtigere og mere brugervenlige.

Automatisk formularbygger lader dig oprette rullemenuer med søgbar funktionalitet, der hjælper brugerne hurtigt med at finde det, de har brug for, selv på de længste lister.

Klar til at forbedre dine formularer? Download automatisk formularbygger og gør dine rullelister brugervenlige i dag.