Autocomplete
El autocomplete (o type-ahead) muestra sugerencias en tiempo real mientras el usuario teclea en la barra de búsqueda: productos populares, categorías, consultas frecuentes y correcciones tipográficas. Bien implementado, reduce abandono de búsqueda un 20-40 % y acorta el camino a la conversión.
¿Qué es el autocomplete?
Cada vez que el usuario teclea una letra, el sistema lanza una consulta al motor de búsqueda y muestra resultados parciales:
- Sugerencias de consulta: “zapat…” → “zapatillas running”, “zapatos vestir”, “zapatero pasillo”.
- Productos directos: la fila superior muestra 3-5 productos coincidentes con imagen y precio.
- Categorías: enlaces a categorías relevantes.
- Corrección de typos: “zapatlias” → “¿quizás zapatillas?”.
Tres pilares de un buen autocomplete:
- Latencia < 100 ms por keystroke o el usuario lo percibe lento.
- Relevancia personalizada según el contexto (qué busca habitualmente esta tienda).
- Diseño visual que aproveche el espacio sin saturar.
Métricas clave
- CTR de sugerencias: % de usuarios que clican una sugerencia antes de pulsar Enter. Bueno: > 35 %.
- Time-to-result: tiempo desde primera tecla hasta primer click. Reducción típica con autocomplete: 30-50 %.
- Search abandonment: % de búsquedas que terminan sin click. Autocomplete reduce esto un 20-40 %.
Mejores prácticas
- Empezar a sugerir desde el primer carácter (algunos prefieren el segundo).
- Debounce ligero (30-50 ms) para no bombardear el servidor.
- Resaltar la coincidencia en negrita dentro de la sugerencia.
- Mostrar imagen + nombre + precio para productos; solo texto para consultas.
- Diferenciar visualmente los bloques: productos arriba, consultas en medio, categorías abajo.
- Móvil: minimizar columnas, dar más altura a cada sugerencia para touch.
Autocomplete en APPROSEARCH
Incluido en todos los planes desde Start (19 €/mes). El widget de APPROSEARCH renderiza por defecto:
- 5 sugerencias de consulta basadas en búsquedas recientes del catálogo + tendencias.
- 3 productos directos con imagen, precio y CTA “Ver producto”.
- 2-3 categorías populares cuando aplica.
El comportamiento es personalizable desde el panel de administración: orden de bloques, número de sugerencias, atributos a mostrar, color de resaltado.
Lecturas recomendadas
- Baymard Institute: Autocomplete benchmarks (estudios anuales de UX e-commerce).
- Algolia blog: Search-as-you-type best practices.
Última actualización: 2026-05-25
Lleva la teoría a tu tienda
APPROSEARCH implementa estos conceptos por defecto. Prueba 14 días gratis sin tarjeta.