Padajući meniji s mogućnošću pretraživanja: Pravljenje dugih lista jednostavnih za korištenje

Padajući meni sa 200 zemalja. Lista od 50 država. Stotine opcija proizvoda. Skrolovanje kroz dugačke padajuće liste je frustrirajuće i uzrokuje napuštanje obrasca.

Padajući meniji koji se mogu pretraživati Riješite ovo tako što ćete korisnicima omogućiti trenutno filtriranje opcija tipkanjem. Umjesto skrolovanja, oni upisuju "mogu" i vide Kanadu na vrhu.

U ovom vodiču ćete naučiti kada koristiti padajuće menije s mogućnošću pretraživanja i kako ih postaviti u svoje WordPress obrasce.

Problem sa dugim padajućim menijima

Standardni padajući meniji postaju neupotrebljivi kako se broj opcija povećava:

Problemi korisničkog iskustva

• Beskrajno skrolovanje – Pronalaženje „Sjedinjenih Američkih Država“ na abecednom popisu zemalja znači listanje preko 180+ zemalja
• Mobilna noćna mora – Sitna područja za pomicanje na ekranima osjetljivim na dodir
• Vreme vremena – Korisnici provedu 10+ sekundi pronalazeći jednu opciju
• Sklon greškama – Lako je slučajno odabrati pogrešan artikl
• Frustrirajuće – Ponavlja se za više padajućih polja

Kada padajući meniji postanu problematični

Kako funkcionišu padajući meniji koji se mogu pretraživati

Padajući meni s mogućnošću pretraživanja kombinuje unos teksta sa padajućom listom:

1. Korisnik klikne na padajuće polje
2. Pojavljuje se okvir za pretragu (ili samo polje postaje pretraživo)
3. Korisnik ukuca nekoliko znakova
4. Opcije se filtriraju u realnom vremenu kako bi se uskladile sa unosom
5. Korisnik bira sa filtrirane kratke liste

Primjer: Odabir države

Bez pretrage: Pregledajte više od 200 zemalja da biste pronašli "Njemačka"

Sa pretragom: Ukucajte „ger“ → pogledajte Njemačka, Alžir, Nigerija → kliknite Njemačka

Ušteđeno vrijeme: 10+ sekundi → 2 sekunde

Uobičajeni slučajevi upotrebe za pretražive padajuće menije

Izbor zemlje

Klasičan primjer. Sa više od 195 zemalja, pretraga je neophodna:

• Upišite „uni“ → Sjedinjene Američke Države, Ujedinjeno Kraljevstvo, Ujedinjeni Arapski Emirati
• Upišite “aus” → Australija, Austrija
• Upišite „novo“ → Novi Zeland, Nova Kaledonija

Izbor države/pokrajine

50 američkih saveznih država, 13 kanadskih provincija ili regija širom svijeta:

• Upišite „cal“ → Kalifornija
• Upišite „novo“ → New York, New Jersey, New Hampshire, New Mexico

Kategorije proizvoda

E-trgovine sa stotinama vrsta proizvoda:

• Upišite „laptop“ → Laptopi, Dodaci za laptope, Torbe za laptope
• Ukucajte „telefon“ → Telefoni, Futrole za telefone, Punjači za telefone

Radna mjesta/Industrije

Obrasci za karijeru sa opsežnim listama poslova:

• Upišite „inženjer“ → Softverski inženjer, Građevinski inženjer, Mašinski inženjer
• Upišite „tržište“ → Menadžer marketinga, Analitičar tržišta, Specijalista za tržište

Jezici

Jezičke postavke sa preko 100 opcija:

• Upišite „span“ → Španski
• Upišite „brada“ → Kineski (pojednostavljeni), Kineski (tradicionalni)

Univerziteti/Škole

Liste obrazovnih institucija:

• Ukucajte „harvard“ → Univerzitet Harvard
• Upišite „MIT“ → Tehnološki institut u Massachusettsu

Vremenska zona

Više od 400 opcija vremenskih zona:

• Upišite „pacifik“ → Pacifik/Auckland, Pacifik/Honolulu, SAD/Pacifik
• Upišite „new york“ → Amerika/New_York

Postavljanje padajućih menija s mogućnošću pretraživanja

Evo kako kreirati padajuće menije s mogućnošću pretraživanja pomoću Automatski kreator obrazaca:

Korak 1: Instalirajte Auto Form Builder

1. Idi na Dodaci → Dodaj novo
2. Traži za “A.F.B." (skraćeni naziv za Auto Form Builder)
3. Pronađi "AFB – Auto Form Builder – Kreator obrazaca putem prevlačenja i ispuštanja"
4. kliknite Instalirati sada, onda aktivirati

Korak 2: Dodajte padajuće polje

