Menús desplegables amb possibilitat de cerca: fer que les llistes llargues siguin fàcils d'utilitzar

Un menú desplegable amb 200 països. Una llista de 50 estats. Centenars d'opcions de productes. Desplaçar-se per llargues llistes desplegables és frustrant i provoca l'abandonament del formulari.

Menús desplegables amb possibilitat de cerca resolen això permetent que els usuaris escriguin per filtrar les opcions a l'instant. En comptes de desplaçar-se, escriuen "can" i veuen Canadà a la part superior.

En aquesta guia, aprendràs quan utilitzar els desplegables amb capacitat de cerca i com configurar-los als formularis de WordPress.

El problema amb els desplegables llargs

Els menús desplegables estàndard es tornen inutilitzables a mesura que augmenten les opcions:

Problemes d'experiència d'usuari

• Desplaçament sense fi – Trobar «Estats Units» en una llista alfabètica de països significa desplaçar-se per més de 180 països
• Malson mòbil – Àrees de desplaçament petites a les pantalles tàctils
• Es requereix temps – Els usuaris dediquen més de 10 segons a trobar una opció
• Propens a errors – És fàcil seleccionar accidentalment l'element equivocat
• Frustrant – Es repeteix per a diversos camps desplegables

Quan els menús desplegables es tornen problemàtics

Com funcionen els menús desplegables amb possibilitat de cerca

Un menú desplegable amb funció de cerca combina una entrada de text amb una llista desplegable:

1. L'usuari fa clic al camp desplegable
2. Apareix un quadre de cerca (o el camp mateix esdevé cercable)
3. L'usuari escriu uns quants caràcters
4. Filtre d'opcions en temps real per coincidir amb l'entrada
5. L'usuari selecciona de la llista curta filtrada

Exemple: Selecció de país

Sense cerca: Desplaça't per més de 200 països per trobar "Alemanya"

Amb la cerca: Escriu “ger” → consulta Alemanya, Algèria, Nigèria → fes clic a Alemanya

Temps estalviat: 10+ segons → 2 segons

Casos d'ús comuns per a desplegables amb possibilitat de cerca

Selecció de país

L'exemple clàssic. Amb més de 195 països, la cerca és essencial:

• Escriu “uni” → Estats Units, Regne Unit, Emirats Àrabs Units
• Escriviu "aus" → Austràlia, Àustria
• Escriu “nova” → Nova Zelanda, Nova Caledònia

Selecció d'estat/província

50 estats dels EUA, 13 províncies canadenques o regions de tot el món:

• Escriu “cal” → Califòrnia
• Escriu “nou” → Nova York, Nova Jersey, Nova Hampshire, Nou Mèxic

Categories de productes

Llocs de comerç electrònic amb centenars de tipus de productes:

• Escriviu “portàtil” → Portàtils, Accessoris per a portàtils, Bosses per a portàtils
• Escriu “telèfon” → Telèfons, Fundes per a telèfons, Carregadors per a telèfons

Títols de feina/Indústries

Formularis professionals amb llistes de llocs de treball extenses:

• Tipus «enginyer» → Enginyer de programari, Enginyer civil, Enginyer mecànic
• Escriu “mercat” → Director de màrqueting, analista de mercat, especialista en mercat

idiomes

Preferència d'idioma amb més de 100 opcions:

• Escriu «span» → Castellà
• Escriu “chin” → Xinès (simplificat), Xinès (tradicional)

Universitats/Escoles

Llistes d'institucions educatives:

• Escriu “harvard” → Universitat de Harvard
• Escriu “MIT” → Institut Tecnològic de Massachusetts

Zones horàries

Més de 400 opcions de fus horari:

• Escriu “pacífic” → Pacífic/Auckland, Pacífic/Honolulu, EUA/Pacífic
• Escriu “nova york” → Amèrica/Nova_York

Configuració de desplegables amb possibilitat de cerca

A continuació s'explica com crear desplegables amb capacitat de cerca amb Creador de formularis automàtic:

Pas 1: Instal·leu el Creador de formularis automàtic

1. Anar a Complements → Afegeix-ne de nous
2. Buscar "FIG"(nom abreujat de Creador automàtic de formularis)
3. Cerca "AFB – Creador automàtic de formularis – Creador de formularis d'arrossegar i deixar anar"
4. feu clic install Now, A continuació, Activate

Pas 2: Afegiu un camp desplegable

