14 consejos para crear pestañas ergonómicas y favorecer la usabilidad web

Las pestañas se han utilizado durante mucho tiempo en los programas para mostrar vistas alternativas del mismo grupo de información. Hoy en día esta muy extendido su uso en el diseño de los websites. Las líneas areas como Ryanair, EasyJet utilizan las pestallas del menu para permitir al internautas pasar de las reservas a los vuelos, a los hoteles o los alquileres de vehículos sin perderse.

Con el boom de los websites, las pestañas han empezado a utilizarse como elementos de navegación. Esta técnica fue popularizada por Amazon en 1998 y aunque finalmente la abandonó la navegación por pestallas en 2007, hay excelentes usos creativos de las pestañas en los websites que facilitan la navegación. En este post, os indicaré una lista de 14 consejos que podéis utilizar como un check liste para aseguraros que las pestañas de vuestro website son usables.

¿Por qué las pestañas son buenas para la ergonomía web?

• Cuando son utilizadas y colocadas correctamente, las pestañas son un excelente «interface user» de control que contribuyen a la mejora de la usabilidad.
• Las pestañas son excelentes metáforas. En la terminología de experiencia de usuario (UX), las metáforas son ideas u elementos gráficos que se utilizan para familiarizar usuario y aplicación. En este caso, el uso de las pestañas en la Interface es una excelente metáfora ya se asemeja a los separadores que se emplean en la vida real en los clasificadores o carpetas que nos encontramos en los archivos.De esta forma, es intuitivo para los usuarios el saber que estas pestañas dividen el contenido en secciones; y que como en la vida real, abriendo las pestañas (en el caso de Internet, haciendo clic en la pestaña) el contenido se muestra.
• Las pestañas ayudan a mejorar la organización del contenido: las pestañas dividen el contenido en secciones que ocupan menos espacio en la pantalla. En este sentido, los usuarios pueden acceder fácilmente al contenido que les interesa en lugar de tener que buscarlo dentro de todo el contenido de una página.
• Las pestañas son visualmente agradables: colocadas correctamente, las pestañas pueden mejorar el aspecto visual de un website. Gracias a su forma y su funcionalidad, añaden un interesante elemento de interfaz que es de uso intuitivo y normalmente difícil de no ver por parte del internauta.

Consejos de ergonomía web y usabilidad para las pestañas

He elaborado una lista de consejos recopilados de diversas fuentes y a través de mi propia experiencia. Posiblemente existan otros consejos o recomendaciones, pero estos 14 consejos son bastante útiles para asegurar la usabilidad de las pestañas.

1. Las pestañas deben parecer y funcionar como pestañas: Los usuarios tienen un concepto preestablecido del look y del comportamiento de las pestañas, resultado de su experiencia del mundo real y el online. Por lo cual, cualquier desviación con respecto a este concepto preestablecido puede perturbarlos.

   

2. Colocar las pestañas de navegación en la parte superior de la página: si las pestañas se utilizan como elementos de navegación, es preferible colocarlas en la parte superior del website. Es ahí donde los usuarios esperan encontrárselas. Por el contrario, si las colocamos abajo, el los laterales o peor aún, por debajo del límite de visibilidad, hay más posibilidades de que los usuarios no las vean. Recordad que los usuarios comienzan a buscar por el website incluso antes de que todo el contenido y las imágenes se hayan cargado, por lo que durante unas milésimas de segundos se concentrarán en la parte superior izquierda del website, incluso antes de que se haya cargado, esperando encontrar la navegación primaria.

   

3. Poner una sola fila de pestañas: acumular y superponer las pestallas las unas sobre las otras complican la interfaz de usuario y vuelve la navegación más difícil a los internautas (ver el ejemplo de amazon en 2000). Este consejo se refiere específicamente a varios conjuntos de pestallas y no incluye la navegación con doble línea de pestallas (incluyo en ejemplo de Apple). De hecho, esta última opción es una buena alternativa para introducir una jerarquía en la organización de las pestallas.

   

