Haettavat alasvetovalikot: Pitkien listojen tekeminen käyttäjäystävällisiksi

Alasvetovalikko, jossa on 200 maata. Luettelo 50 osavaltiosta. Satoja tuotevaihtoehtoja. Pitkien alasvetovalikoiden selaaminen on turhauttavaa – ja aiheuttaa lomakkeen hylkäämisen.

Haettavat alasvetovalikot ratkaise tämä antamalla käyttäjien suodattaa vaihtoehtoja välittömästi kirjoittamalla. Vierittämisen sijaan he kirjoittavat "voi" ja näkevät Kanadan yläreunassa.

Tässä oppaassa opit, milloin kannattaa käyttää haettavia alasvetovalikoita ja miten ne määritetään WordPress-lomakkeissa.

Pitkien alasvetovalikoiden ongelma

Vakiovalikot muuttuvat käyttökelvottomiksi vaihtoehtojen lisääntyessä:

Käyttäjäkokemukset

• Loputon vieritys – ”Yhdysvaltojen” löytäminen aakkosjärjestyksessä olevasta maaluettelosta tarkoittaa yli 180 maan selaamista
• Mobiili painajainen – Pienet vieritysalueet kosketusnäytöissä
• Aikaavievä – Käyttäjät käyttävät yli 10 sekuntia yhden vaihtoehdon löytämiseen
• Virhe altis – Helppo vahingossa valita väärä tuote
• turhauttava – Toistetaan useille alasvetokentälle

Kun alasvetovalikoista tulee ongelmallisia

Miten haettavat alasvetovalikot toimivat

Haettava alasvetovalikko yhdistää tekstisyötteen alasvetovalikkoon:

1. Käyttäjä napsauttaa alasvetovalikkoa
2. Hakukenttä tulee näkyviin (tai itse kentästä tulee haettavissa oleva)
3. Käyttäjä kirjoittaa muutaman merkin
4. Vaihtoehdot suodattuvat reaaliajassa syötteen mukaan
5. Käyttäjä valitsee suodatetusta lyhyestä luettelosta

Esimerkki: Maan valinta

Ilman hakua: Selaa yli 200 maan läpi löytääksesi ”Saksan”

Haun avulla: Kirjoita ”ger” → katso Saksa, Algeria, Nigeria → napsauta Saksa

Säästetty aika: 10+ sekuntia → 2 sekuntia

Yleisiä käyttötapauksia haettaville alasvetovalikoille

Maan valinta

Klassinen esimerkki. Yli 195 maassa haku on välttämätöntä:

• Kirjoita ”uni” → Yhdysvallat, Yhdistynyt kuningaskunta, Yhdistyneet arabiemiirikunnat
• Kirjoita "aus" → Australia, Itävalta
• Kirjoita ”uusi” → Uusi-Seelanti, Uusi-Kaledonia

Osavaltion/provinssin valinta

50 Yhdysvaltain osavaltiota, 13 Kanadan provinssia tai alueita maailmanlaajuisesti:

• Kirjoita ”cal” → Kalifornia
• Kirjoita ”uusi” → New York, New Jersey, New Hampshire, New Mexico

Tuoteryhmät

Verkkokauppasivustot, joilla on satoja tuotetyyppejä:

• Kirjoita ”kannettava tietokone” → Kannettavat tietokoneet, Kannettavien tietokoneiden lisävarusteet, Kannettavien tietokoneiden laukut
• Kirjoita ”puhelin” → Puhelimet, puhelinkotelot, puhelinlaturit

Työnimikkeet/Toimialat

Uralomakkeet laajoilla työpaikkalistoilla:

• Kirjoita ”insinööri” → Ohjelmistoinsinööri, Rakennusinsinööri, Koneinsinööri
• Kirjoita ”market” → Markkinointipäällikkö, Markkina-analyytikko, Markkinapaikka-asiantuntija

kielet

Kielivaihtoehtoja yli 100:lla:

• Kirjoita ”span” → espanja
• Kirjoita ”chin” → Kiina (yksinkertaistettu), Kiina (perinteinen)