1. Crea o edita el teu formulari
2. Arrossegueu el Dropdown camp al vostre formulari
3. Feu clic per obrir la configuració

Pas 3: Afegiu les vostres opcions

Introduïu la vostra llista d'opcions. Per a llistes llargues, podeu:

• Escriviu manualment – Introduïu cada opció una per una
• Afegir en bloc – Enganxa una llista d'opcions (una per línia)

Pas 4: Activa la cerca

A la configuració desplegable, busqueu Cercable or Activa la cerca opció. Activeu-la.

El menú desplegable ara inclourà un quadre de cerca/filtre que filtra les opcions a mesura que els usuaris escriuen.

Pas 5: Configura el comportament de cerca

Segons el creador de formularis, podeu tenir opcions com ara:

• Caràcters mínims – Inicia el filtratge després d'escriure X caràcters
• Posició de cerca – Coincidència des del principi de l'opció o des de qualsevol lloc
• Text de marcador de posició – «Escriu per cercar...» o «Cerca països...»

Millors pràctiques per als camps desplegables

1. Activa sempre la cerca per a més de 20 opcions

Si el menú desplegable té més de 20 opcions, activa la cerca. És així de senzill. Els usuaris t'ho agrairan.

2. Utilitzeu text de marcador de posició transparent

Digues als usuaris que poden cercar:

• "Seleccioneu un país (escrigueu per cercar)"
• "Tria el teu estat..."
• "Cerca o selecciona..."

3. Ordeneu les opcions de manera lògica

Fins i tot amb la cerca, l'ordre de les opcions importa:

• alfabètic – Millor per a noms (països, estats)
• Primer més comú – Posa les opcions populars a la part superior (EUA, Regne Unit, Canadà)
• Agrupats – Categories amb separadors

4. Inclou variacions comunes

Els usuaris poden cercar:

• «EUA» o «Estats Units» o «EUA» o «Amèrica»
• «Regne Unit» o «Regne Unit» o «Gran Bretanya» o «Anglaterra»

Si és possible, incloeu abreviatures o variacions comunes que corresponguin a la mateixa opció.

5. Prova al mòbil

Els menús desplegables amb capacitat de cerca haurien de funcionar correctament en dispositius tàctils:

• L'entrada de cerca es pot tocar fàcilment
• Apareix el teclat per escriure
• Les opcions són prou grans per tocar amb precisió

Quan NO s'han d'utilitzar els desplegables amb capacitat de cerca

Els desplegables amb cerca no sempre són la resposta:

Llistes curtes (menys de 10 opcions)

Per a 5-10 opcions, un menú desplegable estàndard és més ràpid. No cal escriure quan es pot veure tot alhora.

Quan els usuaris no coneixen el terme exacte

La cerca requereix que els usuaris sàpiguen què escriure. Si estan navegant o explorant opcions, una llista categoritzada o botons d'opció poden funcionar millor.

Sí/No o opcions binàries

Feu servir botons d'opció. Dues opcions no necessiten cap menú desplegable.

Rangs numèrics

Per a intervals d'edat o selecció de quantitats, tingueu en compte:

• Camp d'entrada numèrica
• Botó lliscant
• Menú desplegable curt (1-10)

Alternatives als menús desplegables amb possibilitat de cerca

Segons les vostres dades, considereu aquestes alternatives:

Camp de text d'autocompleció

L'usuari escriu lliurement, els suggeriments apareixen a continuació. És bo quan els usuaris poden introduir valors que no són a la vostra llista.

Menús desplegables en cascada

Divideix una llista llarga en dues de més curtes:

• Primer menú desplegable: seleccioneu el continent
• Segon menú desplegable: seleccioneu el país (filtrat per continent)

Botons d'opció amb "Altres"

Mostra les 5-7 opcions principals com a botons de ràdio amb una opció "Altres" que revela un camp de text.

Opcions agrupades/categoritzades

Utilitzeu optgroups per organitzar les opcions per categoria:

• Amèrica del Nord
  • Canadà
  • Mèxic
  • United States
• Europa
  • França
  • Germany
  • Regne Unit

Llistes d'opcions preconstruïdes

No reinventis la roda. Aquí tens unes llistes comunes que necessitaràs:

països

195 estats membres de l'ONU més territoris. Penseu en posar els països comuns (EUA, Regne Unit, Canadà, Austràlia) a la part superior i després per ordre alfabètic.

Estats dels Estats Units