4. Tener siempre preseleccionada una de las pestañas: esto añade un mayor impacto a la pestaña, lo que es fundamental sobre todo durante los primeros segundos
5. Indicar claramente que pestallas está activada: esto se puede hacer utilizando colores distintos o incrementado el tamaño con respecto a las pestañas inactivas, poniendo el texto negrita y haciéndola aparecer por delante del resto de pestañas inactivas. También asegurarse de que el titulo de la pestalla activa esta bien visible y legible.
6. Indicar claramente que pestañas están actualmente inactivas: aseguraos de que las pestañas inactivas están más atenuadas, difuminadas, pero siempre visibles y los títulos son legibles para que los usuarios pueden verlos y seleccionarlos.
7. La pestaña activa debe aparecer conectada a su contenido: con el objetivo de reforzar la metáfora de la vida real, es recomendable mostrar la pestalla activa ligada o conectada a la página que esta muestra su contenido. De esta forma, hacemos que al usuario le recuerde el uso de los típicos clasificadores de toda la vida.
8. Colocar las pestañas con un orden que tenga sentido para los usuarios: tenéis que determinar si existe un orden lógico en el que se deberían presentar que facilite la usabilidad de nuestro website. Al hacer este ejercicio, al igual que en cualquier tema de ergonomía web, es muy importante adoptar una visión orientada desde el exterior, colocándoos en la piel de vuestros usuarios. Es decir, que la lógica que tiene que prevalecer es la de los usuarios y no la vuestra.
9. Las pestañas deben estar redactadas con un lenguaje claro: esto hace el escaneo de las pestañas por parte del usuario sea más rápido y la comprensión más simple. De esta forma, será más fácil para los internautas predecir que tipo de contenido que se pueden encontrar al hacer clic en cada pestalla.
10. Las etiquetas de las pestañas deben estar compuestas por 1 o 2 palabras: las etiquetas puestas en las pestañas deben describir claramente su función o su objetivo en 2 palabras como mucho. Esto aumenta la probabilidad de comprensión de los usuarios respecto al significado de la pestaña, lo que reduce significativamente la tasa de rebote. Además el hecho de tener que centrarnos en 1 o 2 términos supondrá un buen ejercició de reflexión sobre la elección de los mejores términos para etiquetar las pestañas.
11. Utilizar mayúsculas en los títulos: las etiquetas de las pestañas deben tener la primera letra de cada palabra en mayúsculas. Como en todo texto web, no es consejable escribir las etiquetas de las pestañas todas en mayúsculas ya que dificulta la lectura (a pesar de que el efecto negativo se minimiza ya que las etiquetas solo pueden componerse de una o dos palabras).

    

12. Aseguraros un tiempo de carga rápido: los usuarios esperan que la información que hay al hacer clic en una pestaña se cargue más rápido (menos de 0,1 segundos). Esto se puede lograr utilizando AJAX (en este caso, cuidado con el SEO de los buscadores) cargando el contenido en un segundo plano y haciéndolo visible al hacer clic en la pestaña. Lo importante es emplear una tecnología o técnica cuyo resultado final de la impresión al usuario que existen una conexión directa entre su clic en la pestalla y la carga rápida del contenido.
13. Considerar la posibilidad de agrupar las pestallas relacionadas: si tenéis varias pestañas, puede que sea interesante el crear grupos de pestañas que tengan relación entre ellas. En este caso, el uso de señales indicadores suplementarias como colores diferentes puede ser práctico. Como siempre, no podemos basarnos exclusivamente en los colores como elemento diferencial, porque puede haber algunos usuarios que padezcan daltonismo o que no comprendan el motivo por el que habéis utilizado la diferenciación por colores.

    

14. No utilizar pestañas como sustituto del hilo de Ariadna: aunque las pestañas se pueden utilizar para explicar donde nos encontramos y donde podemos ir en un website, nunca se pueden utilizar como un sustitutivo del hilo de Ariadna o breadcrumb. Los usuarios reconocen las pestañas y el breadcrumb cuando los ven y saben como deben comportarse. Sustituir el uno por el otro afectará negativamente a la usabilidad del website.

    

Fuente

Related posts:

50 consejos para mejorar la usabilidad de tu website 14 reglas de usabilidad para crear hipervínculos Consejos básicos de usabilidad web Experiencia de usuario: consejos para que los usuarios lean tu website ¿Quieres que los usuarios alcancen sus objetivos en tu site?…ahí van unos consejos.