ProyectoWeb - Sobre Diseño de Interacción, Usabilidad y AI
Suscribirse Suscribirse al Boletín



 
Año 2 - Boletín Nro 42 - jueves 10 de julio de 2003
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.

ProyectoWeb - Pestañas en Diseño Web, cuándo y cómo usarlas

:: Portada
:: Agenda
:: Boletines por fecha

:: Lista de Correo (PWlist)
:: Tumblelog nueva ventana
:: ¿Quiénes Somos?

:: Contactar


2da Mesa Redonda Internacional - Una Web para Todos. La Habana
2da Mesa redonda Internacional de ProyectoWeb "Una Web para Todos". La Habana. abril 2008


Eventos
:: 1er Enc. Iberoamericano de
Diseño de Comunicación

- mayo de 2006 nueva ventana

:: 1ra Mesa Redonda Internacional "Una Web para Todos" - abril de 2006 nueva ventana

Día Mundial de la Usabilidad:
Evento Teórico "Por un Diseño Web Accesible y Universal"
:: 2005 - Relatoría nueva ventana
:: 2006
nueva ventana


Nos visitaron
:: Juan Leal - 2005
::
Nacho Puell - 2005
:: Jesús Carrera - 2006 nueva ventana
::
Jorge Barahona - 2006 nueva ventana



Web Afines
:: Happyuser nueva ventana
:: Lista de Cadius nueva ventana
:: NoSoloUsabilidad nueva ventana
:: Alzado nueva ventana
:: Pablo Impallari nueva ventana
:: UsoLab nueva ventana
:: Jarango.com nueva ventana
:: Véaseademás nueva ventana
:: Inusual nueva ventana
:: seisdeagosto.com nueva ventana
:: Usalo nueva ventana
:: Denken Über nueva ventana
:: Terremoto.net nueva ventana
:: dnxgroup nueva ventana
:: Biguel nueva ventana
:: SIDAR
nueva ventana
:: Usespanol nueva ventana
:: Nethodical nueva ventana
:: Macadamia nueva ventana
:: abcweb nueva ventana
:: Usable nueva ventana
:: Cadius Zaragoza nueva ventana



De Cuba
:: PROGRAFICA cubana nueva ventana
Organización interesada en trabajar en la promoción del Diseño Gráfico.



Sindicación RSS Feed
:: ProyectoWeb
:: Tumblelog


Recomendamos
:: Mozilla Firefox nueva ventana
:: Del.icio.us nueva ventana - Bookmarks
:: FutureMail nueva ventana - Notificador
:: Ovillo nueva ventana - Lista de Correo sobre estándares web en castellano

Redes Sociales
:: Estamos en Facebook
:: Comunidad en Ning
............................................

Portada | Agenda | Boletín por fecha | Suscribirse al Boletín nueva ventana
Lista de Correo | Tumblelog nueva ventana | ¿Quiénes Somos? | Contactar


RSS Feed:
ProyectoWeb | Tumblelog

ProyectoWeb - Sobre Diseño de Interacción, Usabilidad y AI - La Habana. Cuba
Creado en octubre de 2001
Correo Electrónico: info@proyectoweb.org
http://www.proyectoweb.org - http://www.proyectoweb.cubaweb.cu

ProyectoWeb, Sobre Diseño de Interacción, Usabilidad y AI