Toda tienda empieza desde el mismo punto: unas pocas docenas de productos, una idea y mucha incertidumbre. En esta etapa, la navegación de una tienda nueva no necesita ser compleja. Necesita ser correcta y suficiente. Lo difícil no es lograr que el menú se vea “lleno”, sino contenerse para no construir un sistema de navegación más grande de lo que la tienda realmente necesita.
Este artículo trata sobre la primera etapa: una tienda nueva con un catálogo pequeño de menos de 50 productos. Describiré cómo se ve, qué necesita de verdad la navegación, algunos errores recurrentes y una configuración sugerida para empezar.
Cómo se ve esta etapa
El catálogo es pequeño, a menudo apenas unos pocos grupos de productos. A veces toda la tienda cabe dentro de “todos los productos” sin necesidad de categorías todavía.
El tráfico aún es bajo e irregular. Los visitantes llegan desde unas pocas publicaciones, algunas veces compartidas o un círculo de amigos. Es normal tener entre unas pocas docenas y unos cientos de visitas al día.
Lo más importante: todavía estás experimentando. Probando qué artículos se venden, probando precios, probando cómo fotografiar, probando cómo dar la bienvenida. Todo sigue cambiando. Una navegación rígida, construida con cuidado desde el principio, se convierte en una carga que tienes que arreglar cada vez que cambias de rumbo.
En otras palabras, este es un momento que pide flexibilidad más que completitud.
Qué necesita la navegación de una tienda nueva
La respuesta corta: simple y clara. Los clientes necesitan encontrar el camino para comprar en pocos segundos, no necesitan un diagrama de menú bonito.
En escritorio, basta con un encabezado ordenado de 3 a 5 elementos. Por ejemplo: Productos, Acerca de, Contacto. La gente suele recorrer una página de izquierda a derecha y de arriba abajo, así que los elementos más importantes deben quedar a la izquierda y permanecer visibles, no ocultos.
En esta etapa no necesitas un mega menú. Un mega menú es adecuado para tiendas con muchas subcategorías que necesitan desplegarse todas a la vez. Cuando el catálogo todavía es pequeño, un mega menú se verá vacío y aparatoso: lo abres y solo ves una o dos líneas flotando en un marco grande. Hace que la tienda parezca más grande de lo que realmente es, y el cliente no gana nada con ello.
No olvides el móvil
Esta es la parte que más fácilmente se descuida y, sin embargo, la más importante. En el ecommerce de hoy, la mayoría de las visitas a una tienda llegan desde el teléfono; muchas cifras del sector sitúan el número en torno al 70-80%. Dicho de otro modo, la mayoría de tus clientes están mirando tu tienda a través de una pantalla pequeña que sostienen en la mano.
La forma en que la gente sostiene el teléfono decide qué es fácil de tocar. Una investigación de Steven Hoober (publicada en Smashing Magazine) encontró que la mayoría de las acciones en el móvil se hacen con el pulgar, y la zona más fácil de alcanzar es la mitad inferior de la pantalla, a menudo llamada la “zona del pulgar”. La esquina superior es el lugar más difícil de alcanzar.
Por eso tiene sentido una barra de navegación colocada en la parte inferior de la pantalla (una Tab Bar): queda justo al alcance del pulgar. El cliente no tiene que estirarse hasta la esquina superior para encontrar el menú.
En cuanto al menú hamburguesa —el icono de tres líneas que esconde toda la navegación detrás— Nielsen Norman Group ha comprobado que hace que los elementos sean más difíciles de notar y más lentos de encontrar en comparación con mantenerlos visibles. Para una tienda pequeña con apenas unos pocos elementos principales, no hay razón para esconderlos. Una tab bar básica que mantiene visibles unos pocos botones importantes sirve mucho mejor al cliente.
Dos errores comunes
He visto estos dos errores tantas veces que casi los considero un rito de iniciación para quienes empiezan.
Error uno: complicar el menú demasiado pronto. Quienes venden miran las tiendas grandes, ven menús de varios niveles y quieren que su tienda se vea “profesional” de inmediato. Así que crean categorías para cosas de las que aún no tienen productos, o dividen un grupo de seis artículos en cuatro subcategorías para que el menú parezca lleno.
El resultado es un cliente que hace clic en “Accesorios” y encuentra exactamente dos artículos, o que hace clic en “Novedades” y la encuentra vacía. Esa experiencia es mucho peor que una pulcra categoría de “Todos los productos”. Un catálogo pequeño no es una debilidad que haya que esconder: agrupar las cosas en realidad facilita la compra.
Error dos: preocuparse solo por el escritorio y olvidar el móvil. La gente suele construir la tienda en una computadora, admirarla en una pantalla grande y luego olvidarse de revisarla en el teléfono. El menú de escritorio se ve bien, pero en móvil los elementos se amontonan, los botones se aprietan o la navegación desaparece detrás de un pequeño icono en la esquina.
La solución es simple: cada vez que ajustes el menú, abre la tienda en tu propio teléfono e intenta comprar algo como lo haría un cliente real. Si tu mano tiene que estirarse o te equivocas al tocar unas cuantas veces, a tus clientes les pasará lo mismo, y ellos tienen menos paciencia que tú.
Una configuración sugerida con Navi+
Navi+ te permite configurar el escritorio y el móvil por separado, así que no tienes que forzar un mismo diseño en ambos. En esta etapa, sugiero mantenerlo verdaderamente mínimo.
En escritorio, construye un encabezado simple de 3 a 5 elementos. Elige exactamente las páginas que el cliente necesita: la categoría principal de productos, la página de acerca de, la página de contacto. Guarda el mega menú para cuando el catálogo realmente crezca.
En móvil, usa una Tab Bar básica de 4 elementos. Una disposición segura que los compradores ya conocen:
- Inicio — de vuelta a la página principal
- Tienda — hacia la lista de productos
- Carrito — el carrito, siempre al alcance
- Cuenta — cuenta o iniciar sesión
Estos cuatro botones cubren casi todo lo que el cliente necesita hacer. Colocar el carrito justo en la barra inferior tiene además un sentido práctico: según Baymard Institute, la tasa media de abandono del carrito en el ecommerce ronda el 70%, así que vale la pena hacer cualquier cosa que ayude al cliente a volver al carrito y seguir adelante. Un botón de Carrito siempre visible y siempre fácil de tocar es un pequeño paso en esa dirección.
Otra cosa que conviene vigilar desde el principio es la velocidad. Google establece los umbrales “buenos” para los Core Web Vitals: LCP por debajo de 2,5 segundos, INP por debajo de 200 milisegundos y CLS por debajo de 0,1. El menú es algo que se carga temprano y aparece en todas las páginas, así que un menú pesado puede arrastrar consigo a toda la tienda. Navi+ está construido para no interponerse en estas métricas; este es un buen hábito que conviene mantener desde temprano, porque arreglarlo más tarde siempre es más difícil.
En la etapa de tienda nueva, un menú simple que el cliente pueda usar de inmediato siempre le gana a un menú vistoso que tienes que estar arreglando.
Como Navi+ es de arrastrar y soltar y no requiere código, puedes construir la disposición anterior en unos minutos y ajustarla en cualquier momento a medida que crece el catálogo. El menú además se mantiene en su lugar cuando cambias de tema, así que los experimentos de diseño de la etapa inicial no romperán la navegación que acabas de construir.
Empieza en pequeño. Cuando la tienda crezca, hacer crecer la navegación junto con ella no será demasiado tarde.
Este artículo forma parte de la guía más amplia sobre La navegación a lo largo de cada etapa del crecimiento de una tienda — de 10 a 10.000 productos.