Versión en inglés: Tabs in web design: when & how to use them
¿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 la realidad fÃsica.
El elemento fÃsico que intentan imitar son las pestañas que sobresalen entre los separadores de un cajón archivador. De este modo siempre son visibles y permiten ver de un vistazo todas las secciones del sitio, facilitando la búsqueda de información a los usuarios.
¿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 a quien busque allÃ. Tampoco existe interconexión directa entre varios espacios, es decir, si se está 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. Si hay demasiados cambios el usuario puede pensar que la pestaña ha cambiado y quedar confundido.
Todo el área de la pestaña ha de ser clicable y no solo el texto, para facilitar su selección (ley de Fitts)
Las pestañas han de parecer pestañas reales (ver 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 mediante vÃnculos. 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 (de nuevo 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 uso y abuso de pestañas.
El problema de la home
Qué pestaña mostrar por defecto en la home es un serio problema para cualquier sistema de pestañas. 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".
Cuando no existe esta sección dominante se debe optar por una pestaña de "Inicio", "Welcome" (Amazon.com) o "Home" (Fnac.es). Sin embargo esta pestaña no corresponde a ninguna sección real y suele contener vÃnculos con destino a muchas otras pestañas.
Google está a salvo de este problema, tiene una primera pestaña (web) totalmente dominante sobre las otras (imágenes, grupos y directorio). Al mismo tiempo las otras pestañas tienen contenidos mutuamente excluyentes.
En muchos casos estas pestañas de "Inicio" se crean por razones comerciales, para disponer de un lugar para colocar promociones variadas y no solo de una única sección. El análisis de las estadÃsticas parece dar la razón a esta pestaña "Inicio" puesto 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 Internet, 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 – Javier Darriba de 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. Simplemente funcionan como un menú de navegación superior, pero no como pestañas. 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. Puedes ver una discusión sobre ello en el 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.