Técnicas › Artículo

Patrones de autocompletado: sugerencias de búsqueda y campos que se rellenan solos

Patrones de autocompletado en búsqueda y formularios: límites de sugerencias según Baymard, atributos autocomplete de HTML y el criterio WCAG 1.3.5.

info Definición Rápida
El autocompletado tiene dos formas. En búsqueda, la interfaz sugiere consultas mientras el usuario escribe. En formularios, el navegador rellena campos con datos guardados, usando el atributo autocomplete de HTML. Las dos ahorran esfuerzo, pero solo si las sugerencias son útiles y el atributo es correcto.

¿Qué tipos de autocompletado existen?

El autocompletado de búsqueda muestra sugerencias debajo del campo mientras se escribe. Puede completar la consulta, sugerir una categoría o llevar directamente a un producto. El de formularios es distinto: no lo controla la página, sino el navegador, que propone datos como el nombre, la dirección o el número de tarjeta.

Los dos problemas son distintos, pero comparten una pregunta: ¿el usuario gana tiempo o pierde atención? Una sugerencia que no sirve es ruido; un campo que se rellena mal es un error.

¿Por qué le importa a un diseñador junior?

Porque el autocompletado aparece en casi todos los productos y casi nadie lo revisa. Según Baymard (2022), el autocompletado de búsqueda aparece en el 80 % de los sitios de comercio electrónico que analizó, pero solo el 19 % acierta todos los detalles de implementación. Esa brecha es una oportunidad de mejora que no requiere un gran rediseño.

Además, el autocompletado de formularios evita escribir a mano datos que el navegador ya conoce. Si el campo está bien identificado como código postal, el usuario no tiene que teclearlo, y con ello se evitan errores de tecleo.

¿Cómo diseñar el autocompletado de búsqueda?

  1. Limita el número de sugerencias. Baymard indica no superar 10 en escritorio, y apunta a 4–8 en móvil.
  2. Resalta lo que falta, no lo que ya escribiste. Lo útil es ver la parte predictiva. Si todo el texto aparece en negrita, el usuario no sabe qué le ofrece la sugerencia.
  3. Distingue tipos de sugerencia. Una consulta (“sofá cama”) y un ámbito (“en Muebles”) deben verse diferentes. Baymard encontró que ningún estilo gana a los demás: la cursiva, otro color de texto o una sangría bastan como señal.
  4. No satures con contenido extra. Baymard aconseja limitar elementos adicionales, como sugerencias de producto o búsquedas populares, que pueden tapar las sugerencias de la consulta.
  5. Prueba con consultas reales. El autocompletado que parece bien con dos palabras puede dar sugerencias confusas con términos poco frecuentes.

Para la forma de mostrar cambios mientras se carga la respuesta, el artículo sobre estados de carga explica cómo evitar que la lista parpadee.

¿Cómo usar bien el atributo autocomplete en formularios?

MDN describe el atributo y sus valores con detalle. Algunas reglas prácticas:

  • Usa el nombre correcto para cada campo. given-name para el nombre, family-name para el apellido, email para el correo y tel para el teléfono. El W3C lista tokens como username, nickname o bday.
  • Respeta el orden de los tokens. MDN indica un orden: primero el identificador de sección, después shipping o billing, luego los tokens de detalle, y webauthn al final.
  • No mezcles street-address con las líneas. street-address no incluye ciudad, código postal ni país, y address-line1 a address-line3 solo deben usarse si no existe street-address.
  • Usa los tokens de pago cuando correspondan. cc-number para el número de tarjeta, cc-exp para la fecha de caducidad (MM/YY o MM/YYYY) y cc-csc para el código de seguridad.
  • Usa off solo cuando haga falta. MDN recomienda reservarlo para casos como un CAPTCHA o un campo de código de un solo uso, y no aplicarlo a todo el formulario.

Para la validación de estos campos, el artículo sobre timing de validación de formularios explica cuándo conviene avisar del error.

