English version

Pestañas en diseño web, cuándo y cómo usarlas:

Resumen: las pestañas no funcionan excesivamente bien en la web porque tienen muchas limitaciones. Las pestañas son útiles para delimitar secciones separadas y estancas, sin embargo y frecuentemente no se utilizan de manera correcta.

¿Por qué se usan las pestañas en las páginas web?

Las pestañas fueron creadas para facilitar la localización de la información por los usuarios utilizando una metáfora, es decir, la imitación de un elemento de la realidad física.

En las páginas web intentan imitar las pestañas que sobresalen entre los separadores de un cajón archivador. Así permiten a los usuarios ver de un vistazo todas las secciones del sitio web y ayudarles a encontrar lo que buscan.

¿Cuándo y cómo se deben usar?

Las pestañas de la realidad física separan diferentes espacios que contienen diferentes documentos en un archivador. Varias copias de un mismo documento no está en varios espacios al mismo tiempo porque eso confundiría al quien busque allí. Tampoco existe interconexión directa entre varios espacios, es decir, si se esta en un espacio, no se pasa a otro a no ser que agarre otra pestaña.

Del mismo modo en la web las pestañas son correctamente utilizadas cuando separan "libros", "discos", "DVD", etc. es decir, secciones que no es posible que incluyan los mismos elementos y están totalmente separadas. No deben existir vínculos entre pestañas y la única manera de cambiar de pestaña debe ser clicando sobre otra.

Debido a esa separación total de contenidos y ausencia de navegación cruzada, el etiquetado de las pestañas debe ser tan claro como el agua y encajar perfectamente con el modelo mental de los usuarios. De lo contrario, en caso de confusión, al usuario le será prácticamente incapaz de encontrar su objetivo y se producirá un error fatal.

Dadas estas condiciones, no todos los sitios pueden permitirse o aspirar usar pestañas. Realmente sólo puedo dar un ejemplo perfecto de uso de pestañas Google.com, aunque Cesar Martín se pregunta si son realmente adecuadas y plantea algunas cuestiones sobre ello.

Como diseñarlas

Es recomendable que cada pestaña sea de un color diferente. Además debe haber un contraste entre el color del estado activo y pasivo de la pestaña, pero utilizando el mismo color, al contrario que ebankinter.com donde el color cambia totalmente.

Todo el área de la pestaña ha de ser clicable y no solo el texto, para facilitar su selección.

Las pestañas han de parecer pestañas reales (ejemplo) para representar adecuadamente su función. En muchos sitios se han simplificado o rediseñado tanto que apenas son reconocibles.

Utilización errónea de las pestañas

En muchas webs no se cumplen las recomendaciones anteriores. Criterios comerciales hacen posible que un producto esté en varias pestañas al mismo tiempo y también que sea posible pasar desde una pestaña a otra (venta cruzada). Sin embargo, cuando las pestañas no imitan adecuadamente a la realidad, ¿qué aportan? ¿de qué sirven? En esos casos sería mejor utilizar otro mecanismo de estructuración de la información.

Algunos sitios webs de complejas estructuras han creado dos niveles de pestañas (ebankinter.com) que incumplen los principios básicos. Además suelen incluir un número de pestañas demasiado alto para ser útiles, en mi opinión, el máximo de pestañas debería de ser 7, siendo recomendable 4 o 5.

La popularización de las pestañas ha producido que actualmente sean un método más de presentar los enlaces de una forma estéticamente atractiva, pero en ningún caso correcta. Ver ejemplos de abuso de pestañas.

El problema de la home

Qué pestaña mostrar la primera en la home es un serio problema. Solo si una web tiene una sección claramente dominante sobre el resto (por temática de la web o por modelo de negocio) se evita el uso de la problemática pestaña de "Inicio".

Muchas webs que carecen de esta sección optan por una pestaña de "Inicio", "Welcome" (Amazon.com) o "Home" (Fnac.es) sin embargo esta pestaña no corresponde a ninguna sección y suele contener vínculos con destino a otras pestañas. Solo Google soluciona este problema, tiene una primera pestaña totalmente dominante sobre las otras y al mismo tiempo el resto de ellas son mutuamente excluyentes.

