Si vendes en Shopify y estás batallando con el menú de tu móvil, hay un patrón que usan muchas de las grandes apps de ecommerce, y vale la pena aprender de él. Es la forma de combinar un tab bar y un slide menu: deja que el Tab Bar resuelva los viajes rápidos y que el Slide Menu se ocupe de ir a fondo. Este artículo trata de cómo trabajan juntos esos dos elementos, y de dónde encaja el FAB en ese panorama.
Yo tuve una tienda y cometí el error de siempre: lo metí todo en un único menú hamburguesa y confié en que “los compradores tocarán ahí si lo necesitan”. En la práctica, los compradores tienen menos paciencia de la que creemos.
Por qué un solo tipo de menú no basta
En el móvil, el comportamiento de los compradores se divide en dos grupos bastante claros.
El primer grupo sabe lo que quiere. Llega para ver el carrito, para buscar o para volver a la página de inicio. Necesita moverse rápido y llegar directo.
El segundo grupo aún no ha decidido qué comprar. Quiere recorrer las categorías y ver qué le resulta interesante. Necesita un mapa completo de la tienda.
A un único menú le cuesta atender bien a ambos. Si lo metes todo en una hamburguesa, el primer grupo tiene que dar un paso extra para cosas que deberían resolverse con un solo toque. Nielsen Norman Group descubrió que esconder la navegación principal detrás de un botón la hace más difícil de encontrar y más lenta de usar que cuando los elementos se muestran a la vista. Por otro lado, si intentas exponer todo el árbol de categorías en la pantalla, el primer grupo se abruma y la pantalla se llena.
La solución no es elegir uno. Es repartir los roles.
El Tab Bar se ocupa de los destinos principales
El Tab Bar es una barra de navegación fija en la parte inferior de la pantalla, que normalmente contiene 4 o 5 elementos. Siempre está visible, así que los compradores no tienen que tocar para abrirlo.
Su posición en la parte inferior no es casualidad. Según la investigación de Steven Hoober, basada en más de 1.300 observaciones de usuarios, alrededor del 75% de las acciones en pantalla se hacen con el pulgar. El centro inferior de la pantalla es justo donde el pulgar llega con más facilidad al sostener el teléfono con una mano. Poner ahí los destinos importantes hace que los compradores toquen con precisión y rapidez, con menos errores.
Entonces, ¿qué debería ir en el Tab Bar? Solo los destinos que más se usan y a los que hay que llegar más rápido. Por ejemplo, para una tienda de moda:
- Inicio
- Buscar
- Categorías (o “Productos”)
- Carrito
- Cuenta
Cinco elementos es lo justo. Más que eso y cada botón se aprieta y cuesta tocarlo; menos que eso y desperdicias un espacio valioso. Este no es el lugar para listar cada subcategoría: es el lugar para unas pocas de las puertas más grandes.
El Slide Menu se ocupa de toda la estructura de categorías
El Tab Bar solo tiene 4 o 5 huecos. Pero una tienda real suele tener decenas de categorías y subcategorías. ¿Adónde van?
Aquí es donde entra el Slide Menu. El Slide Menu se abre desde el borde de la pantalla y puede albergar toda la estructura de categorías, con varios niveles. Un comprador quiere pasar de Hombre a Mujer, de Camisetas a Pantalones, de una colección a otra: el Slide Menu es el lugar para eso.
Lo bueno de este patrón es cómo se abre el Slide Menu. Pones un elemento “Categorías” o un icono “Más” directamente en el Tab Bar. El comprador lo toca y el Slide Menu se despliega. Así los dos menús se conectan: el Tab Bar siempre está ahí para los viajes rápidos, y a la vez es la puerta de entrada al Slide Menu para la navegación profunda.
Un detalle pequeño pero importante: cuando sí uses un Slide Menu, etiquétalo con claridad usando texto en lugar de dejar un icono pelado, y ponlo donde los compradores esperan encontrarlo. NN/G recomienda usar el icono estándar de tres líneas junto con una etiqueta, para que los compradores puedan adivinar lo que hay dentro. El Slide Menu no es malo: solo es malo cuando se le obliga a hacer el trabajo del Tab Bar y el suyo propio a la vez.
El reparto de roles se reduce a esto: cuando un comprador necesita velocidad, usa el Tab Bar; cuando quiere explorarlo todo, abre el Slide Menu. Esta es exactamente la combinación de tab bar y slide menu que usan muchas de las grandes apps de ecommerce, y funciona en Shopify sin necesidad de cambios drásticos.
El FAB: un complemento, no un reemplazo
El FAB (Floating Action Button, botón de acción flotante) es un botón redondo y flotante, normalmente en la esquina inferior derecha, superpuesto al contenido de la página. A mucha gente le parece atractivo y quiere usarlo para la navegación. Yo lo desaconsejaría.
El FAB debería reservarse para exactamente una acción, una que sea importante y se repita. Algunos ejemplos sensatos:
- Un botón de chat de soporte, para que los compradores puedan hacer preguntas rápidas cuando dudan
- “Ver las ofertas de hoy” durante una promoción
- Volver arriba en páginas de listado de productos muy largas
La razón por la que el FAB no debe cargar con la navegación principal: es un solo botón. Cuando lo tocas, tiene que abrir un menú, lo que significa volver justo al patrón de navegación oculta que queríamos evitar. El Tab Bar resuelve mejor la navegación porque siempre está visible y tiene varios huecos. El FAB encaja con una sola llamada a la acción, clara.
Dicho de otro modo: el Tab Bar y el Slide Menu se ocupan de “adónde ir”, mientras que el FAB se ocupa de “hacer una cosa”. No dejes que se pisen entre sí.
Por qué vale la pena acertar con este patrón
Hay una razón práctica para preocuparse por el menú de tu móvil. Según el Baymard Institute, la tasa media de abandono del carrito ronda el 70%, y en móvil es aún más alta, alrededor del 80%. Cuando a los compradores ya les cuesta orientarse desde el menú, se van antes incluso de pensar en finalizar la compra.
La velocidad de la página también importa. Un menú pesado puede ralentizar la carga y provocar desplazamientos del diseño. Google fija el umbral “bueno” de los Core Web Vitals en un LCP por debajo de 2,5 segundos, un INP por debajo de 200 milisegundos y un CLS por debajo de 0,1. Cuanto más ligero y liviano sea el menú, más fácil es mantenerse dentro de esos umbrales.
Hay algo más que sopesar: la cantidad de apps. Una tienda de Shopify suele instalar muchas apps, y cada una añade otro trozo de código ejecutándose en la página. Si una sola herramienta de menús puede gestionar el Tab Bar, el Slide Menu y el FAB todo en un mismo lugar, te ahorras tener que parchear varias cosas por separado.
Construye este patrón sin código
La parte difícil del patrón combinado es la configuración. Necesitas un Tab Bar aparte para el móvil, un Slide Menu conectado a él y, posiblemente, un FAB para un CTA: todo lo cual tiene que encajar entre sí y no tocar la versión de escritorio.
Esto es lo que Navi+ se creó para resolver. Configuras el Tab Bar y el Slide Menu en un mismo lugar, los ajustas por separado para el móvil, arrastras y sueltas, sin necesidad de código. Las configuraciones de móvil y de escritorio están separadas, así que la versión de escritorio sigue usando un Mega Menu normal. El menú además se mantiene en su sitio cuando cambias de tema, y está optimizado para no penalizar tus Core Web Vitals.
Lo que quiero dejarte no es una herramienta concreta, sino la mentalidad de repartir roles: no hagas que un solo menú lo haga todo. Deja que el Tab Bar resuelva los viajes rápidos, que el Slide Menu se ocupe de la navegación profunda y que el FAB se encargue de una sola acción. Tus compradores se orientarán con más facilidad, y eso suele ser el primer paso para que se queden más tiempo.
Este artículo forma parte de la guía más amplia sobre Navegación móvil — por qué el menú hamburguesa está pasando de moda y qué usar en su lugar.