Padajući izbornici s mogućnošću pretraživanja: Izrada dugih popisa jednostavnih za korištenje

Padajući izbornik s 200 zemalja. Popis od 50 saveznih država. Stotine opcija proizvoda. Pomicanje kroz duge padajuće popise je frustrirajuće i uzrokuje napuštanje obrasca.

Padajući izbornici s mogućnošću pretraživanja riješite to tako što ćete korisnicima omogućiti trenutno filtriranje opcija tipkanjem. Umjesto pomicanja, upisuju "može" i vide Kanadu na vrhu.

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

Problem s dugim padajućim izbornicima

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

Problemi s korisničkim iskustvom

• Beskrajno skrolanje – Pronalaženje "Sjedinjenih Američkih Država" na abecednom popisu zemalja znači pomicanje dalje od 180+ zemalja
• Mobilna noćna mora – Sitna područja za pomicanje na zaslonima osjetljivim na dodir
• Dugotrajan – Korisnici provedu 10+ sekundi tražeć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 izbornici postanu problematični

Kako funkcioniraju pretraživi padajući izbornici

Padajući izbornik s mogućnošću pretraživanja kombinira unos teksta s padajućim popisom:

1. Korisnik klikne na padajuće polje
2. Pojavit će se okvir za pretraživanje (ili će samo polje postati pretraživo)
3. Korisnik upisuje nekoliko znakova
4. Opcije filtriraju u stvarnom vremenu kako bi se uskladile s ulazom
5. Korisnik odabire s filtriranog kratkog popisa

Primjer: Odabir države

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

S pretraživanjem: Upišite „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 izbornike

Odabir zemlje

Klasičan primjer. S više od 195 zemalja, pretraživanje je ključno:

• 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

Odabir države/pokrajine

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

• Upišite „cal” → Kalifornija
• Upišite „novo“ → New York, New Jersey, New Hampshire, Novi Meksiko

Kategorije proizvoda

Web-mjesta za e-trgovinu sa stotinama vrsta proizvoda:

• Upišite „prijenosno računalo“ → Prijenosna računala, Pribor za prijenosna računala, Torbe za prijenosna računala
• Upišite „telefon“ → Telefoni, Futrole za telefone, Punjači za telefone

Radna mjesta/Industrije

Obrasci za karijeru s opsežnim popisima poslova:

• Upišite „inženjer“ → Softverski inženjer, Građevinski inženjer, Strojarski inženjer
• Upišite „tržište“ → Voditelj marketinga, tržišni analitičar, stručnjak za tržište

jezici

Jezične postavke s više od 100 opcija:

• Upišite „span” → španjolski
• Upišite „brada“ → kineski (pojednostavljeni), kineski (tradicionalni)

Sveučilišta/Škole

Popisi obrazovnih ustanova:

• Upišite „harvard” → Sveučilište Harvard
• Upišite „MIT” → Tehnološki institut Massachusettsa

Vremenske zone

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 izbornika s mogućnošću pretraživanja

Evo kako stvoriti padajuće izbornike s mogućnošću pretraživanja Automatski alat za izradu obrazaca:

Korak 1: Instalirajte Auto Form Builder

1. Idi na Dodaci → Dodaj novo
2. Traziti "A.F.B." (skraćeni naziv za Auto Form Builder)
3. Pronaći "AFB – Auto Form Builder – Kreator obrazaca putem povlačenja i ispuštanja"
4. Kliknite Instaliraj sada, A zatim Aktivirati

Korak 2: Dodajte padajuće polje

1. Izradite ili uredite svoj obrazac
2. Povucite padajući polje na vaš obrazac
3. Kliknite za otvaranje postavki

Korak 3: Dodajte svoje opcije

Unesite svoj popis opcija. Za duge popise možete:

• Ručno tipkanje – Unesite svaku opciju jednu po jednu
• Skupno dodavanje – Zalijepite popis opcija (jednu po retku)

Korak 4: Omogućite pretraživanje

U postavkama padajućeg izbornika potražite Pretraživo or Omogući pretraživanje opcija. UKLJUČITE je.

Padajući izbornik sada će uključivati ​​okvir za pretraživanje/filtriranje koji filtrira opcije dok korisnici upisuju.

Korak 5: Konfigurirajte ponašanje pretraživanja

Ovisno o vašem alatu za izradu obrazaca, možete imati opcije poput:

• Minimalni broj znakova – Početak filtriranja nakon što upišete X znakova
• Pozicija pretraživanja – Podudaranje od početka opcije ili bilo gdje
• Tekst rezerviranog mjesta – „Upišite za pretraživanje…“ ili „Pretražite države…“

Najbolje prakse za padajuće polje

1. Uvijek omogućite pretraživanje za više od 20 opcija

Ako vaš padajući izbornik ima više od 20 opcija, omogućite pretraživanje. 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 pretraživanje)"
• "Odaberi svoju državu..."
• „Pretraži ili odaberi…“

3. Logički poredajte opcije

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

• abecedni – Najbolje za imena (zemlje, savezne države)
• Najčešći prvi – Postavite popularne opcije na vrh (SAD, UK, Kanada)
• grupirane – 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 kratice ili varijacije koje se odnose na istu opciju.

5. Testirajte na mobitelu

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

• Unos za pretraživanje je lako dodirljiv
• Pojavljuje se tipkovnica za tipkanje
• Mogućnosti su dovoljno velike za precizno kuckanje

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

Padajući izbornici s mogućnošću pretraživanja nisu uvijek rješenje:

Kratki popisi (manje od 10 opcija)

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

