Cuando una tienda supera los 500 productos y las 15 categorías, las cosas cambian de naturaleza. El reto de la navegación de una tienda escalada ya no es “cómo mantenerla ordenada”, sino “cómo ayudar a miles de compradores con decenas de intenciones distintas a encontrar lo que necesitan en cuestión de segundos”. Esta es la etapa con la que más batallé cuando llevaba una tienda, así que déjame compartir lo que aprendí.
Cómo se ve la Etapa 3
El rasgo más evidente es un catálogo grande y de varios niveles. Ya no tienes unas pocas categorías planas, sino un árbol de 2 o 3 niveles: un grupo superior, subgrupos y luego un filtrado por atributos. Una tienda de moda puede tener Hombre / Mujer / Niños, con cada rama dividida en Parte de arriba / Parte de abajo / Accesorios, y después aún más por ocasión o temporada.
El tráfico también se vuelve más variado. Los compradores que llegan desde la búsqueda de Google suelen saber ya lo que quieren. Los que llegan desde anuncios de Facebook o TikTok aterrizan a menudo por impulso, hacen clic en un producto y luego deciden qué hacer a continuación. Los que vienen del correo electrónico son clientes recurrentes que ya conocen el terreno. Cada fuente se comporta de forma distinta, y el menú tiene que atender a las tres en la misma interfaz.
Muchas tiendas en esta etapa también venden en varios mercados e idiomas. Y la velocidad ya es una cuestión de supervivencia. Según Google, los umbrales recomendados para los Core Web Vitals son un LCP por debajo de 2,5 segundos, un INP por debajo de 200 ms y un CLS por debajo de 0,1. Cada app adicional que instalas puede consumir parte de ese margen, así que mantener la página ligera exige verdadera disciplina.
Las necesidades de navegación a esta escala
Una simple barra de menú no basta para la navegación de una tienda escalada. Las necesidades suelen incluir:
- Un Mega Menu más complejo: varias columnas para desplegar todo el árbol de categorías, con espacio para un producto destacado y un banner de promoción de temporada.
- Navegación móvil optimizada: la mayoría de los pedidos llegan desde el teléfono, así que la experiencia táctil debe ser fluida y estar al alcance de la mano.
- Pruebas A/B de menú: cuando el tráfico es suficiente, mide en lugar de adivinar.
- Un FAB para CTAs de temporada: un botón flotante para impulsar la campaña activa sin tocar todo el menú.
El mega menú de varias columnas — y sus límites
Un mega menú de varias columnas permite a los compradores ver toda la estructura de la tienda con un solo hover. Es una gran ventaja en escritorio, donde hay espacio de sobra y un cursor preciso.
Pero varias columnas no significa amontonar todo dentro. Los compradores escanean la pantalla de izquierda a derecha y de arriba abajo, así que la primera columna, la de la izquierda, debería contener el grupo más importante. Colocar un producto destacado o un banner en la columna de la derecha —la zona a la que la vista llega al final— suele ser más sensato que encajarlo en mitad del flujo de lectura.
Móvil: donde se decide el pedido
En el teléfono, el pulgar es el cursor. Según Steven Hoober (UXmatters), la mayoría de los usuarios sostienen el móvil con una sola mano y lo manejan con el pulgar, por lo que la zona más fácil de tocar es la mitad inferior de la pantalla. Por eso una Tab Bar fija en la parte de abajo suele ser más eficaz que amontonar todo en un menú de hamburguesa en la parte superior.
El Nielsen Norman Group también señala que esconder toda la navegación tras una hamburguesa reduce notablemente el uso que los compradores hacen del menú. Recomiendan una combinación: mostrar de entrada unos pocos accesos directos importantes y dejar el resto dentro de un slide menu. Para una tienda con más de 500 productos, esta combinación es casi obligatoria: no puedes esperar que los compradores abran ellos mismos la hamburguesa para explorar el catálogo.
Algunas decisiones difíciles
A esta escala, las decisiones ya no tienen respuestas universales. Algunas cosas que tuve que sopesar:
¿Deberías dividir el menú por persona? Por ejemplo, separar “Para mí” y “Para regalar”. Esto funciona cuando los dos grupos de compradores realmente piensan de forma distinta: quien compra un regalo se fija en la ocasión, el presupuesto, el destinatario. Pero si impones una persona en la que los compradores no piensan, solo añades otra capa de duda. Mira los datos de tu búsqueda interna antes de decidir.
¿Deberías incorporar la búsqueda al mega menú? Con un catálogo grande, la búsqueda suele ser la vía más rápida para que un comprador con intención llegue a su objetivo. Colocar el cuadro de búsqueda dentro o junto al mega menú atiende a los dos grupos: a quienes les gusta navegar y a quienes prefieren escribir. Suele ser una decisión de “conviene hacerlo”.
¿Cuándo deberías usar un producto destacado en el mega menú? Cuando tienes un producto que de verdad merece la pena impulsar: novedades, artículos con un fuerte descuento o el más vendido de ese grupo. No coloques un producto destacado solo para rellenar un hueco vacío: una caja de imagen sin motivo hace el menú más recargado y más lento.
Una regla que me impuse: cada elemento del menú debe responder a la pregunta “¿ayuda al comprador a avanzar, o es solo decoración?”.
Un punto de referencia que vale la pena recordar: según el Baymard Institute, la tasa media de abandono de carrito ronda el 70 %, y esa cifra apenas ha cambiado a lo largo de muchos años. Una buena navegación no puede arreglar el paso del checkout, pero un menú recargado, lento y difícil de buscar hará que los compradores se vayan muy pronto, incluso antes de tener la oportunidad de añadir algo al carrito.
Consejos de configuración con Navi+
En esta etapa, suelo separar escritorio y móvil en lugar de usar una única configuración compartida. Navi+ te permite configurar ambos entornos de forma independiente, así que este es el momento de aprovecharlo.
En escritorio: usa un Mega Menu completo. Despliega el árbol de categorías en varias columnas, reserva una columna para un producto destacado o un banner de temporada y plantéate colocar un cuadro de búsqueda dentro del propio menú. Como Navi+ funciona de forma no-code, arrastrando y soltando, puedes cambiar la disposición de las columnas con bastante rapidez cuando quieras probar una nueva estructura.
En móvil: combina tres capas. Una Tab Bar optimizada en la parte inferior para las 4 o 5 rutas más importantes, situada cómodamente dentro de la zona del pulgar. Un Slide Menu que contenga todo el catálogo para los compradores que quieran navegar a fondo. Y un FAB para CTAs de temporada —por ejemplo “Rebajas 11.11” o “Regalos de Año Nuevo Lunar”—, activado para la ocasión y desactivado después, sin tener que reconstruir el menú.
Como el menú de Navi+ se mantiene en su sitio cuando cambias de tema y está optimizado para no penalizar los Core Web Vitals, puedes experimentar con disposiciones con más libertad sin preocuparte por empezar de cero cada vez que cambies el diseño.
Mide y revisa de forma cíclica
La gran escala te permite medir de manera significativa. Usa la analítica para ver qué elementos del menú reciben muchos clics y cuáles están casi muertos. Con suficiente tráfico, las pruebas A/B de menú te ayudan a comparar dos opciones —por ejemplo, un mega menú con producto destacado frente a uno sin él— y dejar que decidan los números en lugar de la intuición.
Para una tienda multilingüe, recuerda que un menú traducido por máquina a veces rompe la disposición: el alemán es más largo que el vietnamita, y algunos idiomas se leen de derecha a izquierda. Revisa cada versión de idioma como una experiencia propia; no des por hecho que un original bonito implica una traducción bonita.
Por último, fija un calendario de revisión periódico, trimestral por ejemplo. El catálogo en esta etapa cambia constantemente, y un menú que tenía sentido hace seis meses puede ya estar desfasado respecto a tu estructura de productos actual. La navegación no es una tarea de hacerla una vez y olvidarse.
Este artículo forma parte de la guía más amplia sobre Navegación para cada etapa del crecimiento de tu tienda — de 10 a 10.000 productos.