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

Les hablábamos el otro día de la usabilidad y accesibilidad de las webs de los candidatos a rector de la Universidad de Murcia.

Uno de los candidatos, José Antonio Cobacho, ha rediseñado por completo su web. El lavado de cara ha sido bastante bueno.

Se ha preocupado de que su estética sea ahora mucho más profesional y agradable. Es de suponer que ello influiría en la usabilidad percibida por los usuarios (habría que hacer unos test de usuarios para comproblarlo fehacientemente).

Sin embargo, el nuevo rediseño no mejora la accesibilidad y usabilidad, pese a que subsana algunos de los más sangrantes errores anteriores.

Alguna que otra de las pocas cosas que antes estaban bien hechas incluso han empeorado, lo que nos sugiere la idea de que los cambios obedecen más bien a que ahora el sitio esté hecho por otro diseñador y partiendo de cero que a otra cosa.

Aplicando nuestra heurística casera observamos que el grado de cumplimento de esas pautas pasa de un 56% (por error antes le dimos un 50%) a un 61%. Aunque se mejoran unos aspectos se empeoran otros, con lo que el resultado global casi no varía.

Veamos algunos aspectos puntuales en los que la heurística nos alerta de cambios (positivos o negativos):

• Tiempo de descarga. Mejora. Antes la página de inicio pesaba unas 250 kb y ahora está en torno a 90.
• Colocación del logotipo. Mejora. Antes lo más parecido a un logotipo era la foto del candidato y aparecía arriba a la derecha. Ahora hay un logotipo arriba a la izquierda.
• Opción de búsqueda. Ahora la hay, antes no. Lo positivo es que está arriba a la derecha y tiene el fondo blanco, y es búsqueda simple. Lo negativo es que no hay un botón “buscar”, el cajetín es muy pequeño y está mal etiquetado (’label-for’)
• Menú de navegación. Mejora. Antes estaba abajo (podía no verse) y aparece ahora arriba.
• No usar página intermedia. Mejora. Ahora hay una página principal propiamente dicha, la de antes era más bien una página intermedia.
• Diseño consistente. Empeora. El diseño de antes, aunque horrible, era consistente en todo el sitio. Ahora el logo cambia de color en cada nueva página.
• Ausencia de animaciones. Antes aparecía una pésima animación en flash que nada aportaba, salvo hacer inaccesible la página y emplear muchos kb.
• No abusar de mayúsculas y negritas. Mejora. Afortunadamente ahora no está todo el texto en negrita como antes.
• Color de fondo. Empeora. Antes era blanco (o casi) y ahora tiene un gris/azul con insuficiente diferencia de color respecto al primer plano.
• Vínculos subrayados. Mejora (poco). Antes los vínculos no estaban subrayados y ahora sí. Lo malo es que ni son azules ni cambian de color tras ser visitados.
• Título significativo. Empeora. Antes tenía un buen título, claro e informativo (”Jose Antonio Cobacho Gómez. Candidato a Rector de la Universidad de Murcia”). Ahora el título es “Cobacho 2006″, que para nada deja claro de qué va la página. Podría valer para cualquier cosa.
• Imágenes etiquetadas. Empeora. Las pocas imágenes que antes había estaban todas etiquetadas con su correspondiente alt, significativo incluso. Ahora no siempre están etiquetadas (p.e. los iconos de ficheros pdf).
• Etiquetas meta. Mejora. Aunque no se incorpora la etiqueta keywords sí aparece la description, con una buena descripción (erratas incluidas): “Págin del candidato a Rector José Antonio Cobacho. Elecciones Rectorado 2006 Universidad de Murcia . Ilusionate con tu Universidad. Profesionalidad. Solvencia. Transparencia”.
• Usar sólo CSS para dar formato. Empeora. Aunque se emplean hojas de estilo, se siguen insertando unos cuantos estilos de presentación en el propio HTML (p.e. <p align="justify"> .
• Prioridad I de Pautas de Accesibilidad. Empeora. Antes, al menos formalmente, se conseguía una validación de primer nivel al pasar una herramienta de validación automática. Ahora hay errores de Prioridad 1 en algunas páginas.

Pero la heurística es imperfecta casi por definición, y no puede medir algunas de las cosas más importantes, por ser difíciles de plasmar en una heurística, las unas, o de medirse tabularmente las otras. Hay que hacer también una inspección de tipo más “humano”. Véamos algunas de esas cuestiones.

Salvo en la descripción de la etiqueta meta “description” en la página principal no hay ningún texto que aclare de qué va la página web. No aparece ni la expresión “elecciones”, ni “rector”, ni tan siquiera “Universidad de Murcia”. Ojo, hablo de texto, no de imágenes, aunque en las imágenes ni siquiera teniendo buenos ojos se puede leer bien “Universidad de Murcia”.

Sí aparece, en cambio, algo relacionado con la UCAM (Universidad Católica de Murcia, la “competencia” de la UMU). Es decir, que el visitante no avisado bien podría pensarse que esta página es algún proyecto de la UCAM para 2006 denominado “COBACHO” (por ejemplo COmunión, Bendición y Adoctrinamiento Clerical de los Hijos de la Obra).

Este es el aspecto de la página al verla sin CSS:

Es decir, que un usuario que accediera con un navegador sólo texto, como lynx, o usando un lector de pantalla, como Hal, leería exactamente esto:

Cobacho 2006

Candidato | Ideas | Agenda | Sugerencias
» Día 9 : Reunión con profesores
y PAS de CC. de la Educación.
+ info
» Consulta las reuniones de la próxima semana.
» El Faro. Cobacho rechaza que
la UCAM tenga Facultad de Medicina
+ info
»La Opinión. Cobacho arremete contra la Comunidad por no financiar másteres y doctorados. + info
Ver listado completo
» Como paso previo a la publicación
del programa estractamos algunas
ideas fruto de la participación
de la comunidad universitaria. + info
“La vida sólo se comprende mirando hacía atrás… Pero se debe vivir hacía delante”. Soren Kierkegaard.

Como los encabezados de las secciones son imágenes de fondo sin ningún encabezado real no se lee encabezado alguno entre secciones, sino todo del tirón. Y lo dicho, no hay palabras que indiquen que hablamos de elecciones a la UMU aunque sí hay meción a la UCAM. Un lío padre, vamos.

Por otro lado, en la página principal aparecen tres secciones destacadas (Agenda, Noticias, Nuestras Ideas). Es positivo que se haga referencia expresa en la página principal al programa electoral (cosa que antes no se hacía), en este caso en la sección “Nuestras Ideas”, avisando claramente de que cuando exista un programa electoral ahí aparecerá.

Sin embargo, lo que parece ser la cabecera de esas secciones, con aspecto de algo sobre lo que se puede pinchar, no permite hacerlo. Además, los enlaces de texto propiamente dichos suelen tener la desaconsejada forma “+ info” en lugar de usar el propio texto informativo para rotular el enlace.

La sección “Noticias”, nueva en esta versión 2.0., no está disponible en el menú de la cabecera superior. Sólo se puede acceder a ella desde la página principal.

Está bien que exista cierta redundancia de enlaces que ayude a encontrar lo que se busca, pero ello se hace más complejo si en el menú principal falta una de las categorías y si éstas se rotulan de forma distinta (”Ideas” vs “Nuestras Ideas”).

Algunos fallos de accesibilidad son clamorosos, por su importancia y por lo innecesarios. Tal vez el principal es el relativo a la gestión de las ideas en la sección “nuestras ideas”. Cuesta entender lo que ahí ha querido hacer el diseñador, pues incorpora en el código fuente el texto completo de todas las ideas, pero sólo muestra aquella que se ha seleccionado con el ratón.

El problema es que esto se hace, de forma innecesaria, mediante javascript, de modo que si no funciona bien el javascript lo que se lee es NADA.

El diseñador no muestra, al principio, más que enlaces con la lista de ideas, aunque las carga todas y asigna un div a cada idea, pero las oculta (style=”display:none”). Luego utiliza un a href=”#” onclick=”muestraIdea(’ideas_numeroxx’)”.

Es decir, si no se tiene javascript o no se usa el ratón para activar los enlaces el usuario (quizá un potencial votante) no podrá enterarse de las ideas del candidato.

Huelga decir, tras lo anterior, que tampoco se aportan atajos de teclado (si bien la utilidad real de los atajos de teclado aún suscita bastante debate en este mundillo).

Visto lo anterior algunos otros problemas casi pueden parecer triviales. Por ejemplo: no se utilizan encabezados para organizar y jerarquizar el texto. Se emplean infinidad de ‘divs’ (dividitis) y desde la hoja de estilo (no siempre) se le asigna un formato de presentación, pero no se le da mayor importancia semántica al título de una noticia que al texto de ésta. Vean un fragmento del código:

<div id=’noticias’> <div id=’noticias_titular’>Cobacho rechaza que la…

Por cierto, pensaba que no se utilizaban aquí tablas para maquetar, pero en algunas páginas secundarias (noticias) sí se hace.

En definitiva, todo indica que Cobacho ha cambiado de diseñador ante el pobre aspecto de la anterior página. El nuevo diseñador tiene conocimientos de manejo de Photoshop (u otra herramienta de retoque gráfico), pero le falta formación o intuición en aspectos comunicativos, pues la nueva imagen, más bonita y elegante, no consigue transmitir una idea ni objetivo (¿para qué es la campaña Cobacho 2006?).

No obstante, quisiera recordar que en nada está reñida la mejora estética con la pérdida de usabilidad/accesibilidad. No es necesario sacrificar una cosa para ganar en la otra, salvo que sólo importe una de ellas y se ignore la otra. En este caso lo principal era mejorar en estética. Y se ha mejorado. Mucho, si se compara con la versión anterior, pero no tanto si se analiza la nueva estética con espíritu crítico.

Por tanto, el lavado de cara ha sido bueno y a conciencia, pero en lo demás seguimos como estábamos.

Artículo relacionado: Usabilidad de las web de los candidatos a rector de la Universidad de Murcia