Navegación con pestañas: cuándo usarla y cómo optimizarla

Una de mis citas favoritas de UX proviene de Chikezie Ejiasi, jefa de estudio y sistemas de diseño de Google.

Él escribió: “La vida es conversacional. El diseño web debe ser de la misma manera. En la web, estás hablando con alguien que probablemente nunca hayas conocido, por lo que es importante ser claro y preciso. Por lo tanto, una navegación bien estructurada y una organización del contenido van de la mano con una buena conversación”.

¿Puede la navegación por pestañas ser clara y precisa? Por supuesto que puede, lo que lo convierte en una forma válida de navegación y organización de contenidos.

Lo que importa, como con la mayoría de las cosas relacionadas con UX, es cómo lo implementas y cómo lo optimizas.

¿Qué es la navegación por pestañas?

La navegación con pestañas es un estilo de navegación y de interfaz de usuario en el que la información se organiza en pestañas, que separan el contenido en diferentes secciones.

En general, al mirar las navegaciones con pestañas, notará algunas características comunes:

1. Esquinas de pestañas redondeadas;
2. Separación de tabulaciones, ya sea espacio o una sola línea;
3. Efectos de desplazamiento en pestañas;
4. Degradado para agregar profundidad y dimensión a las pestañas.

La navegación con pestañas se basa en la metáfora de la carpeta, con la que cualquiera que trabaje en una oficina o mire televisión debería estar familiarizado. Tal como explica Mifsud de UsabilityGeek...

Justin Mifsud, experto en usabilidad :

“En la terminología de la interfaz de usuario, las metáforas son ideas u objetos que se utilizan para facilitar la familiaridad entre el usuario y la aplicación.

El uso de pestañas en la interfaz de usuario es una metáfora excelente, ya que parecen separadores de pestañas del mundo real en archivos o pestañas en carpetas en un cajón de archivos.

Por lo tanto, es más intuitivo para los usuarios saber que estas pestañas dividen el contenido en secciones y, al igual que en la vida real, alcanzar la pestaña (emulada en la web al hacer clic en una pestaña) mostrará el contenido respectivo”. (a través de UsabilityGeek)

Debido a que la metáfora es tan común, es importante que tenga cuidado con la implementación. Las navegaciones con pestañas tienen un prototipo sólido, por lo que deben verse y funcionar exactamente como se espera.

Como cualquier buen sistema de navegación, las pestañas le permiten:

• Separe significativamente el contenido en diferentes secciones;
• Muestre a las personas qué contenido está disponible para ellos y cómo pueden llegar a ese contenido;
• Muestre a las personas, visualmente, dónde se encuentran dentro de su sitio.

¿Cuándo es una buena idea usar la navegación con pestañas?

En general, es una buena idea usar la navegación con pestañas cuando...

• Tienes entre dos y nueve categorías diferentes de contenido.
• Los nombres de categoría son relativamente cortos y predecibles, tanto en términos de posición como de copia (es decir, coinciden con el prototipo).
• Es poco probable que el número de categorías cambie de forma regular.
• Las categorías son de naturaleza similar; tiene sentido lógico que estén tabulados juntos.
• Las categorías caben en una sola fila.

Como explica Jakob Nielsen de Nielsen Norman Group, cuando la navegación por pestañas se vuelve tan compleja que requiere múltiples filas, comienzan a surgir problemas...

Jakob Nielsen, Grupo Nielsen Norman :

“Múltiples filas crean elementos de interfaz de usuario que saltan, lo que destruye la memoria espacial y, por lo tanto, hace imposible que los usuarios recuerden qué pestañas ya han visitado.

Además, varias filas son un síntoma seguro de complejidad excesiva: si necesita más pestañas de las que caben en una sola fila, debe simplificar su diseño”. (a través de NN/g)

Múltiples filas también crean problemas de jerarquía visual. Cuando hay una segunda fila, puede indicarle al usuario que las pestañas de la segunda fila son subcategorías o, al menos, menos importantes que las pestañas de la primera fila.

En general, no es una buena idea usar la navegación con pestañas cuando:

• Quieres que la gente compare el contenido simultáneamente. Esto sobrecarga la memoria y aumenta sustancialmente la carga cognitiva.
• Te encuentras considerando agregar un enlace de estilo "Más...".

