Menús despregables con busca: facer listas longas fáciles de usar

Un menú despregable con 200 países. Unha lista de 50 estados. Centos de opcións de produtos. Desprazarse por longas listas despregables é frustrante e provoca o abandono do formulario.

Menús despregables con opción de busca Soluciona isto permitindo que os usuarios escriban para filtrar as opcións ao instante. En lugar de desprazarse, escriben "poden" e ven Canadá na parte superior.

Nesta guía, aprenderás cando usar menús despregables con capacidade de busca e como configuralos nos teus formularios de WordPress.

O problema cos menús despregables longos

Os menús despregables estándar vólvense inutilizables a medida que aumentan as opcións:

Problemas de experiencia do usuario

• Desprazamento sen fin – Atopar «Estados Unidos» nunha lista alfabética de países significa percorrer máis de 180 países
• Pesadelo móbil – Áreas de desprazamento diminutas nas pantallas táctiles
• Tamaño de tempo – Os usuarios pasan máis de 10 segundos buscando unha opción
• Propenso a erros – É doado seleccionar accidentalmente o elemento incorrecto
• Frustrante – Repítese para varios campos despregables

Cando os menús despregables se volven problemáticos

Como funcionan os menús despregables con capacidade de busca

Un menú despregable con capacidade de busca combina unha entrada de texto cunha lista despregable:

1. O usuario fai clic no campo despregable
2. Aparece unha caixa de busca (ou o propio campo faise buscable)
3. O usuario escribe uns cantos caracteres
4. Filtro de opcións en tempo real para coincidir coa entrada
5. O usuario selecciona da lista curta filtrada

Exemplo: Selección de país

Sen busca: Desprácese por máis de 200 países para atopar "Alemaña"

Con busca: Escribe “ger” → consulta Alemaña, Alxeria, Nixeria → fai clic en Alemaña

Tempo aforrado: máis de 10 segundos → 2 segundos

Casos de uso comúns para menús despregables con capacidade de busca

Selección de País

O exemplo clásico. Con máis de 195 países, a busca é esencial:

• Escribe “uni” → Estados Unidos, Reino Unido, Emiratos Árabes Unidos
• Escribe "aus" → Australia, Austria
• Escribe “nova” → Nova Zelandia, Nova Caledonia

Selección de estado/provincia

50 estados dos EUA, 13 provincias canadenses ou rexións de todo o mundo:

• Escribe “cal” → California
• Escribe “novo” → Nova York, Nova Jersey, Nova Hampshire, Novo México

Categorías de produtos

Sitios de comercio electrónico con centos de tipos de produtos:

• Tipo “portátil” → Portátiles, Accesorios para portátiles, Bolsas para portátiles
• Escribe “teléfono” → Teléfonos, fundas para teléfonos, cargadores para teléfonos

Postos de traballo/sectores

Formularios de emprego con amplas listas de traballos:

• Tipo “enxeñeiro/a” → Enxeñeiro/a de software, Enxeñeiro/a civil, Enxeñeiro/a mecánico/a
• Tipo “mercado” → Xerente de mercadotecnia, analista de mercado, especialista en mercado

idiomas

Preferencia de idioma con máis de 100 opcións:

• Escribe “span” → Español
• Escribe “menton” → Chinés (simplificado), Chinés (tradicional)

Universidades/Escolas

Listaxes de institucións educativas:

• Escribe “harvard” → Universidade de Harvard
• Escribe “MIT” → Instituto Tecnolóxico de Massachusetts

Fusos horarios

Máis de 400 opcións de fuso horario:

• Escribe “pacífico” → Pacífico/Auckland, Pacífico/Honolulu, EUA/Pacífico
• Escribe “nova york” → América/Nova_York

Configuración de menús despregables con capacidade de busca

Aquí tes como crear menús despregables con capacidade de busca con Creador automático de formularios:

Paso 1: Instalar o creador de formularios automático

1. Ir a Complementos → Engadir novo
2. Buscar "A.F.B."(a abreviatura de Auto Form Builder)"
3. Buscar "AFB – Creador automático de formularios – Creador de formularios de arrastrar e soltar"
4. prema Instalar agora, Entón Activar

Paso 2: Engadir un campo despregable