En muchos casos estas pestañas de "Inicio" se crean por razones comerciales, como por ejemplo, disponer de un lugar para colocar promociones variadas y no de una sola sección. El análisis de los datos demuestra que los productos promocionados en esta pestaña son los que más se venden e incluso muchas veces los únicos que se venden. Sin embargo este análisis es incorrecto, en muchas webs es tan difícil encontrar los productos que solo se compran los que están fácilmente localizables, es decir, los de la pestaña de "Inicio". Pero ello no significa en ningún caso que esta pestaña sea adecuada, sino que el diseño de nuestro sitio es muy mejorable.

Breve historia

El uso original de las pestañas proviene de sistemas operativos de ventanas donde se usa para permitir visiones de diferentes aspectos de un mismo elemento de información.

En la web Amazon fue el primer sitio en utilizarlas para separar las diferentes secciones de su sitio. Desde entonces su número de pestañas ha ido incrementándose y disminuyendo, parece que tengan fuertes debates internos y no se decidan acerca del número óptimo de pestañas.

Comentarios lector - Actualización 02/02/2002

Javier Darriba - Xperience Consulting comenta:

"... afirmas que el uso de pestañas es correcto cuando son departamentos estancos y sin vínculos entre ellos y cuando no haya la misma información en dos pestañas diferentes.

No acabo de entender por qué es así. Yo he testado sites con pestañas que no cumplían esas premisas que tu comentas y han funcionado perfectamente, sobre todo para perfiles poco avanzados en Internet."

Respuesta de Eduardo Manchón:
Cuando un sitio web utiliza una metáfora es para imitar la realidad y a traves de ella facilitar el uso. Cuando las pestañas tienen vínculos entre ellas no imitan bien la realidad y por tanto no funcionan como metáforas.

Eso no quiere decir que forzosamente los usuarios hayan de tener problemas con ellas, significa que las pestañas no les ayudan como tales y que simplemente funcionan como un menú de navegación superior. Los menús de navegación no tienen todas las implicaciones de unas pestañas bien diseñadas (visualización rápida de la estructura del sitio, feedback sobre situación, etc.), aunque funcionan bien en muchos sitios.

Cuando las pestañas no son estancas y un usuario se mueve entre ellas por medio de vínculos, no hay feedback del cambio de pestaña, se pasa por encima de su control y el usuario no sabe dónde está en la estructura del sitio. Aunque lo cierto es que no está nada claro que indicarle al usuario "dónde está" sirva para algo, pero eso ya es otro tema. Si te interesa puedes ver una discusión sobre ello en mi articulo sobre áreas de navegacion.

En definitiva, con tantas pegas y aportando tan poco, mi opinión es que las pestañas, en la mayoria de sitios, no aportan nada o lo que es lo mismo, no son más que un menú de navegación.

Referencias:

- Agradecimientos por sus contribuciones: Juan Luis Hortelano, Marc Noguera (a través del foro Cadius) y a Javier Darriba por su correo electrónico.

- Nielsen, J. When Bad Design Elements Become the Standard. Useit.com. Difiere del enfoque arriba expuesto y expone la visión original de las pestañas tal y como funcionan en Windows, sin embargo reconoce que se han convertido en un estándar para la web diferente de Windows.

- Uieweb.com. The Tabbed Dialogs: Semantic Minefields. Para conocer como funcionan las pestañas en Windows, algo fundamental si se quiere entender porque no funcionan bien en la web.

- Whitman. J. Revenge of Killer Tabs. Comentarios sobre uso y abuso de pestañas.

- Menon, M. The mystery of the disappearing Amazon tabs. Amazon realizó unas pruebas de introducción de pestañas en la página de resultados, en este enlace se muestran pantallazos.

- Sullivan, D. Google's New Look & New File Types. Sobre la introducción de pestañas en Google.com.