Por supuesto, estas son solo pautas básicas. Podrías coincidir con todas las reglas de "deberías usarlo" y encontrar que no funciona para tu audiencia. En última instancia, es algo que deberá probar.

Recuerde, puede usar su análisis digital para averiguar si su navegación por pestañas está creando problemas para sus visitantes. A partir de ahí, puede realizar cambios para solucionar los problemas o experimentar con un nuevo tipo de navegación.

La controversia

Si bien las prácticas de diseño modernas tienen muchos sitios con este aspecto...

…algunas personas usan la navegación con pestañas como su navegación principal.

Como Luke Wroblewski de Google hizo una crónica hace años, Amazon realmente fue pionera en esta tendencia...

Lucas Wroblewski, Google :

“En 1998, el sitio tenía dos categorías de primer nivel: libros y música.

A medida que se agregaron categorías adicionales (como videos y regalos), el sistema de pestañas horizontales se amplió bastante bien y creó una buena oportunidad para diferenciar las categorías de productos a través del color”. (a través de LukeW)

He aquí un vistazo a cómo Amazon utilizaba la navegación con pestañas en los primeros días...

A medida que el sitio creció en popularidad, también lo hizo la cantidad de pestañas que necesitaba Amazon...

En 1999, Jakob llamó a esto “un mal diseño y un abuso de la metáfora de la pestaña”:

Sostengo que las pestañas se utilizarían mejor para cambiar entre vistas alternativas (pero relacionadas) que para navegar a ubicaciones no relacionadas.

Debe usar pestañas para alternar entre vistas dentro del mismo contexto, no para navegar a diferentes áreas. Este es el punto más importante, porque permanecer en el lugar mientras se alternan las vistas es la razón por la que tenemos pestañas en primer lugar.

Jakob Nielsen

Aún así, muchos sitios siguieron el ejemplo de Amazon y la definición de navegación con pestañas comenzó a cambiar del "cambio entre vistas alternativas" de Nielsen.

Si bien el uso de la navegación con pestañas como sistema de navegación principal ha pasado de moda, puede funcionar. Como con la mayoría de las cosas, su principal preocupación no debe ser lo que dice Nielsen sobre la navegación con pestañas, sino lo que dice su audiencia.

¿Les resulta difícil de usar? ¿Están navegando por su sitio correctamente? ¿Pueden encontrar los elementos más importantes de su sitio? Realice pruebas de usabilidad para estar seguro.

Cómo implementar la navegación con pestañas

Air Canada, junto con la mayoría de las principales aerolíneas, utiliza bien la navegación con pestañas...

Al implementar la navegación por pestañas usted mismo (en cualquier nivel), aquí hay algunas cosas que debe tener en cuenta:

• Primero, diseñe la arquitectura de la información (IA) de su sitio para que pueda tomar decisiones más inteligentes relacionadas con las pestañas.
• Se debe poder hacer clic en toda la pestaña, no solo en el nombre de la categoría (texto).
• No use una pestaña de "inicio", incluso si está usando la navegación con pestañas para todo su sitio. En su lugar, haga que su logotipo lleve a los visitantes a la página de inicio.
• La pestaña debe estar conectada al área de contenido que controla para que el alcance de la pestaña sea claro.
• Los nombres de las categorías deben tener una o dos palabras y estar escritos en inglés sencillo. Evite el uso de mayúsculas, ya que dificulta la lectura de las pestañas.
• No apile varias filas de pestañas. Si es necesario, utilice subcategorías (es decir, una segunda barra horizontal debajo de las pestañas) en su lugar. Si usa subcategorías, asegúrese de que haya una conexión visual entre la pestaña seleccionada y la barra de subcategorías a continuación. Asegúrese de que la cantidad de subcategorías que utilice no sea abrumadora; condensar y simplificar.
• La pestaña seleccionada debe estar marcada de forma destacada para indicar la ubicación actual. Sin embargo, las pestañas no seleccionadas no deben silenciarse tanto como para olvidarlas o pasarlas por alto.
• Se debe mantener un orden de tabulación consistente de una página a otra para que el usuario comprenda completamente cómo se relacionan las pestañas entre sí.

Jakob explica por qué este tipo de consistencia es importante...

1. Reconocibilidad. Cuando algo siempre se ve igual, sabes qué buscar y sabes qué es cuando lo encuentras.