1. Crea ou edita o teu formulario
2. arrastra o Desplegable campo no teu formulario
3. Fai clic para abrir a configuración

Paso 3: Engade as túas opcións

Introduza a súa lista de opcións. Para listas longas, pode:

• Escribir manualmente – Introduza cada opción unha por unha
• Engadir en bloque – Pegar unha lista de opcións (unha por liña)

Paso 4: Activar a busca

Na configuración despregable, busca a opción Buscable or Activar a busca opción. Activaa.

O menú despregable agora incluirá unha caixa de busca/filtro que filtra as opcións a medida que os usuarios escriben.

Paso 5: Configurar o comportamento de busca

Dependendo do creador de formularios, podes ter opcións como:

• Caracteres mínimos – Comezar a filtrar despois de escribir X caracteres
• Posición de busca – Coincidencia desde o inicio da opción ou en calquera lugar
• Texto de marcador de posición – «Escribir para buscar...» ou «Buscar países...»

Boas prácticas para os campos despregables

1. Activar sempre a busca para máis de 20 opcións

Se o teu menú despregable ten máis de 20 opcións, activa a busca. É así de sinxelo. Os usuarios agradeceráncho.

2. Usar texto de marcador de posición transparente

Indica aos usuarios que poden buscar:

• "Selecciona un país (escribe para buscar)"
• "Escolle o teu estado..."
• "Buscar ou seleccionar..."

3. Opcións de pedido loxicamente

Mesmo coa busca, a orde das opcións importa:

• alfabético – Mellor para nomes (países, estados)
• Máis común primeiro – Colocar as opcións populares na parte superior (EUA, Reino Unido, Canadá)
• Agrupados – Categorías con separadores

4. Incluír variacións comúns

Os usuarios poderían buscar:

• «EUA» ou «Estados Unidos» ou «EUA» ou «América»
• «Reino Unido» ou «Gran Bretaña» ou «Inglaterra»

Se é posible, inclúe abreviaturas ou variacións comúns que correspondan á mesma opción.

5. Proba no móbil

Os menús despregables con capacidade de busca deberían funcionar sen problemas en dispositivos táctiles:

• A entrada de busca é doada de tocar
• Aparece o teclado para escribir
• As opcións son o suficientemente grandes como para tocar con precisión

Cando NON usar menús despregables con capacidade de busca

Os menús despregables con opción de busca non sempre son a resposta:

Listas curtas (menos de 10 opcións)

Para 5-10 opcións, un menú despregable estándar é máis rápido. Non é necesario escribir cando podes velo todo á vez.

Cando os usuarios non coñecen o termo exacto

A busca require que os usuarios saiban que escribir. Se están a navegar/explorar opcións, unha lista categorizada ou botóns de opción poderían funcionar mellor.

Si/Non ou Opcións binarias

Usa botóns de opción no seu lugar. Dúas opcións non precisan ningún menú despregable.

Rangos numéricos

Para os rangos de idade ou a selección de cantidades, teña en conta:

• Campo de entrada numérica
• Slider
• Menú despregable curto (1-10)

Alternativas aos menús despregables con capacidade de busca

Dependendo dos teus datos, considera estas alternativas:

Campo de texto de autocompletar

O usuario escribe libremente; as suxestións aparecen a continuación. Bo cando os usuarios poden introducir valores que non están na túa lista.

Menús despregables en cascada

Divide unha lista longa en dúas máis curtas:

• Primeiro menú despregable: Selecciona continente
• Segundo menú despregable: Seleccionar país (filtrado por continente)

Botóns de radio con "Outros"

Mostrar as 5-7 opcións principais como botóns de opción cunha opción "Outro" que revela un campo de texto.

Opcións agrupadas/categorizadas

Usa optgroups para organizar as opcións por categoría:

• América
  • Canadá
  • México
  • Estados Unidos
• Europa
  • Francia
  • Alemaña
  • Reino Unido

Listas de opcións predefinidas

Non reinventes a roda. Aquí tes algunhas listas comúns que necesitarás:

países

195 estados membros da ONU máis territorios. Considere colocar os países comúns (Estados Unidos, Reino Unido, Canadá, Australia) na parte superior e despois en orde alfabética.

Estados dos Estados Unidos