1. Kreirajte ili uredite svoj obrazac
2. Povucite Ispustiti polje na vaš obrazac
3. Kliknite da otvorite postavke

Korak 3: Dodajte svoje opcije

Unesite svoju listu opcija. Za duge liste možete:

• Ukucajte ručno – Unesite svaku opciju jednu po jednu
• Grupno dodavanje – Zalijepite listu opcija (jednu po redu)

Korak 4: Omogućite pretragu

U padajućim postavkama potražite Searchable or Omogući pretragu opcija. UKLJUČITE je.

Padajući meni će sada uključivati ​​polje za pretragu/filter koje filtrira opcije dok korisnici kucaju.

Korak 5: Konfigurirajte ponašanje pretraživanja

U zavisnosti od vašeg alata za kreiranje obrazaca, možete imati opcije kao što su:

• Minimalni broj znakova – Počni filtrirati nakon što unesete X znakova
• Pozicija pretrage – Podudaranje od početka opcije ili bilo gdje
• Tekst rezerviranog mjesta – „Ukucajte za pretragu…“ ili „Pretražite države…“

Najbolje prakse za padajuće polje

1. Uvijek omogućite pretragu za više od 20 opcija

Ako vaš padajući meni ima više od 20 opcija, omogućite pretragu. Toliko je jednostavno. Korisnici će vam biti zahvalni.

2. Koristite prozirni tekst rezerviranog mjesta

Recite korisnicima da mogu pretraživati:

• "Odaberite državu (upišite za pretragu)"
• "Izaberite svoju državu..."
• "Pretraži ili odaberi..."

3. Logički poredajte opcije

Čak i kod pretrage, redoslijed opcija je važan:

• Abecedno – Najbolje za imena (države, savezne države)
• Najčešći prvi – Postavite popularne opcije na vrh (SAD, UK, Kanada)
• Grupisano – Kategorije sa separatorima

4. Uključite uobičajene varijacije

Korisnici bi mogli tražiti:

• "SAD" ili "Sjedinjene Američke Države" ili "SAD" ili "Amerika"
• "UK" ili "Ujedinjeno Kraljevstvo" ili "Britanija" ili "Engleska"

Ako je moguće, uključite uobičajene skraćenice ili varijacije koje se odnose na istu opciju.

5. Testirajte na mobilnom uređaju

Padajući meniji s mogućnošću pretraživanja trebali bi glatko funkcionirati na uređajima osjetljivim na dodir:

• Unos za pretragu je lako dodirljiv
• Tastatura se pojavljuje za kucanje
• Opcije su dovoljno velike za precizno kucanje

Kada NE koristiti padajuće menije s mogućnošću pretraživanja

Padajući meniji koji se mogu pretraživati ​​nisu uvijek rješenje:

Kratke liste (manje od 10 opcija)

Za 5-10 opcija, standardni padajući meni je brži. Nema potrebe za kucanjem kada možete vidjeti sve odjednom.

Kada korisnici ne znaju tačan termin

Pretraga zahtijeva od korisnika da znaju šta da kucaju. Ako pretražuju/istražuju opcije, kategorizirana lista ili radio dugmad bi mogli bolje funkcionisati.

Da/Ne ili binarni izbori

Umjesto toga koristite radio dugmad. Dvije opcije uopće ne trebaju padajući izbornik.

Numerički rasponi

Za odabir starosnih grupa ili količine, uzmite u obzir:

• Polje za unos broja
• Slider
• Kratki padajući meni (1-10)

Alternative padajućim menijima s mogućnošću pretraživanja

U zavisnosti od vaših podataka, razmotrite ove alternative:

Polje za automatsko dovršavanje teksta

Korisnik slobodno kuca, prijedlozi se pojavljuju ispod. Dobro je kada korisnici mogu unijeti vrijednosti koje nisu na vašoj listi.

Kaskadni padajući meniji

Podijelite jednu dugu listu na dvije kraće:

• Prvi padajući meni: Odaberite kontinent
• Drugi padajući meni: Odaberite državu (filtrirano po kontinentu)

Radio dugmad sa opcijom "Ostalo"

Prikažite prvih 5-7 opcija kao radio dugmad s opcijom „Ostalo“ koja otkriva tekstualno polje.

Grupirane/kategorizirane opcije

Koristite optgroups za organiziranje opcija po kategorijama:

• sjeverna amerika
  • Kanada
  • Meksiko
  • Sjedinjene Države
• Evropa
  • Francuska
  • Njemačka
  • Ujedinjeno kraljevstvo

Unaprijed izrađene liste opcija

Nemojte iznova izmišljati točak. Evo uobičajenih lista koje će vam trebati:

zemalja