Yliopistot/koulut

Oppilaitosten luettelot:

• Kirjoita ”harvard” → Harvardin yliopisto
• Kirjoita ”MIT” → Massachusettsin teknillinen korkeakoulu

Aikavyöhykkeet

Yli 400 aikavyöhykevaihtoehtoa:

• Kirjoita ”tyynenmeren alue” → Tyynimeri/Auckland, Tyynimeri/Honolulu, Yhdysvallat/Tyynimeri
• Kirjoita ”new york” → Amerikka/New_York

Haettavien alasvetovalikoiden määrittäminen

Näin luot haettavia alasvetovalikoita Automaattinen lomakkeiden rakentaja:

Vaihe 1: Asenna automaattinen lomakkeiden rakentaja

1. Mene Laajennukset → Lisää uusi
2. Etsiä "A.F.B.” (lyhenne sanoista Auto Form Builder)
3. Löytö "AFB – Automaattinen lomakkeiden luontityökalu – Vedä ja pudota -lomakeluontityökalu"
4. Napauta Asenna nyt, sitten Aktivoida

Vaihe 2: Lisää alasvetovalikko

1. Luo tai muokkaa lomake
2. Vedä Pudotusvalikosta kenttä lomakkeellesi
3. Napsauta avataksesi asetukset

Vaihe 3: Lisää vaihtoehtosi

Syötä vaihtoehtoluettelosi. Pitkien luetteloiden osalta voit:

• Kirjoita manuaalisesti – Syötä jokainen vaihtoehto yksi kerrallaan
• Lisää joukkona – Liitä vaihtoehtojen luettelo (yksi riviä kohden)

Vaihe 4: Ota haku käyttöön

Etsi avattavasta asetuksista kohtaa Haettavat or Ota haku käyttöön vaihtoehto. Kytke se päälle.

Alasvetovalikko sisältää nyt haku-/suodatinkentän, joka suodattaa vaihtoehtoja käyttäjien kirjoittaessa.

Vaihe 5: Hakutoimintojen määrittäminen

Lomakkeen luontityökalusta riippuen sinulla voi olla vaihtoehtoja, kuten:

• Vähimmäismäärä merkkejä – Aloita suodatus X merkin kirjoituskerran jälkeen
• Hakuasento – Match vaihtoehdon alusta tai mistä tahansa
• Paikkamerkkiteksti – ”Kirjoita hakeaksesi…” tai ”Hae maita…”

Alasvetovalikentän parhaat käytännöt

1. Ota aina käyttöön haku, jossa on yli 20 vaihtoehtoa

Jos alasvetovalikossasi on yli 20 vaihtoehtoa, ota haku käyttöön. Niin yksinkertaista se on. Käyttäjät kiittävät sinua.

2. Käytä selkeää paikkamerkkitekstiä

Kerro käyttäjille, että he voivat hakea:

• "Valitse maa (kirjoita hakeaksesi)"
• "Valitse osavaltiosi..."
• "Hae tai valitse…"

3. Järjestä vaihtoehdot loogisesti

Myös haussa vaihtoehtojen järjestyksellä on merkitystä:

• aakkosellinen – Paras nimille (maat, osavaltiot)
• Yleisin ensin – Laita suositut vaihtoehdot ylimmäiseksi (Yhdysvallat, Iso-Britannia, Kanada)
• ryhmitelty – Luokat erottimilla

4. Sisällytä yleisiä muunnelmia

Käyttäjät saattavat etsiä:

• ”USA” tai ”Yhdysvallat” tai ”USA” tai ”Amerikka”
• ”UK” tai ”Yhdistynyt kuningaskunta” tai ”Britannia” tai ”Englanti”

Jos mahdollista, käytä yleisiä lyhenteitä tai muunnelmia, jotka viittaavat samaan vaihtoehtoon.

5. Testaa mobiililaitteella

Hakukelpoisten alasvetovalikoiden pitäisi toimia sujuvasti kosketuslaitteilla:

• Hakutoiminto on helposti napautettava
• Näppäimistö tulee näkyviin kirjoittamista varten
• Vaihtoehdot ovat riittävän suuria tarkan napautuksen mahdollistamiseksi

