Cada tipo de menú se creó para resolver un problema distinto. Elegir el equivocado no va a romper tu tienda de inmediato, pero hace que los compradores piensen más de lo necesario, y cada vez que un comprador tiene que pensar, es un momento en el que podría irse. Este artículo recorre los tipos de menú de Shopify más comunes, y de cada uno: qué es, cuándo encaja, cuándo no, y los errores que los comerciantes suelen cometer.
Hay una cifra que conviene recordar antes de entrar en detalles. Según el Baymard Institute, la tasa media de abandono de carrito en el comercio electrónico ronda el 70%. No todas las pérdidas se deben a la navegación, pero una navegación desordenada contribuye a alejar a los compradores antes de que lleguen siquiera al carrito.
Los cuatro tipos que vienen a continuación no son excluyentes entre sí. Una tienda suele usar varios a la vez; por ejemplo, un mega menú en escritorio y una barra de pestañas en móvil. La idea es usar el tipo adecuado para el contexto adecuado.
Mega menú: bueno para muchas categorías y compradores que navegan en escritorio
Un mega menú es un panel grande que se despliega. Cuando pasas el cursor o tocas un elemento principal, se abre un panel ancho y muestra muchas subcategorías a la vez, a menudo con imágenes o un producto destacado. Los compradores ven toda la estructura de la tienda de un solo vistazo.
Funciona bien cuando una tienda tiene muchas categorías —digamos 10 grupos o más como umbral aproximado— y la mayoría de los compradores llegan desde un ordenador. Los sectores en los que los compradores prefieren explorar antes de decidir, como moda, cosmética, artículos para el hogar y muebles, suelen encajar con este estilo. Los compradores todavía no saben exactamente qué quieren, así que mostrarles muchos caminos delante les ayuda.
Un mega menú no encaja cuando una tienda tiene pocos productos o la mayoría de los compradores están en el móvil. Una tienda que vende diez modelos de camisa y abre un panel enorme es excesivo: se ve vacío. Y como el 79% del tráfico de Shopify proviene del móvil (según Shopify), un diseño que solo luce bien en una pantalla ancha abandona a la mayoría de los compradores.
El error más común es meter demasiado. Los comerciantes quieren mostrarlo todo, así que amontonan cada categoría y cada banner en un solo panel. El resultado es que los compradores se sienten abrumados y no hacen clic en nada. Demasiadas opciones equivalen a ninguna opción. Agrupa las cosas de forma compacta, deja espacio en blanco y destaca solo las pocas que de verdad quieres vender.
Menú deslizante: bueno para categorías de varios niveles y compradores que saben lo que quieren
Un menú deslizante (también llamado menú hamburguesa, que se abre desde el icono de tres líneas) entra desde el borde de la pantalla. Muestra las categorías como un árbol: tocas un grupo y se despliegan sus subgrupos, bajando varios niveles. Es una forma ordenada de meter una estructura compleja en un espacio estrecho.
Un menú deslizante encaja cuando una tienda tiene muchos niveles de categorías y necesitas una jerarquía clara, sobre todo con una mentalidad mobile-first. Toma una tienda de repuestos de coche: Marca › Modelo › Tipo de pieza. El menú deslizante deja que los compradores profundicen por la rama correcta sin cargar una página nueva en cada paso.
No encaja cuando una tienda es sencilla. Si solo tienes unas pocas categorías, esconderlas detrás de un icono solo se lo pone más difícil a los compradores. El Nielsen Norman Group ha demostrado que la navegación oculta reduce la probabilidad de que los compradores encuentren el artículo que necesitan y los hace más lentos que cuando el menú está visible.
Ayuda entender su naturaleza: un menú deslizante esconde información. Eso lo hace adecuado para personas que ya saben lo que quieren: lo abren de forma activa y van directos a una rama familiar. Es más débil para explorar, porque los compradores no ven nada hasta que tocan. Si tu objetivo es que los compradores se topen con productos, un menú deslizante por sí solo no basta.
Barra de pestañas: buena cuando la mayoría de los compradores están en el móvil
Una barra de pestañas es una franja de navegación fija anclada en la parte inferior de la pantalla del móvil, que normalmente contiene los 4 o 5 elementos más importantes, como Inicio, Categorías, Buscar, Carrito y Cuenta. Está siempre visible: por mucho que los compradores se desplacen, permanece ahí.
La fuerza de la barra de pestañas es su posición. La investigación de Steven Hoober sobre cómo sostiene la gente el móvil (más de 1.300 observaciones del mundo real) descubrió que la mayoría de las acciones móviles se hacen con un solo pulgar, y la parte inferior central de la pantalla es donde el pulgar llega con más facilidad, lo que se conoce a menudo como la zona del pulgar. Poner las acciones principales abajo significa colocarlas justo donde ya descansa la mano del comprador.
Una barra de pestañas encaja cuando la mayor parte del tráfico proviene del móvil, algo cierto para la mayoría de las tiendas Shopify hoy en día. Además, mantiene lo importante —especialmente el carrito— siempre a un solo toque, en lugar de obligar a los compradores a volver al principio de la página.
Ten en cuenta que una barra de pestañas tiene espacio para muy pocos elementos. No intentes meter siete u ocho iconos; elige los 4 o 5 más importantes y deja el resto al menú deslizante o a las páginas de categoría. Piensa en la barra de pestañas como un atajo, no como toda tu navegación.
FAB: un botón flotante para una acción
Un FAB (floating action button, botón de acción flotante) es un botón redondo que flota sobre el contenido, pensado para una acción importante: chatear con la tienda, ver el carrito o volver al principio de la página. Está siempre ahí pero es discreto, sin ocupar espacio real.
Un FAB encaja cuando hay exactamente una cosa que quieres que los compradores puedan hacer desde cualquier sitio. Un ejemplo habitual en Vietnam es el botón de chat de Messenger o Zalo flotando en la esquina inferior derecha: un comprador que está mirando un producto y tiene una duda puede tocar y preguntar de inmediato, sin tener que buscar.
Lo que hay que recordar: un FAB no sustituye a un menú. Es un atajo para una acción, no el hogar de todo tu sistema de navegación. El error común es cargarlo con demasiado: un botón que se expande en cinco o seis opciones, o tres o cuatro botones flotantes a la vez que tapan el contenido e incluso bloquean el botón de Añadir al carrito. En ese momento el FAB pasa de ser una comodidad a un obstáculo. Un FAB, un propósito.
Algunas cosas que aplican a los cuatro
Sea cual sea el tipo que elijas, estos tres puntos siempre se cumplen.
- Separa tu configuración de móvil y escritorio. Es la misma tienda, pero los compradores en cada dispositivo se comportan de forma distinta. Un único menú ideal para ambos normalmente no existe; es mejor usar un mega menú en escritorio y una barra de pestañas o un menú deslizante en móvil.
- No sacrifiques la velocidad. Google fija buenos objetivos 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. Un menú precioso que hace saltar la página o que carga lento hace más daño que bien. Según datos de Shopify, una tienda media instala alrededor de 6 apps, así que cada app que añades lastra la página; ser selectivo importa.
- No dejes que tu menú se rompa al cambiar de tema. Si el menú está incrustado en el tema, tienes que reconstruirlo desde cero cada vez que cambias el aspecto.
Esta es también la razón por la que muchas personas usan una herramienta de navegación independiente. Navi+ puede construir los cuatro tipos anteriores —mega menú, menú deslizante, barra de pestañas, FAB y un menú de cuadrícula— arrastrando y soltando, sin código, con móvil y escritorio configurados por separado, y el menú permanece intacto al cambiar de tema. La herramienta también está diseñada para no lastrar tus Core Web Vitals. Pero sea cual sea la herramienta que uses, el principio sigue siendo el mismo: elige tu tipo de menú según los dispositivos de tus compradores y su forma de comprar, no según cuál luce más vistoso.
Este artículo forma parte de la guía más amplia sobre Cómo elegir el tipo de menú adecuado para tu tienda Shopify.