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

Publicado por Fran Tarifa

26 Septiembre, 2007

Las solapas o pestañas son muy utilizadas en prácticamente todos los sitios que se ven hoy en día. Jacob Nielsen ha escrito 13 reglas para hacer las solapas usables.

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).
Utiliza de manera lógica porciones de contenido para que los usuarios puedan predecir fácilmente que encontraran cuando selecciones una solapa.
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.
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”).
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.
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.
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.
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.
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.
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.
Las filas de solapas deben estar arriba del panel y no sobre los costados ni abajo, lugares en donde seguro pasaran desapercibidas.
El alcance de uso de las pestañas o el área que controlan debe estar claramente definidos en el aspecto visual.
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.