Úsalo: Usabilidad y Accesibilidad para el diseño web. Usabilidad para todos

Durante este mes de agosto vamos a publicar algunos materiales no inéditos. En unos casos se tratará de refritos de entradas anteriores o, como en este caso, de un artículo publicado previamente en otro lugar.
El artículo de hoy fue publicado anteriormente en Alzado.org (ahora ligeramente retocado).

Resumen:

Los menús desplegables pueden parecer una buena solución si deseamos emplear muy poco espacio para las categorías que estructuran un sitio web. Sin embargo, son difíciles de utilizar, ocultan información, pueden dispersar la atención del usuario e, incluso, impedirle la navegación.

Menús desplegables

Los menús desplegables se pensaron para utilizarse en los formularios, lugar donde cumplen su función con eficacia, y resultan ideales para seleccionar, dentro del formulario, una opción entre múltiples disponibles (p.e. nacionalidad, provincia…).

Sin embargo, algunos diseñadores, llevados por el ansia de ofrecer más contenidos en menos espacio, pensaron que utilizando unos cuantos menús desplegables como herramientas de navegación, en lugar de como elementos de formulario, solucionarían el problema de disponer de una única pantalla de inicio para ofrecer las opciones principales.

Así, en lugar de hacer un buen trabajo de Arquitectura de la Información y estructurar el sitio adecuadamente, dejando en la página principal sólo las opciones fundamentales pero bien visibles, optaron por ofrecer todas las posiblesopciones de navegación desde la página principal, eso sí, escondiéndolas tras un menú desplegable y comprimiéndolas como sardinas en lata.

Por tanto, pensaron, en lugar de seleccionar esas opciones realmente importantes, se ponen todas y un problema solucionado. Pues no, error, ya que así lo que se consigue normalmente es crear un problema adicional en lugar de solucionarlo.

Desplegables de crackmanworld.com/

En otros casos, se fue aún más allá y, en lugar de utilizar el desplegable estándar, el típico de los formularios, se programó pequeños scripts para conseguir el efecto de un desplegable en cascada, con uno o incluso más niveles desplegables. Problema resuelto, pensaron, podemos poner absolutamente todas las opciones de navegación del sitio en un reducido espacio.

Pero no pensaron en algo que debería ser tan obvio como que las interfaces quienes las usan son los usuarios, no los diseñadores y que, por lo tanto:

• Un usuario no sabe, a priori, qué opciones hay en el desplegable de turno hasta que utiliza el ratón para descubrirlo.
• No todos los usuarios tienen la suficiente habilidad psicomotriz para manejar un desplegable con soltura. Sí, sí, los hay, incluso hay personas con mal pulso o con poca práctica en utilizar el endiablado ratón (¿recuerdas las primeras horas intentando usarlo?). El hecho de que windows sea el sistema operativo más extendido y se base en esos engorrosos menús desplegables no quiere decir que su éxito provenga de los menús, sino que tiene éxito por otros motivos y PESE a esos menús.
  También hay colectivos, como las personas mayores, que suelen padecer ciertos problemas psicomotrices, suficientes como para que el ratón les parezca una herramienta compleja. Además, suelen ser personas sin experiencia previa en el manejo de dispositivos de este tipo.
• Es mejor que las opciones disponibles se puedan ver de un vistazo, sin tener que ir tocando con el ratón varios desplegables hasta encontrar lo que se buscaba. En ocasiones, el enlace sólo funciona pulsando alguna de las opciones desplegables, pero no en el item que las encabeza, lo que desconcierta aún más.
• Excesivas opciones desvían la atención de las realmente importantes.
• Además, los desplegables en cascada que hacen algunos diseñadores no parecen desplegables, con lo que las opciones que contienen suelen pasar desapercibidas a un usuario que no se imagina que ahí no hay un enlace, sino múltiples.
• En determinados formularios de introducción de datos pueden llegar a ser realmente desconcertantes los menús interactivos, esos que cambian sus valores en función de lo que el usuario haga en determinadas partes de la pantalla.
• En muchos casos, esos scripts no son compatibles con todas las configuraciones de usario, con lo que, para esos casos, el problema pasa a ser muy grave: impedimos totalmente al usuario navegar en nuestras páginas. Justo lo contrario de lo deseable ¿no?.
  Utilizar CSS para los menús desplegables evita este problema, pero sólo este último, no todos los citados anteriormente.