195 država članica UN-a plus teritorije. Razmislite o tome da uobičajene države (SAD, UK, Kanada, Australija) stavite na vrh, a zatim po abecednom redu.

Američke države

50 država plus DC i teritorije. Abecedni red dobro funkcioniše.

Kanadske provincije

13 provincija i teritorija. Dovoljno kratko da je pretraga opcionalna.

Vremenska zona

Koristite standardne identifikatore vremenskih zona (Amerika/New_York, Evropa/London). Grupišite po regiji.

Jezici

ISO jezički kodovi sa prikaznim nazivima. Prvo stavite uobičajene jezike.

Industries

Standardne liste klasifikacija industrije (NAICS, SIC) ili prilagođene liste za vašu publiku.

Razmatranja performansi

Veoma velike liste (1000+ opcija)

Za izuzetno velike liste:

• Opcije učitavanja na zahtjev – Dohvati sa servera dok korisnik kuca
• Postavite minimalan broj znakova – Zahtijeva 2-3 znaka prije pretrage
• Ograniči prikazane rezultate – Prikažite 20 najboljih utakmica, ne svih 500

Uticaj učitavanja stranice

Dugačke liste opcija povećavaju veličinu stranice. Za liste s preko 500 opcija, razmotrite:

• Opcije učitavanja putem AJAX-a
• Prelaženje u kaskadne padajuće menije
• Korištenje pretrage na strani servera

pristupačnost

Osigurajte da su padajući meniji s mogućnošću pretraživanja dostupni:

Navigacija po tastaturi

• Pritisnite Tab da fokusirate polje
• Unesite za pretraživanje
• Tipke sa strelicama za navigaciju opcijama
• Enter za odabir
• Pobjegni da zatvoriš

Čitači ekrana

• Ispravne ARIA oznake
• Objavite broj rezultata
• Najavi odabranu opciju

Vizualni pokazatelji

• Jasna stanja fokusa
• Istaknuta trenutna opcija
• Indikator učitavanja tokom pretraživanja

Često Postavljena Pitanja

Koliko opcija prije nego što mi zatreba pretraga?

Omogućite pretragu za bilo koji padajući meni sa 20+ opcija. Za 50+ opcija, pretraga je neophodna. Neki korisnici cijene pretragu čak i za 10-15 opcija.

Treba li se pretraga podudarati od početka ili bilo gdje?

Podudaranje "bilo gdje" je lakše za pretragu. Pretraga "york" pronalazi "New York". Podudaranje samo na početku je brže za poznate pojmove.

Mogu li korisnici i dalje listati kroz sve opcije?

Da, padajući meniji koji se mogu pretraživati ​​obično inicijalno prikazuju cijelu listu. Pretraga je filtrira, ali korisnici i dalje mogu skrolovati ako to žele.

Šta ako korisnici pogrešno napišu pretragu?

Osnovna pretraga ne obrađuje tipografske greške. Za važna polja (kao što je država), provjerite da li su obuhvaćene uobičajene pravopisne greške ili koristite fuzzy podudaranje ako je dostupno.

Da li padajući meniji za pretraživanje rade na mobilnim uređajima?

Da, i često su bolji na mobilnim uređajima od standardnih padajućih menija jer je kucanje brže od skrolovanja kroz dugu listu sa malim područjem za skrolovanje.

rezime

Napravite dugačke padajuće liste jednostavnim za korištenje:

1. Identifikujte duge liste – Bilo koji padajući meni sa više od 20 opcija
2. Omogući pretragu – Omogućite korisnicima filtriranje unosom teksta
3. Koristite prozirne rezervirane prostore – „Ukucajte za pretragu…“
4. Logički poredaj – Prvo popularni artikli, zatim po abecednom redu
5. Testirajte na mobilnom uređaju – Osigurajte glatko iskustvo dodira
6. Razmotrite alternative – Kaskadni padajući meniji, grupisane opcije

zaključak

Dugačke padajuće liste smanjuju stopu popunjavanja obrazaca. Padajući meniji koji se mogu pretraživati transformirajte iskustvo – korisnici pronalaze svoju opciju za nekoliko sekundi umjesto beskrajnog skrolovanja.

Bilo da se radi o državama, saveznim državama, proizvodima ili bilo kojoj listi sa više od 20 opcija, dodavanje funkcije pretraživanja čini vaše obrasce bržim i jednostavnijim za korištenje.

Automatski kreator obrazaca Omogućava vam kreiranje padajućih menija sa mogućnošću pretraživanja, pomažući korisnicima da brzo pronađu ono što im je potrebno čak i u najdužim listama.

Spremni da poboljšate svoje forme? Preuzmite Auto Form Builder i učinite svoje padajuće liste jednostavnim za korištenje već danas.