¿Qué exige WCAG 1.3.5?

El criterio 1.3.5, Identify Input Purpose, es de nivel AA. Pide que el propósito de cada campo que recoge datos del usuario pueda determinarse por código, siempre que el campo sirva a un propósito de la lista del criterio y la tecnología de apoyo pueda expresarlo. No aplica a campos que piden datos de otra persona.

Esto permite que el navegador y las tecnologías de apoyo reconozcan qué pide cada campo y lo presenten o rellenen de forma adecuada. Sin el atributo, tendrían que adivinarlo.

¿Cuándo NO conviene el autocompletado?

  • En campos de un solo uso. Un CAPTCHA o un código de verificación no deben rellenarse solos; MDN pone estos casos como ejemplo de uso legítimo de autocomplete="off".
  • En campos que no piden datos del usuario. WCAG 1.3.5 no aplica, y el autocompletado de datos personales no tiene sentido.
  • Como sustituto de un autocomplete correcto. Las sugerencias visibles no reemplazan el atributo, que sigue siendo la base de todo lo demás.

Si quieres usar IA para generar sugerencias, el artículo sobre autocompletado con IA trata los riesgos de que la sugerencia sea inventada.

Ejemplo

Ejemplo ilustrativo: un formulario de envío en una tienda online tiene tres problemas.

  • Problema: el campo “dirección” pide calle, número y piso en una sola línea, sin atributos. El navegador no puede rellenarlo y el usuario lo escribe a mano.
  • Corrección: se separa la dirección en líneas con street-address y postal-code, y el campo de ciudad usa address-level2.
  • Problema 2: el campo de búsqueda muestra 25 sugerencias en el móvil, con el texto escrito en negrita.
  • Corrección: se limita a 6 sugerencias y se resalta la parte que falta.

El resultado no cambia el diseño visual; lo que se busca es que el envío sea más rápido y que haya menos errores de dirección. Es un buen ejemplo de cómo el autocompletado mejora el checkout sin tocar la estética.

Errores comunes

  • Usar autocomplete="off" para bloquear el autocompletado, sin saber que los navegadores pueden ignorarlo en campos de inicio de sesión.
  • Mezclar street-address con las líneas address-line en el mismo formulario.
  • Ordenar mal los tokens del atributo.
  • Resaltar el texto ya escrito en lugar de la sugerencia.
  • Mostrar listas de sugerencias más largas de lo que el usuario puede leer.
  • Mostrar en móvil la misma lista larga que en escritorio, cuando Baymard apunta a 4–8 sugerencias.

Fuentes

Preguntas frecuentes

¿Qué es el autocompletado en UX?
Hay dos familias. En búsqueda, la interfaz muestra sugerencias mientras el usuario escribe. En formularios, el navegador rellena campos con datos guardados, usando el atributo autocomplete de HTML y sus valores.
¿Cuántas sugerencias debe mostrar un autocompletado de búsqueda?
Según Baymard, en escritorio las sugerencias no deberían superar 10, y en móvil un objetivo de 4 a 8 funciona para la mayoría de los usuarios.
¿Qué debe resaltarse en una sugerencia?
La parte predictiva, es decir, lo que falta por escribir, y no las letras que el usuario ya tecleó. Baymard recomienda que las sugerencias de ámbito, como una categoría, tengan un estilo propio distinto del de las de consulta.
¿Sirve autocomplete="off" para evitar el autocompletado?
No siempre. MDN indica que en muchos navegadores modernos no impide que el gestor de contraseñas ofrezca guardar o rellenar, y que pueden ignorarlo en campos de inicio de sesión.
¿Qué exige WCAG 1.3.5 sobre los campos de formulario?
Que el propósito de cada campo que pide datos del usuario pueda determinarse por código, cuando el campo sirva a un propósito de la lista y la tecnología lo soporte. Es un criterio de nivel AA.