Kada korisnici ne znaju točan pojam

Pretraživanje zahtijeva od korisnika da znaju što upisati. Ako pregledavaju/istražuju opcije, kategorizirani popis ili radio gumbi mogli bi bolje funkcionirati.

Da/Ne ili binarni izbori

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

Numerički rasponi

Za odabir dobnih skupina ili količine, uzmite u obzir:

• Polje za unos broja
• Klizač
• Kratki padajući izbornik (1-10)

Alternative pretraživim padajućim izbornicima

Ovisno o vašim podacima, razmotrite ove alternative:

Polje za automatsko dovršavanje teksta

Korisnik slobodno tipka, prijedlozi se prikazuju u nastavku. Dobro je kada korisnici mogu unijeti vrijednosti koje nisu na vašem popisu.

Kaskadni padajući izbornik

Podijelite jedan dugi popis na dva kraća:

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

Radio gumbi s opcijom "Ostalo"

Prikažite prvih 5-7 opcija kao radio gumbe s opcijom "Ostalo" koja otkriva tekstualno polje.

Grupirane/kategorizirane opcije

Koristite optgroups za organiziranje opcija po kategorijama:

• Sjeverna Amerika
  • Kanada
  • Meksiko
  • Ujedinjene države
• ŠIROM Europe
  • Francuska
  • Njemačka
  • Ujedinjeno Kraljevstvo

Unaprijed izrađeni popisi opcija

Nemojte iznova izmišljati kotač. Evo uobičajenih popisa koji će vam trebati:

Zemalja

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

SAD-a

50 država plus DC i teritoriji. Abecedni red dobro funkcionira.

kanadske provincije

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

Vremenske zone

Koristite standardne identifikatore vremenskih zona (Amerika/New_York, Europa/London). Grupirajte po regiji.

jezici

ISO jezični kodovi s nazivima za prikaz. Prvo stavite uobičajene jezike.

Industrije

Standardni popisi klasifikacija industrije (NAICS, SIC) ili prilagođeni popisi za vašu publiku.

Razmatranja izvedbe

Vrlo veliki popisi (više od 1000 opcija)

Za izuzetno velike popise:

• Opcije učitavanja na zahtjev – Dohvaćanje s poslužitelja dok korisnik upisuje
• Postavite minimalan broj znakova – Zahtijeva 2-3 znaka prije pretraživanja
• Ograniči prikazane rezultate – Prikaži 20 najboljih rezultata, ne svih 500

Utjecaj učitavanja stranice

Dugi popisi opcija povećavaju veličinu stranice. Za popise s više od 500 opcija, razmotrite:

• Opcije učitavanja putem AJAX-a
• Razbijanje u kaskadne padajuće izbornike
• Korištenje pretraživanja na strani poslužitelja

Pristupačnost

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

Navigacija tipkovnicom

• Pritisnite Tab za fokusiranje polja
• Unesite za pretraživanje
• Tipke sa strelicama za navigaciju opcijama
• Enter za odabir
• Izlaz za zatvaranje

Čitači zaslona

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

Vizualni pokazatelji

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

Često postavljana pitanja

Koliko opcija prije nego što mi je potrebna pretraga?

Omogućite pretraživanje za bilo koji padajući izbornik s više od 20 opcija. Za više od 50 opcija pretraživanje je ključno. Neki korisnici cijene pretraživanje čak i za 10-15 opcija.

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

Podudaranje "bilo gdje" je lakše za provjeru. Pretraživanje "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, pretraživi padajući izbornici obično inicijalno prikazuju cijeli popis. Pretraživanje ga filtrira, ali korisnici i dalje mogu pomicati ako to žele.

Što ako korisnici krivo napišu svoj pretragu?

Osnovno pretraživanje ne obrađuje tipografske pogreške. Za važna polja (poput države) provjerite jesu li obuhvaćene uobičajene pravopisne pogreške ili koristite fuzzy podudaranje ako je dostupno.

Rade li pretraživi padajući izbornici na mobilnim uređajima?

Da, i često su bolji na mobilnim uređajima od standardnih padajućih izbornika jer je tipkanje brže od pomicanja kroz dugi popis s malim područjem za pomicanje.

Rezime

Napravite duge padajuće popise jednostavnima za korištenje:

1. Prepoznajte duge popise – Bilo koji padajući izbornik s više od 20 opcija
2. Omogući pretraživanje – Omogućite korisnicima filtriranje tipkanjem
3. Koristite prozirne rezervirane prostore – „Upišite za pretraživanje…“
4. Logički poredaj – Prvo popularne stavke, zatim abecednim redom
5. Testiranje na mobitelu – Osigurajte glatko iskustvo dodira
6. Razmotrite alternative – Kaskadni padajući izbornici, grupirane opcije

Zaključak

Dugi padajući popisi smanjuju stopu dovršavanja obrazaca. Padajući izbornici s mogućnošću pretraživanja transformirajte iskustvo - korisnici pronalaze svoju opciju u sekundama umjesto beskrajnog skrolanja.

Bilo da se radi o državama, saveznim državama, proizvodima ili bilo kojem popisu s više od 20 opcija, dodavanje funkcije pretraživanja čini vaše obrasce bržima i jednostavnijima za korištenje.

Automatski alat za izradu obrazaca omogućuje vam stvaranje padajućih izbornika s mogućnošću pretraživanja, pomažući korisnicima da brzo pronađu ono što im je potrebno čak i u najdužim popisima.

Spremni za poboljšanje svojih formi? Preuzmite Auto Form Builder i učinite svoje padajuće popise jednostavnima za korištenje već danas.