50 estats més DC i territoris. L'ordre alfabètic funciona bé.

Províncies canadenques

13 províncies i territoris. Prou ​​curt perquè la cerca sigui opcional.

Zones horàries

Utilitzeu identificadors de fus horari estàndard (Amèrica/Nova_York, Europa/Londres). Agrupeu per regió.

idiomes

Codis d'idioma ISO amb noms per mostrar. Poseu primer els idiomes comuns.

Indústries

Llistes de classificació estàndard de la indústria (NAICS, SIC) o llistes personalitzades per al vostre públic.

Consideracions de rendiment

Llistes molt grans (més de 1000 opcions)

Per a llistes extremadament grans:

• Opcions de càrrega a demanda – Obtenir del servidor com a tipus d'usuari
• Estableix un mínim de caràcters – Calen 2 o 3 caràcters abans de cercar
• Limita els resultats mostrats – Mostra els 20 millors partits, no tots els 500

Impacte de la càrrega de la pàgina

Les llistes d'opcions llargues augmenten la mida de la pàgina. Per a llistes de més de 500 opcions, tingueu en compte el següent:

• Opcions de càrrega mitjançant AJAX
• Irrompent en desplegables en cascada
• Ús de la cerca del costat del servidor

Accessibilitat

Assegureu-vos que els menús desplegables amb funció de cerca siguin accessibles:

Navegació per teclat

• Tabulador per enfocar el camp
• Escriviu per cercar
• Tecles de fletxa per navegar per les opcions
• Introduïu per seleccionar
• Escapa per tancar

Lectors de pantalla

• Etiquetes ARIA adequades
• Anuncia el nombre de resultats
• Anuncia l'opció seleccionada

Indicadors visuals

• Estats de focus clars
• Opció actual destacada
• Indicador de càrrega durant la cerca

Preguntes freqüents

Quantes opcions hi ha abans que necessiti cercar?

Habilita la cerca per a qualsevol menú desplegable amb més de 20 opcions. Per a més de 50 opcions, la cerca és essencial. Alguns usuaris aprecien la cerca fins i tot per a 10-15 opcions.

La cerca hauria de coincidir des del principi o des de qualsevol lloc?

La coincidència de "qualsevol lloc" és més tolerant. Si es cerca "york", es troba "Nova York". La coincidència només des del principi és més ràpida per a termes coneguts.

Els usuaris encara poden desplaçar-se per totes les opcions?

Sí, els menús desplegables amb cerca solen mostrar la llista completa inicialment. La cerca la filtra cap avall, però els usuaris encara poden desplaçar-se si ho prefereixen.

Què passa si els usuaris escriuen malament la cerca?

La cerca bàsica no gestiona les errades tipogràfiques. Per a camps importants (com ara el país), assegureu-vos que estiguin incloses les errades ortogràfiques comunes o utilitzeu la cerca aproximada si està disponible.

Els desplegables amb funció de cerca funcionen als mòbils?

Sí, i sovint són millors en dispositius mòbils que els desplegables estàndard perquè escriure és més ràpid que desplaçar-se per una llista llarga amb una àrea de desplaçament petita.

resum

Feu que les llistes desplegables llargues siguin fàcils d'utilitzar:

1. Identificar llistes llargues – Qualsevol desplegable amb més de 20 opcions
2. Activa la cerca – Permet als usuaris escriure per filtrar
3. Utilitzeu marcadors de posició transparents – “Escriu per cercar…”
4. Ordena lògicament – Primer els elements populars i després per ordre alfabètic.
5. Prova al mòbil – Garantir una experiència tàctil suau
6. Penseu en alternatives – Menús desplegables en cascada, opcions agrupades

Conclusió

Les llistes desplegables llargues redueixen les taxes de finalització de formularis. Menús desplegables amb possibilitat de cerca transformar l'experiència: els usuaris troben la seva opció en segons en comptes de desplaçar-se sense parar.

Tant si es tracta de països, estats, productes o qualsevol llista amb més de 20 opcions, afegir la funcionalitat de cerca fa que els formularis siguin més ràpids i fàcils d'utilitzar.

Creador de formularis automàtic permet crear camps desplegables amb funcionalitat de cerca, cosa que ajuda els usuaris a trobar ràpidament el que necessiten fins i tot a les llistes més llargues.

A punt per millorar els teus formularis? Descarrega el creador de formularis automàtic i fes que les teves llistes desplegables siguin fàcils d'utilitzar avui mateix.