Pestañas en Diseño Web, cuándo y cómo usarlas
Las pestañas solo funcionan bien en determinados sitios web porque tienen muchas limitaciones. Son útiles para delimitar secciones separadas, sin embargo y frecuentemente no se utilizan de manera correcta
Por Eduardo Manchón
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 tradicional archivo de documentosr. 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. 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 ellas y la única manera de cambiarlas 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 facilmente reconocible 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 en Google.com.
¿Cómo 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, pero utilizando el mismo color. Si hay demasiados cambios el usuario puede pensar que la pestaña ha cambiado y quedar confundido.
Todo el área ha de ser clicable y no solo el texto, para facilitar su selección (Ley de Fitts)
Estas han de parecer pestañas reales para representar adecuadamente su función. En muchos sitios se han simplificado o rediseñado tanto que apenas son reconocibles.
Utilización errónea
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 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 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 debería de ser 7, siendo recomendable 4 ó 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 pocos casos correcta.
El problema de la Página Principal
Qué pestaña mostrar por defecto en la home es un serio problema para cualquier sistema. 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". Sin embargo esta no corresponde a ninguna sección real y suele contener vínculos con destino a muchas otras.
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 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 aquí 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 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 ha ido incrementándose y disminuyendo, parece que tengan fuertes debates internos y no se decidan acerca del número óptimo. |