Guía sobre usabilidad de las solapas/pestañas

Las solapas o pestañas son muy utilizadas en prácticamente todos los sitios que se ven hoy en día. Jacob Nielsen (para el que no lo conoce para muchos el “guru” de la usabilidad web) ha escrito 13 reglas para hacer las solapas usables.

Aquí les dejo una traducción Libre:

1. Utiliza las solapas para moverte dentro del mismo contexto y no para navegar por áreas diferentes (Error introducido por amazon.com, Juan Luís hizo un recorrido por los cambios de diseño de Amazon muy interesante)

2. Utiliza de manera lógica porciones de contenido para que los usuarios puedan predecir fácilmente que encontraran cuando selecciones una solapa.

3. En línea general los usuarios no tienen que ver de forma simultanea el contenido de múltiples solapas. Si la gente realmente tiene que comprar la información entre diferentes pestañas la necesidad de ir hacia delante y hacia atrás pone un carga extra en su memoria a corto plazo y de esa forma baja la utilidad comparada con un diseño que pone todo en una sola página grande.

4. Las pestañas son paralelas por naturaleza, al menos para los usuario de los Estados Unidos (Para los usuarios internacionales sería mejor tener una pestaña para “Norteamérica” o “América” para un mejor paralelo con “Europa” y “Asia”)

5. La pestaña que se encuentra seleccionada tiene que estar destacada. Puedes destacarla por su color, por un tipo de fuente distinta o bien haciendo aparecer esta solapa delante de las demás.

6. Las solapas que no están seleccionadas deben estar claramente visibles, un color que se confunde con el fondo puede lograr que el usuario nunca pulse en ellas y por lo tanto nunca conozca su contenido.

7. La solapa común y corriente esta conectada con el área que posee el contenido, de igual manera que miramos en las tarjetas de un índice físico. Esta conexión ayuda al usuario a visualizar las solapas activas y reforzar la conexión entre el contenido y su solapa.

8. Las solapas deben contener texto corto y con un lenguaje simple. Las solapas en general deben contener una o dos palabras. Las solapas cortas son mas “escaneables” si necesitas solapas más grandes esto es un signó que las opciones son demasiados complicadas para este tipo de control.

9. Mantener siempre un mismo estilo de capitalización. En este punto Nielsen no recomienda poner todas las letras en mayúscula cuando definimos el texto de cada solapa puesto que dificulta la legibilidad.

10. Utilizar solo una fila de solapas. Muchas filas destruyen la memoria espacial y hace imposible a los usuarios recordar que etiquetas ya han visitado. También muchas filas de solapas son un síntoma de complejidad excesiva. Si necesitas más de una fila de solapas tiene que simplificar tu diseño.

11. Las filas de solapas deben estar arriba del panel y no sobre los costados ni abajo, lugares en donde seguro pasaran desapercibidas.

12. El alcance de uso de las pestañas o el área que controlan debe estar claramente definidos en el aspecto visual.

13. Velocidad de respuesta. Al presionar sobre una etiqueta el contenido deberá ser desplegado de manera instantánea, probablemente se logre esto con Ajax, no obstante la tecnología no es lo importante, sino mas bien el resultado. Es aconsejable que el tiempo de respuesta sea menor a 0.1 seg.

En línea general estoy bastante de acuerdo con los puntos. Aunque considero en la mayoría de los casos a Nielsen bastante extremista, creo que con esta guía a acertado mucho.

Los puntos que me parecen fundamentales son los referentes al realce (Activa/Desactivada) y ubicación de las solapas, también coincido con el aspecto relacionado a la velocidad de respuesta, no creo que sea posible llevar a esos tiempos la respuesta en la mayoría de los casos, pero si utilizamos el sentido común no debería estar muy por encima de lo que recomienda.

Esta entrada fue escrita el Lunes, Septiembre 24th, 2007 a las 11:54 y fue guardada bajo Desarrollo, Diseño.

Entradas relacionadas

• Usabilidad de los juegos
• Guia SEO para diseñadores
• Formularios CSS y Ajax
• Costos de un test de usabilidad
• Para probar la usabilidad de un sitio solo se necesitan 5 personas