Milloin EI kannata käyttää haettavia alasvetovalikoita

Haettavat alasvetovalikot eivät aina ole vastaus:

Lyhyet listat (alle 10 vaihtoehtoa)

5–10 vaihtoehdon kohdalla vakioalasvetovalikko on nopeampi. Ei tarvitse kirjoittaa, kun näet kaiken kerralla.

Kun käyttäjät eivät tiedä tarkkaa termiä

Haku edellyttää, että käyttäjät tietävät, mitä kirjoittaa. Jos he selaavat/tutkevat vaihtoehtoja, luokiteltu luettelo tai valintanapit saattavat toimia paremmin.

Kyllä/Ei tai binäärivalinnat

Käytä sen sijaan valintanappia. Kahden vaihtoehdon kohdalla ei tarvitse olla lainkaan alasvetovalikkoa.

Numeeriset alueet

Ikäryhmien tai määrän valinnassa kannattaa ottaa huomioon:

• Numeron syöttökenttä
• Slider
• Lyhyt alasvetovalikko (1–10)

Vaihtoehtoja haettaville alasvetovalikoille

Tietojesi perusteella harkitse seuraavia vaihtoehtoja:

Automaattinen täyttötekstikenttä

Käyttäjä kirjoittaa vapaasti, ehdotukset näkyvät alla. Hyvä vaihtoehto, kun käyttäjät saattavat syöttää arvoja, joita ei ole luettelossasi.

CSS-alasvetovalikot

Jaa yksi pitkä lista kahteen lyhyempään:

• Ensimmäinen pudotusvalikko: Valitse maanosa
• Toinen pudotusvalikko: Valitse maa (suodatettu mantereen mukaan)

Valintanapit, joissa on ”Muu”

Näytä 5–7 parasta vaihtoehtoa valintanapeina, ja ”Muu”-vaihtoehto paljastaa tekstikentän.

Ryhmitellyt/luokitellut vaihtoehdot

Käytä optgroups-ominaisuutta järjestääksesi asetukset luokittain:

• Pohjois-Amerikka
  • Kanada
  • Meksiko
  • Yhdysvallat
• Eurooppa
  • Ranska
  • Saksa
  • Yhdistynyt kuningaskunta

Valmiiksi rakennetut vaihtoehtoluettelot

Älä keksi pyörää uudelleen. Tässä on yleisiä listoja, joita tarvitset:

Maat

195 YK:n jäsenvaltiota ja territorioita. Harkitse yleisten maiden (Yhdysvallat, Iso-Britannia, Kanada, Australia) sijoittamista alkuun ja sitten aakkosjärjestykseen.

Yhdysvaltojen valtiot

50 osavaltiota sekä Washington D.C. ja territoriot. Aakkosjärjestys toimii hyvin.

Kanadan maakunnat

13 provinssia ja territoriota. Niin lyhyt, että haku on valinnainen.

Aikavyöhykkeet

Käytä aikavyöhyketunnisteita (Amerikka/New_York, Eurooppa/Lontoo). Ryhmittele alueen mukaan.

kielet

ISO-kielikoodit näyttönimineen. Aseta yleisimmät kielet etusijalle.

Toimialat

Vakiomuotoiset toimialaluokitusluettelot (NAICS, SIC) tai mukautetut luettelot kohdeyleisöllesi.

Suorituskykynäkökohdat

Erittäin suuret listat (yli 1000 vaihtoehtoa)

Erittäin suurille listoille:

• Lataa vaihtoehtoja pyynnöstä – Hae palvelimelta käyttäjätyyppeinä
• Aseta vähimmäismerkkimäärä – Vaaditaan 2–3 merkkiä ennen hakua
• Rajaa näytettäviä tuloksia – Näytä 20 parasta ottelua, ei kaikkia 500

Sivun latausvaikutus

Pitkät vaihtoehtoluettelot kasvattavat sivun kokoa. Yli 500 vaihtoehdon luetteloissa kannattaa harkita:

• Latausvaihtoehdot AJAXin kautta
• Kaskadoivien alasvetovalikoiden jakaminen
• Palvelinpuolen haun käyttäminen

Käytettävyys:

Varmista, että haettavat alasvetovalikot ovat helppokäyttöisiä:

Näppäimistön navigointi

• Keskitä kenttä painamalla sarkainnäppäintä
• Kirjoita haku
• Nuolinäppäimet vaihtoehtojen selaamiseen
• Valitse painamalla Enter
• Sulje Esc-näppäin

Näytönlukijat

• Oikeat ARIA-tunnisteet
• Ilmoita tulosten lukumäärä
• Ilmoita valittu vaihtoehto

Visuaaliset indikaattorit

• Selkeät tarkennustilat
• Korostettu nykyinen vaihtoehto
• Latauksen ilmaisin haun aikana

Usein Kysytyt Kysymykset

Kuinka monta vaihtoehtoa on ennen kuin minun on tehtävä haku?

Ota käyttöön haku mille tahansa alasvetovalikolle, jossa on yli 20 vaihtoehtoa. Yli 50 vaihtoehdon kohdalla haku on välttämätön. Jotkut käyttäjät arvostavat jopa 10–15 vaihtoehdon hakua.

Pitäisikö haun löytää osumia alusta vai mistä tahansa?

”Missä tahansa”-haku on anteeksiantavampi. Haku ”york” löytää ”New Yorkin”. Pelkästään alustavien hakujen yhdistäminen on nopeampaa tunnettujen termien kohdalla.

Voivatko käyttäjät edelleen selata kaikkia vaihtoehtoja?

Kyllä, haettavat alasvetovalikot näyttävät yleensä aluksi koko luettelon. Haku suodattaa sen alaspäin, mutta käyttäjät voivat silti vierittää, jos he haluavat.

Mitä jos käyttäjät kirjoittavat hakusanansa väärin?

Perushaku ei käsittele kirjoitusvirheitä. Varmista, että tärkeiden kenttien (kuten maan) kohdalla yleisimmät kirjoitusvirheet on huomioitu, tai käytä sumeaa osumaa, jos mahdollista.

Toimivatko haettavat alasvetovalikot mobiililaitteilla?

Kyllä, ja ne toimivat usein mobiililaitteilla paremmin kuin tavalliset alasvetovalikot, koska kirjoittaminen on nopeampaa kuin pitkän listan selaaminen pienellä vieritysalueella.

Yhteenveto

Tee pitkistä alasvetovalikoista käyttäjäystävällisiä:

1. Tunnista pitkät listat – Mikä tahansa alasvetovalikko, jossa on yli 20 vaihtoehtoa
2. Ota haku käyttöön – Anna käyttäjien suodattaa kirjoittamalla
3. Käytä selkeitä paikkamerkkejä – ”Kirjoita hakeaksesi…”
4. Järjestä loogisesti – Suositut kohteet ensin, sitten aakkosjärjestyksessä
5. Testaa mobiililaitteella – Varmista sujuva kosketuskokemus
6. Harkitse vaihtoehtoja – Kaskadivalikot, ryhmitellyt vaihtoehdot

Yhteenveto

Pitkät alasvetovalikot tappavat lomakkeiden täyttöasteen. Haettavat alasvetovalikot mullistaa käyttökokemuksen – käyttäjät löytävät vaihtoehtonsa sekunneissa loputtoman selaamisen sijaan.

Olipa kyseessä sitten maat, osavaltiot, tuotteet tai mikä tahansa yli 20 vaihtoehdon lista, hakutoiminnon lisääminen tekee lomakkeistasi nopeampia ja käyttäjäystävällisempiä.

Automaattinen lomakkeiden rakentaja voit luoda alasvetokenttiä haettavalla toiminnolla, mikä auttaa käyttäjiä löytämään tarvitsemansa nopeasti jopa pisimmistä listoista.

Oletko valmis parantamaan lomakkeitasi? Lataa automaattinen lomakkeiden rakentaja ja tee alasvetovalikoistasi käyttäjäystävällisiä jo tänään.