Kereshető legördülő menük: Hosszú listák felhasználóbaráttá tétele

Kereshető legördülő menük

Egy legördülő menü 200 országgal. Egy 50 állam listája. Több száz terméklehetőség. A hosszú legördülő listák görgetése frusztráló – és űrlapelhagyáshoz vezet.

Kereshető legördülő menük A problémát úgy oldják meg, hogy a felhasználók azonnal gépelhetnek a szűrési lehetőségekhez. Görgetés helyett beírják a „can” szót, és Kanada feliratot látják felül.

Ebben az útmutatóban megtudhatod, mikor érdemes kereshető legördülő menüket használni, és hogyan állíthatod be őket a WordPress űrlapjaidban.

A hosszú legördülő menük problémája

A standard legördülő menük használhatatlanná válnak a lehetőségek számának növekedésével:

Felhasználói élménnyel kapcsolatos problémák

  • Végtelen görgetés – Az „Egyesült Államok” kifejezés betűrendes országlistában való megtalálása több mint 180 országot jelent.
  • Mobil rémálom – Apró görgetési területek az érintőképernyőkön
  • Időigényes – A felhasználók több mint 10 másodpercet töltenek egy lehetőség megtalálásával
  • Hibaérzékeny – Könnyű véletlenül rossz elemet választani
  • Frusztráló – Több legördülő mező esetén ismétlődik

Amikor a legördülő menük problémássá válnak

Opciók száma User Experience
5-10 lehetőség ✅ Könnyen szkennelhető
10-20 lehetőség ⚠️ Kezelhető
20-50 lehetőség ⚠️ Kezd unalmas lenni
50+ lehetőség ❌ Keresést igényel
100+ lehetőség ❌ Keresés elengedhetetlen

Hogyan működnek a kereshető legördülő menük?

Egy kereshető legördülő menü egy szövegbevitelt egy legördülő listával kombinál:

  1. A felhasználó rákattint a legördülő mezőre
  2. Megjelenik egy keresőmező (vagy maga a mező kereshetővé válik)
  3. A felhasználó begépel néhány karaktert
  4. A beállítások valós időben szűrnek a bemenetnek megfelelően
  5. A felhasználó a szűrt rövid listából választ

Példa: Országválasztás

Keresés nélkül: Görgess végig több mint 200 országot, hogy megtaláld „Németország” nevét

Kereséssel: Írd be a „ger” szót → lásd: Németország, Algéria, Nigéria → kattints a Németország szóra

Megtakarított idő: 10+ másodperc → 2 másodperc

A kereshető legördülő menük gyakori használati esetei

Ország kiválasztása

A klasszikus példa. Több mint 195 országban a keresés elengedhetetlen:

  • Írd be az „uni” szót → Egyesült Államok, Egyesült Királyság, Egyesült Arab Emírségek
  • Írja be: „aus” → Ausztrália, Ausztria
  • Írd be az „új” szót → Új-Zéland, Új-Kaledónia

Állam/tartomány kiválasztása

50 amerikai állam, 13 kanadai tartomány, vagy régió világszerte:

  • Írd be a „cal” szót → Kalifornia
  • Írd be a „new” szót → New York, New Jersey, New Hampshire, Új-Mexikó

Termék kategóriák

Több száz terméktípust kínáló e-kereskedelmi oldalak:

  • „laptop” típus → Laptopok, Laptop tartozékok, Laptop táskák
  • Írd be a „telefon” kifejezést → Telefonok, Telefontokok, Telefontöltők

Munkakörök/Iparágak

Karrierűrlapok kiterjedt álláslistákkal:

  • „mérnök” típus → Szoftvermérnök, Építőmérnök, Gépészmérnök
  • Írja be a „piac” szót → Marketingmenedzser, Piaci elemző, Piactéri szakember

Nyelvek

Nyelvi preferencia több mint 100 lehetőséggel:

  • Írd be a „span” szót → spanyol
  • „Chin” beírása → Kínai (egyszerűsített), kínai (hagyományos)

Egyetemek/Iskolák

Oktatási intézmények listája:

  • Írd be a „harvard” kifejezést → Harvard Egyetem
  • Írd be az „MIT” kifejezést → Massachusetts Institute of Technology

Időzónák

400+ időzóna lehetőség:

  • „csendes-óceáni” → Csendes-óceán/Auckland, Csendes-óceán/Honolulu, USA/Csendes-óceáni
  • Írd be a „new york” kifejezést → Amerika/New_York

Kereshető legördülő menük beállítása

Így hozhatsz létre kereshető legördülő menüket a következővel: Automatikus űrlapkészítő:

1. lépés: Telepítse az Auto Form Buildert

  1. Tovább Bővítmények → Új hozzáadása
  2. Keresés "A.F.B.” (az Auto Form Builder rövid neve)
  3. Megtalálja "AFB – Automatikus űrlapkészítő – Húzza és ejtse az űrlapot"
  4. Kattints Telepítés most, Akkor Aktiválja

2. lépés: Legördülő mező hozzáadása

  1. Űrlap létrehozása vagy szerkesztése
  2. Húzza a legördülő mező az űrlapon
  3. Kattintson a beállítások megnyitásához

