UX de búsqueda: caja, sugerencias y resultados sin callejones
La UX de búsqueda abarca la caja, el autocompletado y la página sin resultados. Qué recomienda Baymard, qué errores se repiten y cómo diseñar la salida.
¿Por qué la búsqueda es un problema de diseño?
Porque muchas personas usan la búsqueda como primer recurso. Cuando la navegación no es clara, escriben lo que buscan y esperan que el sitio entienda. Si no lo entiende, la persona no vuelve a intentar: se va. Según el benchmark de Baymard, casi la mitad de los sitios de comercio electrónico no ofrece formas efectivas de recuperarse cuando una búsqueda no devuelve resultados (Baymard: No results page).
Las tres partes de la búsqueda, la caja, las sugerencias y el estado sin resultados, se diseñan juntas. Si una falla, las otras no alcanzan a compensarla.
¿Qué pasa en la caja?
La prominencia de la caja debe corresponder a la importancia de la búsqueda en tu sitio. Baymard observa que cuanto más grande es el campo (y su texto), más prominente se percibe, y que una caja físicamente pequeña o discreta pierde mucha visibilidad. Un catálogo grande donde la gente llega buscando necesita una caja muy visible; un sitio que se explora por categorías puede permitirse una más discreta (Baymard: Search field design).
La ubicación también pesa. En ese mismo artículo, Baymard señala que la esquina superior derecha de la cabecera suele recibir menos atención, mientras que el centro de la cabecera recibe mucha. No hay una medida mínima universal: la forma de saber si tu caja se ve es observar a personas reales intentando encontrar algo.
¿Cómo deben ser las sugerencias?
El autocompletado ayuda a formular mejor la consulta, no solo a escribir menos. Baymard reporta que en sus pruebas las personas fueron muy fieles a las sugerencias del sitio, y que las sugerencias deficientes mandaron a varios participantes por desvíos, a veces hasta abandonar el sitio. Por eso una sugerencia mala puede descarrilar la búsqueda tanto como un resultado malo. Su página de ejemplos señala que el autocompletado ya se usa en el 90 % de los grandes sitios de comercio electrónico (Baymard: Autocomplete suggestions).
Las recomendaciones de diseño del artículo de Baymard publicado en 2022 son concretas (Baymard: Autocomplete design):
- Lista corta. No más de 10 sugerencias en escritorio y entre 4 y 8 en móvil. Baymard encontró problemas al superar esas cifras, y la mayoría de las personas elige entre las primeras opciones.
- Sin scroll interno en escritorio. Deja que la lista crezca hasta su altura natural en lugar de ponerle su propia barra de desplazamiento.
- Negrita solo en la parte predictiva. Lo que la persona ya escribió no se destaca; lo que el sistema completa sí. Así se ve rápido en qué se diferencian las sugerencias.
- Sugerencias de alcance con otro estilo. Una sugerencia como «sofás en muebles» debe verse distinta de una consulta simple. En las pruebas funcionaron la cursiva, el color y la sangría, sin que un estilo fuera claramente mejor.
- Teclado. Las flechas arriba y abajo recorren la lista, Enter envía la sugerencia activa y la sugerencia activa debe verse resaltada.
¿Qué hacer cuando no hay resultados?
Este es el punto donde más sitios fallan. Una página que solo dice «No se encontraron resultados» es un callejón. Baymard propone cinco estrategias para salir de él (Baymard: No results page):
- Categorías relacionadas. Una categoría más amplia o una lista con un filtro relevante ya aplicado.
- Búsquedas alternativas con vista previa. Muestra otras formulaciones de la consulta con los tres a cinco productos principales de cada una.
- Recomendaciones personalizadas. Por ejemplo, los productos vistos recientemente.
- Una vía humana. Teléfono de ventas, chat u otros enlaces de ayuda.
- Productos y categorías populares. Tendencias o más vendidos, algo que mostrar cuando la búsqueda falla.
Baymard también señala un detalle importante: si solo una consulta alternativa devuelve resultados, el sitio debe aplicarla automáticamente, con un aviso que explique que la consulta original no tuvo resultados pero la revisada sí.
¿Cómo se ve un buen estado sin resultados?
Un buen estado sin resultados explica qué pasó, sugiere un siguiente paso y ofrece una salida con un solo botón principal. Por ejemplo: «No encontramos “cafetera de prensa francesa”. Prueba con “cafetera de émbolo” o revisa la categoría Café». Lo que no conviene es llenar la página de sugerencias sin orden: la persona necesita una decisión, no veinte opciones. Elige dos o tres de las cinco estrategias de Baymard según lo que tu catálogo permita, en lugar de apilarlas todas.
Para el resto de estados vacíos, como una lista sin contenido todavía, lee empty states.
¿Cuándo NO conviene una búsqueda grande?
- Si tu sitio tiene diez páginas, la navegación bien hecha suele servir más que una búsqueda con autocompletado.
- Si el contenido cambia poco, un índice o una página de categorías puede ser más claro que una caja de búsqueda.
- Si no vas a mantener las sugerencias ni los sinónimos, un autocompletado desactualizado genera sugerencias raras. Como la gente tiende a seguirlas, hacen más daño que ayuda.
Ejemplo ilustrativo
Ejemplo ilustrativo: en una tienda de café, alguien busca «café molido para prensa francesa» y no hay resultados exactos. La versión anterior mostraba «No hay resultados» y nada más. La nueva muestra: «No encontramos esa combinación. ¿Quisiste decir “café molido grueso”?», con cuatro productos de esa búsqueda y un enlace a la categoría «Café molido». Si solo esa alternativa devuelve resultados, el sitio la aplica de inmediato y muestra un aviso arriba. Además, el equipo revisa cada semana las consultas que fallan y agrega sinónimos a la lista, para que el mismo callejón no se repita.
Si esa búsqueda se combina con muchos criterios, revisa filtros y búsqueda facetada. Y para decidir cuándo mostrar cada sugerencia, la consistencia y los estándares del sitio evitan que el autocompletado se comporte distinto en cada página.
Errores comunes
- Dejar la página sin resultados como un callejón sin salida.
- Mostrar sugerencias que devuelven cero resultados.
- Usar autocompletado sin tolerar errores de escritura.
- Poner la lista de sugerencias con su propio scroll.
- Mostrar demasiadas sugerencias y dejar que la persona decida peor.
- No revisar qué consultas fallan, de modo que el problema se repite.
Qué puedes hacer mañana
- Busca en tu producto tres términos que no existan y anota lo que aparece en cada caso.
- Revisa si tu autocompletado muestra alguna sugerencia que devuelve cero resultados.
- Diseña un estado sin resultados con una alternativa, una categoría y una vía de ayuda, y pruébalo con dos personas.