2. Previsibilidad. Cuando algo siempre funciona de la misma manera, sabes lo que sucederá cuando actúes en consecuencia.

3. Empoderamiento. Cuando puede confiar en su conocimiento anterior de todas las funciones disponibles, puede componer fácilmente un conjunto de acciones para lograr su objetivo.

4. Eficiencia. No hay necesidad de perder tiempo aprendiendo algo nuevo o preocupándose por el efecto de las características inconsistentes.

Jakob Nielsen

Ejemplos de navegación con pestañas bien hecha

La mejor manera de entender la navegación con pestañas, especialmente porque se puede usar de muchas maneras diferentes, es ver algunos ejemplos.

1. Colección de carátulas de álbumes

Album Art Collection es un ejemplo bastante popular de navegación con pestañas...

Dos cosas son interesantes aquí…

1. La navegación es vertical, no horizontal.
2. La navegación incluye iconos.

Por lo general, encontrará navegaciones con pestañas presentadas horizontalmente. Esto se debe en parte a los prototipos de diseño. Como es común, las personas tienden a buscar navegaciones en el espacio horizontal debajo del logotipo.

Por supuesto, eso no significa que esté restringido a usar ese espacio para navegar. Solo asegúrese de usar pruebas de usuario. No desea mover su navegación por razones estilísticas para afectar la facilidad de uso de su sitio.

Tenga en cuenta que si bien Album Art Collection utiliza iconos de navegación, no abandona las descripciones basadas en texto. La prueba de usabilidad de íconos es un artículo en sí mismo, pero la mayoría de las veces, las descripciones basadas en texto son más útiles que los íconos solos. Jacob Gube de Six Revisions explica...

Jacob Gube, seis revisiones :

"Evite usar íconos para sustituir el texto de control de pestañas porque los símbolos pueden significar diferentes cosas para diferentes personas; la apuesta más segura es usar texto sin formato para describir la información del panel". (a través de la revista Smashing)

2. La máquina de facturas

La máquina de facturas es su navegación básica con pestañas como un ejemplo de navegación principal...

Sin embargo, incluyen una pestaña de "Inicio", que es redundante. Observe cómo la pestaña seleccionada se adelanta y las pestañas se conectan al área de contenido.

3. Amortiguador

Buffer fue uno de mis ejemplos favoritos de navegación con pestañas. En el pasado, tenían una oferta para individuos y una oferta para empresas, por lo que usan pestañas para separar su contenido en la parte inferior de la página.

Aquí estaba el comienzo del contenido para individuos...

Y aquí estaba el comienzo del contenido para empresas...

Esto les permitió hablar a dos audiencias diferentes sin crear un sitio o una experiencia completamente separados.

Más tarde, la página de productos de Buffer experimentó cambios profundos, con Publicar, Responder y Analizar, entre otras ofertas (todas bastante claras). Aquí está la navegación de pestañas que usaron para sus páginas:

Aparte de los diferentes planes de precios, estas pestañas basadas en productos mostraban un testimonio diferente, relevante para el producto en la pestaña:

Como explica David Leggett de UX Booth, la navegación con pestañas es relevante más allá de los niveles primario y secundario de navegación. Incluso se pueden utilizar debajo del pliegue, como en el caso de Buffer…

David Leggett, stand de UX :

“Las pestañas no necesitan estar limitadas a los niveles primario y secundario de navegación. Si brindan al usuario la capacidad de alternar entre áreas del mismo contenido, pueden resultar bastante útiles.

Combinado con la tecnología que cambia el contenido sin recargar una página, puede infundir una sensación tangible al usuario final que navega por la página”. (a través del stand de UX)

3 mejores prácticas para recordar

Antes de experimentar con la navegación por pestañas o decidir que no funciona para usted, considere estos tres factores: accesibilidad, fragmentación y velocidad.

1. La accesibilidad importa

Desea que su sitio sea accesible para personas con discapacidades o limitaciones. Para hacer eso con la navegación por pestañas, tendrás que...

• Permita que las personas naveguen por las pestañas usando la tecla "Tab" en su teclado.
• Permita que las personas seleccionen una pestaña usando la tecla "Enter" en su teclado.
• Indique qué pestaña se selecciona utilizando un método alternativo. Por ejemplo, puede incluir un atributo de título con la palabra "activo".