3. lépés: Adja hozzá a beállításait

Írd be a lehetőségek listáját. Hosszú listák esetén a következőket teheted:

  • Gépelés manuálisan – Adja meg az egyes opciókat egyenként
  • Tömeges hozzáadás – Illesszen be egy listát a lehetőségekről (soronként egyet)

4. lépés: Keresés engedélyezése

A legördülő beállításokban keresd meg a kereshető or Keresés engedélyezése opció. Kapcsold BE.

A legördülő menüben mostantól egy kereső/szűrő mező lesz, amely a felhasználók gépelés közben szűri a lehetőségeket.

5. lépés: Keresési viselkedés konfigurálása

Az űrlapkészítőtől függően az alábbi lehetőségek közül választhat:

  • Minimum karakterszám – Szűrés indítása X karakter begépelése után
  • Keresési pozíció – Egyezés az opció elejétől vagy bárhonnan
  • Helyőrző szöveg – „Gépelje be a keresést…” vagy „Országok keresése…”

Legördülő mező – ajánlott gyakorlatok

1. Mindig engedélyezd a keresést több mint 20 lehetőség közül

Ha a legördülő menüdben több mint 20 lehetőség van, engedélyezd a keresést. Ilyen egyszerű. A felhasználók hálásak lesznek érte.

2. Használjon egyértelmű helyőrző szöveget

Mondd el a felhasználóknak, hogy kereshetnek:

  • „Válasszon ki egy országot (gépeléssel kereshet)”
  • „Válaszd ki az államodat…”
  • „Keresés vagy kiválasztás…”

3. Rendelési lehetőségek logikusan

Még keresés esetén is számít a lehetőségek sorrendje:

  • Betűrendes – Nevekhez legjobb (országok, államok)
  • Leggyakoribb első – A népszerű opciók felülre helyezése (USA, Egyesült Királyság, Kanada)
  • csoportosított – Elválasztókkal ellátott kategóriák

4. Tartalmazza a gyakori változatokat

A felhasználók a következőkre kereshetnek:

  • „USA” vagy „Egyesült Államok” vagy „USA” vagy „Amerika”
  • „Egyesült Királyság” vagy „Egyesült Királyság” vagy „Nagy-Britannia” vagy „Anglia”

Ha lehetséges, adjon meg gyakori rövidítéseket vagy variációkat, amelyek ugyanarra a lehetőségre vonatkoznak.

5. Tesztelés mobilon

A kereshető legördülő menüknek zökkenőmentesen kell működniük érintőképernyős eszközökön:

  • A keresési bevitel könnyen koppintható
  • Megjelenik a billentyűzet gépeléshez
  • A lehetőségek elég nagyok ahhoz, hogy pontosan lehessen koppintani

Mikor NEM szabad kereshető legördülő menüket használni

A kereshető legördülő menük nem mindig jelentenek megoldást:

Rövid listák (10 opció alatt)

5-10 lehetőség esetén egy szabványos legördülő menü gyorsabb. Nem kell gépelni, ha mindent egyszerre láthat.

Amikor a felhasználók nem ismerik a pontos kifejezést

A kereséshez a felhasználóknak tudniuk kell, mit kell beírniuk. Ha böngésznek/a lehetőségek között böngésznek, egy kategorizált lista vagy választógombok jobban működhetnek.

Igen/Nem vagy bináris választási lehetőségek

Használj inkább választógombokat. Két lehetőséghez egyáltalán nem kell legördülő menü.

Numerikus tartományok

Korcsoportok vagy mennyiség kiválasztásához vegye figyelembe:

  • Számbeviteli mező
  • Slider
  • Rövid legördülő menü (1-10)

Alternatívák a kereshető legördülő menükhöz

Az adataidtól függően vedd fontolóra az alábbi alternatívákat:

Automatikusan kitöltendő szövegmező

A felhasználó szabadon gépel, a javaslatok alul jelennek meg. Akkor hasznos, ha a felhasználók olyan értékeket adnak meg, amelyek nem szerepelnek a listán.

Kaszkádos legördülő menük

Bonts egy hosszú listát két rövidebbre:

  • Első legördülő menü: Válasszon kontinenst
  • Második legördülő menü: Ország kiválasztása (kontinens szerint szűrve)

„Egyéb” feliratú választógombok

Az 5-7 legfontosabb lehetőséget jelenítse meg választógombokként, egy „Egyéb” opcióval, amely egy szövegmezőt jelenít meg.

Csoportosított/kategorizált beállítások

Az optgroups használatával kategóriák szerint rendezheti a beállításokat:

  • Észak Amerika
    • Kanada
    • Mexikó
    • Egyesült Államok
  • Európa
    • Franciaország
    • Németország
    • Egyesült Királyság

Előre elkészített opciólisták

Ne találd fel újra a spanyolviaszt. Íme néhány gyakori lista, amire szükséged lesz:

Érintett országok

195 ENSZ-tagállam és területek. Érdemes lehet a közös országokat (USA, Egyesült Királyság, Kanada, Ausztrália) felülre, majd betűrendbe tenni.