50 estados máis Washington D. C. e os seus territorios. O sistema alfabético funciona ben.

Provincias canadenses

13 provincias e territorios. O suficientemente curto como para que a busca sexa opcional.

Fusos horarios

Usa identificadores de fuso horario estándar (América/Nova_York, Europa/Londres). Agrupa por rexión.

idiomas

Códigos de idioma ISO con nomes para mostrar. Primeiro os idiomas comúns.

Industrias

Listas de clasificación industrial estándar (NAICS, SIC) ou listas personalizadas para o teu público.

Consideracións de rendemento

Listas moi grandes (máis de 1000 opcións)

Para listas extremadamente grandes:

• Cargar opcións baixo demanda – Obter do servidor como tipos de usuario
• Definir o mínimo de caracteres – Requírense 2 ou 3 caracteres antes de buscar
• Limitar os resultados mostrados – Mostrar as 20 mellores coincidencias, non as 500

Impacto da carga da páxina

As listas de opcións longas aumentan o tamaño da páxina. Para listas de máis de 500 opcións, teña en conta o seguinte:

• Opcións de carga mediante AJAX
• Entrando en menús despregables en cascada
• Usando a busca no servidor

Accesibilidade

Asegúrate de que os menús despregables con funcións de busca sexan accesibles:

Navegación con teclado

• Tabulador para enfocar o campo
• Escribe a busca
• Teclas de frecha para navegar polas opcións
• Intro para seleccionar
• Escapar para pechar

Lectores de pantalla

• Etiquetas ARIA axeitadas
• Anunciar o número de resultados
• Anunciar a opción seleccionada

Indicadores visuais

• Estados de foco claros
• Opción actual destacada
• Indicador de carga durante a busca

Preguntas máis frecuentes

Cantas opcións teño antes de que precise buscar?

Activa a busca para calquera menú despregable con máis de 20 opcións. Para máis de 50 opcións, a busca é esencial. Algúns usuarios aprecian a busca incluso para 10-15 opcións.

Debería a busca coincidir desde o principio ou desde calquera lugar?

A coincidencia de "en calquera lugar" é máis tolerante. Ao buscar "york", atopas "Nova York". A coincidencia só desde o principio é máis rápida para termos coñecidos.

Os usuarios aínda poden desprazarse por todas as opcións?

Si, os menús despregables con opción de busca adoitan mostrar a lista completa inicialmente. A busca fíltraa cara abaixo, pero os usuarios aínda poden desprazarse se o prefiren.

Que ocorre se os usuarios escriben mal a súa busca?

A busca básica non xestiona os erros ortográficos. Para campos importantes (como o país), asegúrate de que estean cubertos os erros ortográficos máis comúns ou usa a coincidencia aproximada se está dispoñible.

Funcionan os menús despregables con funcións de busca en móbiles?

Si, e adoitan ser mellores en móbiles que os menús despregables estándar porque escribir é máis rápido que percorrer unha lista longa cunha área de desprazamento pequena.

Resumo

Fai que as listas despregables longas sexan fáciles de usar:

1. Identificar listas longas – Calquera menú despregable con máis de 20 opcións
2. Activar a busca – Permitir que os usuarios escriban para filtrar
3. Usar marcadores de posición transparentes – "Escribe para buscar..."
4. Ordenar loxicamente – Elementos populares primeiro, despois alfabéticamente
5. Proba en móbil – Garantir unha experiencia táctil suave
6. Considere alternativas – Menús despregables en cascada, opcións agrupadas

Conclusión

As listas despregables longas acaban coas taxas de finalización de formularios. Menús despregables con opción de busca transformar a experiencia: os usuarios atopan a súa opción en segundos en lugar de desprazarse sen parar.

Tanto se se trata de países, estados, produtos ou calquera lista con máis de 20 opcións, engadir a funcionalidade de busca fai que os teus formularios sexan máis rápidos e fáciles de usar.

Creador automático de formularios permíteche crear campos despregables con funcionalidade de busca, o que axuda aos usuarios a atopar rapidamente o que necesitan mesmo nas listas máis longas.

Listo/a para mellorar os teus formularios? Descargar o creador automático de formularios e fai que as túas listas despregables sexan fáciles de usar hoxe mesmo.