Hacer que su sitio sea más fácil de usar para más personas nunca perjudicará las conversiones.

2. La fragmentación importa

Con la navegación por pestañas, la forma en que decide organizar y fragmentar su contenido es increíblemente importante. Es por eso que mi primera recomendación de implementación anterior estaba relacionada con la arquitectura de información de su sitio.

Justin explica por qué la organización adecuada es vital...

Justin Mifsud, experto en usabilidad :

“Las pestañas dividen el contenido en secciones significativas que ocupan menos espacio en la pantalla. En este sentido, los usuarios pueden acceder fácilmente al contenido que les interesa (en lugar de tener todo el contenido en párrafos)”. (a través de UsabilityGeek)

Considere todo el contenido que le gustaría tener en su sitio. Luego, agrupe ese contenido en cuatro o cinco cubos. Probablemente podrá repetir este ejercicio y terminar con dos o tres baldes diferentes. Eso es bueno. Realice pruebas de usuario para ver qué personas responden y navegan mejor.

Sobre todo, querrás asegurarte de...

1. Su contenido se fragmenta de manera lógica, esperada y clara para los visitantes.
2. El orden de sus pestañas es significativo y lógico.
3. Tus pestañas siguen prototipos existentes. Por ejemplo, los sitios SaaS a menudo se fragmentan de una manera específica, mientras que los sitios de comercio electrónico a menudo se fragmentan de otra manera.

3. La velocidad importa

Hemos escrito sobre la importancia de la velocidad una y otra vez. Por lo tanto, no debería sorprender que la velocidad también desempeñe un papel en la eficacia de la navegación con pestañas.

Jacob lo explica bastante bien…

Jacob Gube, seis revisiones :

“Un propósito para usar las pestañas de los módulos es permitir una presentación rápida e interactiva del contenido. Para esto, debe intentar que el contenido del panel inactivo se escriba en línea en el documento HTML y luego usar CSS y JavaScript para diseñar y ocultar el panel visualmente, lo que es más rápido que requerir una recarga de página o solicitar datos de fuente remota.

Evite recargar la página cuando cambie entre los paneles porque esto retrasa significativamente la navegación entre los paneles. El contenido cargado de forma remota mediante Ajax puede ser una opción para la información de panel dinámica y ubicada de forma remota, pero presenta un desafío para los usuarios de lectores de pantalla que pueden no estar al tanto de los nodos insertados DOM de forma asíncrona en el árbol del documento”. (a través de la revista Smashing)

Este consejo no se aplica a aquellos que usan la navegación con pestañas como su navegación principal, pero aquellos que usan la navegación con pestañas como lo hacen Air Canada y Buffer deben tomar nota.

Conclusión

La navegación con pestañas puede resultar absolutamente en "una buena conversación" con sus visitantes. Si se implementa correctamente, es lo suficientemente claro y preciso para decirles a sus visitantes: exactamente dónde están, exactamente qué está disponible para ellos y exactamente cómo pueden acceder a lo que está disponible para ellos.

Con la ayuda de las pruebas de usabilidad y la optimización, esa conversación mejora aún más.

Sin embargo, como con cualquier cosa, asegúrese de realizar su investigación (en este caso, su investigación de arquitectura de la información) y probar, probar y probar.

En resumen…

1. La navegación con pestañas se puede utilizar como un sistema de navegación principal, así como más allá de los niveles de navegación primario o secundario.
2. Pruebe la navegación con pestañas cuando tenga de dos a nueve categorías sólidas y similares con nombres cortos que quepan en una sola fila.
3. No intente la navegación con pestañas cuando desee que las personas comparen contenido o se encuentre pensando en agregar un enlace "Más...".
4. Puede seguir las mejores prácticas de implementación, pero...
5. Lo que importa son tus datos. ¿A sus visitantes les resulta difícil navegar por su sitio con la navegación con pestañas? Realice pruebas de usabilidad para averiguarlo.
6. Soluciona los problemas que aparecen. O, si hay muchos problemas costosos, considere otro sistema de navegación.
7. La accesibilidad, la fragmentación y la velocidad importan cuando se trata de navegación con pestañas, así que presta mucha atención.

¿Trabajando en algo relacionado con esto? ¡Publique un comentario en la comunidad CXL !