Has decidido usar iconos con etiquetas de texto en tu navegación. Buena decisión—los datos lo respaldan. Pero la siguiente pregunta es menos obvia e igual de importante: ¿cómo organizas el icono y la etiqueta uno respecto al otro? ¿Apilados verticalmente? ¿Uno al lado del otro? ¿Etiqueta solo al pasar el ratón? Cada patrón produce resultados significativamente diferentes dependiendo del contexto, y elegir el diseño incorrecto puede deshacer los beneficios de añadir etiquetas en primer lugar.
El diseño de un par icono-etiqueta afecta tres cosas simultáneamente: escaneo (qué tan rápido pueden los usuarios encontrar lo que buscan), precisión al tocar (qué tan a menudo aciertan en el objetivo correcto) y densidad visual (cuánta navegación cabe en un espacio determinado). Lograr el equilibrio correcto para la navegación específica de tu tienda requiere entender qué hace bien cada patrón y dónde falla.
- El apilamiento vertical (icono arriba, etiqueta abajo) es el estándar para barras de pestañas móviles—usado por Apple, Google y todas las aplicaciones principales.
- El emparejamiento horizontal (icono a la izquierda, etiqueta a la derecha) funciona mejor para menús deslizables y navegación de escritorio donde el espacio vertical es limitado.
- La etiqueta al pasar el ratón falla completamente en móvil y reduce la participación en escritorio un 22% en comparación con etiquetas siempre visibles.
- La pila vertical crea un objetivo de toque efectivo 30–40% más grande que la navegación solo con iconos.
Patrón 1: pila vertical (icono arriba, etiqueta abajo)
La pila vertical es el patrón de icono-etiqueta más común en interfaces móviles. El icono está en la parte superior, la etiqueta de texto está directamente debajo, y los dos forman una única unidad visual. Este es el patrón usado en cada barra de pestañas de iOS, cada barra de navegación inferior de Android y prácticamente en cada aplicación móvil importante.
Las Directrices de Interfaz Humana de Apple especifican explícitamente este diseño para barras de pestañas: iconos de 25x25 puntos con una etiqueta de texto directamente debajo en la fuente del sistema. Las directrices de Material Design de Google reflejan esto, especificando iconos de 24x24 dp con una etiqueta de 12 sp debajo. Ambas plataformas llegaron al mismo diseño de forma independiente porque la pila vertical resuelve el problema fundamental del móvil: espacio horizontal limitado.
Por qué funciona en móvil:
Una pantalla de teléfono en modo vertical típicamente tiene 375–430 puntos de ancho. Una barra de pestañas móvil necesita caber 4–5 elementos de navegación en ese ancho. Apilar el icono sobre la etiqueta te permite encajar más elementos porque cada elemento ocupa aproximadamente 70–80 puntos de ancho en lugar de los 120–150 puntos necesarios para un arreglo horizontal.
La pila vertical también crea un objetivo de toque natural que es más grande que el icono o la etiqueta por separado. Cuando los usuarios apuntan al área general de un par icono-etiqueta, tienen un objetivo que es aproximadamente 48–56 puntos de ancho y 44–52 puntos de alto—cómodamente por encima del mínimo de 44x44 de Apple y del mínimo de 48x48 de Google. Esto es aproximadamente 30–40% más tolerante que un botón solo con icono de 24–28 puntos.
Las pruebas A/B en sitios móviles de comercio electrónico apoyan esto. La prueba de Blend Commerce en tiendas Shopify usó el diseño de pila vertical (coincidiendo con la convención de iOS) y midió un aumento de conversión del 10,37% comparado con la navegación solo con iconos. La pila vertical no es solo el patrón más común—es el más probado.
Cuándo usarlo:
- Barras de pestañas móviles o barras de navegación inferior (3–5 elementos)
- Navegación estilo aplicación donde quieres coincidir con las convenciones de iOS y Android
- Cualquier navegación móvil persistente que se mantenga en pantalla a través de cambios de página
Cuándo falla:
La pila vertical es menos ideal para menús deslizables o cajones de navegación, donde los elementos se enumeran verticalmente. En ese contexto, apilar un icono sobre su etiqueta para cada elemento de menú desperdicia espacio vertical y crea un ritmo visual inusual. Los menús deslizables usan el patrón horizontal en su lugar.
Patrón 2: par horizontal (icono a la izquierda, etiqueta a la derecha)
El par horizontal coloca el icono a la izquierda de la etiqueta de texto en la misma línea. Este es el patrón estándar para menús deslizables, navegación lateral, barras de navegación de escritorio y listas de navegación.
Por qué funciona para menús y listas:
Cuando los elementos de navegación se enumeran verticalmente—como en un menú hamburguesa, barra lateral o desplegable—el icono sirve como un ancla visual que ayuda a los usuarios a escanear la lista más rápido. La investigación del MIT AgeLab sobre patrones de escaneo visual encontró que los iconos alineados a la izquierda crean “hitos” de escaneo naturales que reducen el tiempo necesario para localizar un elemento específico en 18–25% en comparación con listas solo de texto.
El par horizontal también se corresponde con los patrones de lectura natural. En idiomas de izquierda a derecha, los usuarios escanean el icono primero (reconocimiento instantáneo), luego la etiqueta (confirmación). El movimiento del ojo es suave y lineal. En una pila vertical, el ojo tiene que moverse hacia abajo desde el icono a la etiqueta, lo que es más lento cuando se escanea una lista de muchos elementos.
Tamaño y espaciado que funcionan:
Material Design proporciona orientación específica para pares horizontales de icono-etiqueta en cajones de navegación: icono de 24x24 dp, 16 dp de espacio entre el icono y la etiqueta, etiqueta en fuente de 14 sp de peso medio. La altura total de cada fila es 56 dp, lo que proporciona un objetivo de toque cómodo.
Las directrices de Apple para navegación de estilo lista son similares: iconos de 22–29 puntos (dependiendo de la complejidad del icono), con la etiqueta a la derecha en la fuente del sistema. La altura de la fila es mínimo 44 puntos.
Cuándo usarlo:
- Menús deslizables o de hamburguesa
- Navegación lateral en escritorio
- Menús desplegables
- Pantallas de configuración
- Cualquier navegación enumerada verticalmente donde los elementos se apilan de arriba a abajo
Cuándo falla:
El par horizontal no funciona bien en espacios horizontales restringidos como barras de pestañas móviles. Cinco elementos, cada uno con un icono y una etiqueta uno al lado del otro, simplemente no caben en 375 puntos de ancho sin truncar etiquetas o hacer que el texto sea ilegible.
Patrón 3: etiqueta al pasar el ratón (solo icono, texto aparece al pasar)
La etiqueta al pasar el ratón es un patrón cada vez más común en escritorio, especialmente en navegación lateral como la usada en Gmail, Slack y varias aplicaciones de panel de control. La navegación muestra solo iconos en una columna estrecha, y pasar el ratón sobre un icono revela un tooltip con la etiqueta de texto.
Por qué es tentador:
El atractivo es obvio. Obtienes una navegación compacta que ocupa espacio mínimo de pantalla, más la capacidad para que los usuarios descubran etiquetas cuando las necesitan. Se siente como lo mejor de ambos mundos.
Por qué los datos cuentan una historia diferente:
La etiqueta al pasar el ratón tiene un problema fundamental: requiere que los usuarios interactúen antes de poder identificar elementos de navegación. Este es un paso atrás respecto a etiquetas siempre visibles, donde la identificación sucede de un vistazo.
Las pruebas del Nielsen Norman Group en tooltips basados en hover encontraron que solo el 15% de los usuarios intencionalmente pasan el ratón sobre elementos de navegación para revelar etiquetas. El resto o ya saben dónde están las cosas (usuarios avanzados) o se dan por vencidos y buscan en otro lado. Esto crea una curva de aprendizaje pronunciada para visitantes nuevos, que es exactamente lo opuesto a lo que quieres en una tienda de comercio electrónico donde la mayoría de los visitantes son primerizos.
La investigación del Baymard Institute sobre patrones de navegación de comercio electrónico encontró que la navegación dependiente de tooltip produjo 22% menos finalizaciones de navegación exitosas comparado con etiquetas siempre visibles. Los usuarios fueron más lentos, más propensos a cometer errores de navegación y más propensos a usar el botón atrás del navegador (una señal de que terminaron en el lugar incorrecto).
Y luego está el problema obvio: hover no existe en móvil. Las pantallas táctiles no tienen estado hover. Un toque en una navegación solo con iconos activa la acción inmediatamente o abre un tooltip que requiere un segundo toque—añadiendo un paso adicional que los usuarios móviles no esperan y no tolerarán.
Cuándo podría ser aceptable:
- Herramientas internas de panel de control o administración donde los usuarios están capacitados y usan la interfaz diariamente
- Aplicaciones solo para escritorio donde el espacio en pantalla es extremadamente limitado
- Barras de herramientas secundarias (como barras de herramientas de formato) donde los iconos son altamente estandarizados
Cuándo evitarlo:
- Cualquier navegación de comercio electrónico orientada al cliente
- Navegación móvil de cualquier tipo
- Navegación principal donde los visitantes primerizos necesitan encontrar su camino
Patrón 4: etiqueta debajo en estado activo
Una variación que ha ganado tracción es mostrar etiquetas solo en el elemento de navegación actualmente activo. Esto es común en implementaciones de Material Design donde la barra inferior muestra iconos para todos los elementos pero solo muestra la etiqueta de texto en la pestaña seleccionada.
La compensación:
Este patrón ahorra espacio horizontal mientras sigue proporcionando contexto para la ubicación actual. Las directrices de Material Design de Google ofrecieron esto como una opción para navegación inferior con más de tres elementos.
Sin embargo, las pruebas han mostrado que este enfoque es inferior a mostrar etiquetas en todos los elementos. Un estudio realizado por el equipo UX en Booking.com (compartido en una conferencia del NNG de 2019) encontró que mostrar etiquetas siempre redujo errores de navegación en 15% comparado con el patrón de etiqueta solo en activo. Los usuarios necesitaban ver cuáles eran todas las opciones, no solo cuál ya habían elegido.
Material Design desde entonces ha actualizado su orientación para recomendar navegación etiquetada para todos los destinos, no solo el activo.
Elegir el patrón correcto para tu tienda
La decisión se reduce a dos factores: el contexto de navegación y el dispositivo.
| Contexto | Mejor patrón | Por qué |
|---|---|---|
| Barra de pestañas móvil (3–5 elementos) | Pila vertical | Coincide con convenciones de plataforma, objetivos de toque grandes, cabe en ancho |
| Barra de pestañas móvil (5+ elementos) | Pila vertical con barra desplazable | Aún pila vertical, pero permite desplazamiento horizontal |
| Menú deslizable | Par horizontal | Escaneo natural en listas verticales |
| Encabezado de escritorio | Par horizontal o solo texto | Espacio horizontal amplio |
| Barra lateral de escritorio | Par horizontal (etiquetas siempre visibles) | Los usuarios necesitan escanear opciones rápidamente |
| Navegación de pie de página | Solo texto | Los iconos no añaden valor aquí |
| Botón de acción flotante | Solo icono (con tooltip) | Acción única, el icono es suficiente |
Prueba rápidaAbre tu tienda en un teléfono e intenta identificar cada elemento de navegación sin leer una etiqueta. Si haces una pausa en ni siquiera un elemento, ese es donde una etiqueta debería ir. Si tu barra de pestañas móvil usa pares horizontales y los elementos se sienten apretados, cambia a pilas verticales. Navi+ te permite alternar entre patrones de diseño en el constructor de menú, así que probar diferentes combinaciones toma segundos en lugar de horas de edición de tema.
El predeterminado más seguro para la mayoría de tiendas Shopify es la pila vertical para barras de pestañas móviles y el par horizontal para menús deslizables. Estos patrones coinciden con lo que los usuarios ya esperan de las aplicaciones que usan todos los días, y tienen los datos de prueba más sólidos detrás de ellos. Comienza allí e itera basado en la analítica de tu propia tienda.
This article is part of the larger guide on Iconos vs texto en navegación: cuándo usar cada uno (y cuándo usar ambos).