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

por | 24 julio 2009
¿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 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. 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. Fuente: Webtaller. Autor: Eduardo.
Compartir... Email this to someoneShare on LinkedIn0Pin on Pinterest0Share on StumbleUpon0Share on Tumblr0Tweet about this on Twitter