Amerikai államok

50 állam, plusz Washington D.C. és területei. Az ábécésorrend jól működik.

Kanadai tartományok

13 tartomány és terület. Elég rövid ahhoz, hogy a keresés opcionális legyen.

Időzónák

Használjon szabványos időzóna-azonosítókat (Amerika/New_York, Európa/London). Csoportosítson régió szerint.

Nyelvek

ISO nyelvi kódok megjelenített nevekkel. A gyakori nyelveket helyezze előtérbe.

Iparágak

Szabványos iparági osztályozási listák (NAICS, SIC) vagy egyéni listák a célközönség számára.

Teljesítmény szempontjai

Nagyon nagy listák (1000+ lehetőség)

Rendkívül nagy listák esetén:

  • Igény szerinti betöltési lehetőségek – Felhasználói típusok szerinti lekérés a szerverről
  • Minimális karakterszám beállítása – Keresés előtt 2-3 karakter szükséges
  • Korlátozott számú találatot jeleníthet meg – A 20 legjobb mérkőzés megjelenítése, ne mind az 500

Oldalbetöltés hatása

A hosszú opciólisták növelik az oldal méretét. 500-nál több opció esetén érdemes megfontolni:

  • Betöltési lehetőségek AJAX-on keresztül
  • Kaszkádos legördülő menükbe való belépés
  • Szerveroldali keresés használata

Akadálymentesség

Győződjön meg arról, hogy a kereshető legördülő menük elérhetők:

Navigáció a billentyűzeten

  • Tab billentyűvel fókuszálhat a mezőre
  • Írja be a keresést
  • Nyílbillentyűk a lehetőségek navigálásához
  • Enter a kiválasztáshoz
  • Bezáráshoz Escape

Képernyőolvasók

  • Megfelelő ARIA címkék
  • Eredmények számának bejelentése
  • Kiválasztott opció bejelentése

Vizuális mutatók

  • Tiszta fókuszállapotok
  • Kiemelt aktuális opció
  • Betöltésjelző keresés közben

Gyakran ismételt kérdések

Hány lehetőségem van, mielőtt keresésre lenne szükségem?

Engedélyezze a keresést bármely legördülő menüben, több mint 20 lehetőséggel. 50+ lehetőség esetén a keresés elengedhetetlen. Egyes felhasználók akár 10-15 lehetőségre is értékelik a keresést.

A keresésnek az elejétől vagy bárhol máshol egyeznie kell?

A „bárhol” keresés megbocsátóbb eredményt ad. A „york” kifejezésre keresve a „New York” szót találjuk. Az ismert kifejezések esetében a csak a kezdetekre vonatkozó egyezés gyorsabb.

A felhasználók továbbra is végiggörgethetik az összes lehetőséget?

Igen, a kereshető legördülő menük általában kezdetben a teljes listát jelenítik meg. A keresés szűri a listát, de a felhasználók továbbra is görgethetnek, ha úgy tetszik.

Mi van, ha a felhasználók elgépelik a keresést?

Az alapkeresés nem kezeli az elgépeléseket. Fontos mezők (például az ország) esetén ügyeljen arra, hogy a gyakori elírások szerepeljenek a keresésben, vagy használjon zavaros egyezést, ha lehetséges.

Működnek a kereshető legördülő menük mobilon?

Igen, és mobilon gyakran jobbak, mint a hagyományos legördülő menük, mert gyorsabban gépelhetők, mint egy hosszú listában végiggörgetni egy apró görgetőfelülettel.

Összegzésként

A hosszú legördülő listák felhasználóbaráttá tétele:

  1. Hosszú listák azonosítása – Bármely legördülő menü több mint 20 lehetőséggel
  2. Keresés engedélyezése – A felhasználók gépelhetnek a szűréshez
  3. Használjon egyértelmű helyőrzőket – „Gépeljen be a kereséshez…”
  4. Logikus sorrend – Először a népszerű elemek, majd betűrendben
  5. Teszt mobilon – Biztosítsa a sima érintési élményt
  6. Fontolja meg az alternatívákat – Kaszkádos legördülő menük, csoportosított opciók

Összegzés

A hosszú legördülő listák rontják az űrlapok kitöltési arányát. Kereshető legördülő menük átalakítja az élményt – a felhasználók másodpercek alatt megtalálják a kívánt opciót a végtelen görgetés helyett.

Akár országokról, államokról, termékekről vagy bármilyen, több mint 20 lehetőséget tartalmazó listáról van szó, a keresési funkció hozzáadása gyorsabbá és felhasználóbarátabbá teszi az űrlapokat.

Automatikus űrlapkészítő lehetővé teszi kereshető legördülő mezők létrehozását, így a felhasználók gyorsan megtalálhatják a keresett információkat még a leghosszabb listákban is.

Készen állsz az űrlapjaid fejlesztésére? Töltse le az automatikus űrlapkészítőt és tegye legördülő listáit felhasználóbaráttá még ma.

Hagy egy Válaszol

E-mail címed nem kerül nyilvánosságra. Kötelező kitölteni *