Menús no desplegables y en forma de directorio

Ya parece claro que los menús desplegables no son los que mejor funcionan para los usuarios (aunque le eviten dolores de cabeza a algunos diseñadores). Veamoslo con datos empíricos al respecto.

Directorio de Google

En un estudio con usuarios realizado por Bernard y Hamblin (2003) se analizaban tres formas de disponer los elementos de menú en la pantalla:

• Uno era mediante un índice de categorías y subcategorías en el centro de la pantalla; ése es el caso del típico índice de Yahoo (ahora desaparecido en favor de su potenciado buscador), o el directorio de Google y similares.
• En otro caso se utilizaba un desplegable en cascada dispuesto horizontalmente y,
• En un tercer caso, el menú desplegable se disponía verticalmente en la parte de la izquierda de la pantalla.

Menús de Terra.es

Los resultados de dicho experimento mostraban que los usuarios terminaban mucho antes las tareas encomendadas usando el índice de categorías que con cualquiera de los otros dos sistemas.

Además, los usuarios participantes en el estudio indicaban expresamente preferir la navegación mediante el índice de categorías a los otros dos modos.

Con el menú desplegable horizontal tuvieron problemas incluso para identificarlo, al ubicarse en la parte superior de la pantalla. Tal vez ese problema obedezca al famoso fenómeno de ceguera
a los banners.

Menú horizontal de Walker Bay

Recomendaciones para hacer un buen menú

Aunque no hay fórmulas mágicas y es posible que en casos muy concretos estas recomendaciones no sean lo más oportuno, por ejemplo cuando los usuarios tengan un perfil peculiar y estén muy bien delimitados (en una intranet), en la inmensa mayoría de casos éstas serán ideas útiles:

• Los desplegables, como ya hemos visto, mejor no utilizarlos.
• Si no tienes más remedio que hacer un menú desplegable (aunque, salvo capricho del cliente no parece haber una razón lo suficientemente buena para hacerlo), asegúrate
  de que no dejarás ciego al usuario si no dispone de javascript, para ello emplea CSS, que permite hacer menús desplegables sin usar javascritpt.
• Lo mejor es no colocar seguidos más de 5 item, 7 como máximo (nos cuesta memorizar más de 5 elementos). Siempre podemos recurrir a usar elementos de separación visuales entre bloques de 5 ó 7 elementos.
• Habrá que recurrir a los bullets si algún item requiere de dos líneas.
• Seleccionar las categorías realmente importantes para que aparezcan en la página web.
• Si no parece fácil elegir las categorías más importantes y su jerarquía relativa puedes recurrir al card sorting, te ayudará a pensar las categorías del sitio y a jerarquizar tus menús.
• Si realmente hemos de gestionar finalmente una gran cantidad de categorías, lo mejor es recurrir a un índice de categorías (o directorio) en el centro de la página y la ayuda de un buscador.

En definitiva, si tienes bastantes categorías que gestionar y puedes usar un índice central de categorías úsalo, no te compliques la vida buscando formas originales y epatantes de mostrar las opciones de navegación con multidesplegables, sólo lograrías hacerle la vida más difícil a tus usuarios.

Artículos:

• Michael Bernard & Chris Hamblin. Cascading versus Indexed Menu Design
• Patrick Griffiths y Dan Webb. Menús desplegables con CSS
• Yusef Hassan. Componentes problemáticos de interacción Web
• Eduardo Manchón. Ceguera a los banners, cómo se produce este fenómeno psicológico
• Eduardo Manchón. Diseña como piensan los usuarios. Técnica de agrupación de tarjetas o Card Sorting
• César Martín. Consejos prácticos para diseñarun buen menú de navegación
• Jakob Nielsen. Drop-Down Menus: Use Sparingly
• José Luis Velázquez. Menús desplegables y accesibles