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

Empieza la cuenta atrás para el acceso al rectorado de la Universidad de Murcia.

Tres son los candidatos:

• José Antonio Cobacho (joseantoniocobacho.org)
• Elena Quiñones (umasu.com)
• Gabriel García (www.gabrielgarciasanchez.es)

Hicimos un pequeño informe sobre la Usabilidad y Accesibilidad de las webs electorales de los tres candidatos que, en su día, remitimos a los interesados. Al candidato Gabriel García se lo remitimos hace apenas unas horas, pues su página web es la más reciente de las tres.

En esos informes nos centramos en los principales problemas de Usabilidad y Accesibilidad que hemos detectado, con el fin de que puedan subsanarlos y así su comunicación con los potenciales electores sea más fluida. Si, de paso, conseguimos concienciarles en algo sobre Usabilidad y Accesibilidad, mejor que mejor.

Metodología

Hemos hecho una revisión con la herramienta TAW 3.0 para detectar los principales problemas de Accesibilidad. Este test revisa el cumplimiento de los puntos de verificación de las Pautas de Accesibilidad al contenido web, y avisa del cumplimiento o no de los puntos que es capaz de detectar de forma automática. Hay tres niveles de prioridad y tres grados de conformidad: A, AA, AAA, según se superen todas las pautas de prioridad 1, 2 ó 3 respectivamente.

Según la vigente LSSI las webs de la administración pública tienen que ser accesibles ya desde el 1 de enero de 2006 (Este aspecto se explica con más detalle en los informes completos que podéis descargar al final del artículo).

Para cuestiones más relacionadas con Usabilidad hemos utilizado una heurísitica de fabricación propia.

La heurística empleada es parecida a la que empleamos para medir la Usabilidad de los periódicos digitales. En esta versión de la heurística son 54 los aspectos evaluados.

A partir de la revisión heurística y de las Pautas de Accesibilidad formulamos para cada candidato una lista de los principales problemas encontrados, junto con una propuesta concreta de solución para cada uno de ellos.

Finalmente, hicimos recomendaciones basadas en la observación personal de cada una de las páginas.

Resultados

Veamos los resultados obtenidos para cada página web de los candidatos.

joseantoniocobacho.org

Aplicando la heurística se sumaron 44 puntos sobre un total posible de 78, lo que hace un cumplimiento de los indicadores del 50% [56,4%]. De los 54 indicadores, 15 no eran aplicables.

Los principales problemas concretos fueron:

• Descarga. La página tiene problemas de descarga en equipos con conexiones lentas. La página de inicio ocupa 250 kb. que se gastan en un innecesario fichero Flash
• Banner superior. La fotografía del candidato del banner está muy mal retocada. Se utilizan tres colores y dos tipografías, en algún caso con mala legibilidad, se usan imágenes para ofrecer textos, la foto del candidato aparece a la derecha del todo.
• Navegación. Menú. El menú de navegación de la página principal aparece abajo del todo, en muchas configuraciones de usuario quedaría fuera de la vista en la primera pantalla visualizada.
• Navegación. Programa. El elemento más importante del proyecto web, el programa o líneas generales de actuación, está escondido bajo un epígrafe denominado “Sugerencias”, y dentro de éste en “Nuestra opinión”. Así, es difícilmente encontrable.
• Página intermedia. No aporta nada (ni siquiera estética), pesa mucho, no informa.
• Tipografía y formato del texto. Emplea negrita para todo el cuerpo del texto. El tamaño de letra es demasiado pequeño (12 px). Justifica a ambos lados, renglones muy largos, no optimiza la CSS para impresión
• Enlaces No son estándar (no están subrayados, ni de color azul, ni cambian de color tras ser visitados). Además usa exactamente la misma tipografía que el resto del texto. Se recurre a rotulaciones del tipo “pulse aquí”.
• Identificación y visibidad del sitio. Aparte del texto del título (muy bien elegido) la página de inicio apenas contiene elementos textuales que la describan (casi todo es flash sin opción alternativa). No utiliza etiquetas description y keywords que le ayuden a Googe a ofrecer una buena descripción en la lista de resultados (Google suele usar el contenido de ‘description’ para describir el sitio en la lista de resultados).
• Accesibilidad. Es positivo que no se utilicen tablas para maquetar y que todas las imágenes tengan título alternativo. El TAW no detecta fallos de Prioridad 1 en su revisión automática. Sin embargo, se siguen detectando tres fallos de Prioridad 2 y uno de Prioridad 3. Se emplean valores absolutos, no hay buena organización de encabezados (H1, H2,..)

Sin embargo, y pese a los problemas enumerados, las principales carencias de esta página provienen más del aspecto humano que del técnico, más de la Usabilidad que de la Accesibilidad técnica.

El principal problema de la página tiene que ver con la usabilidad percibida, con la deficiente estética, y ello puede generar un problema de credibilidad, pues aunque la estética sólo influye indirectamente en la Usabilidad real de la página, es el elemento que más se recordará.

La sensación que esta página puede dar al usuario es la de estar mal acabada, poco cuidada, hecha con despreocupación, o bien que se dispone de pocos conocimientos técnicos para su desarrollo.

Hablamos de aspectos como el desafortunado tratamiento del color y de la imagen. Especialmente grave es la pixelación de la foto del candidato y el aspecto amateur del encabezado y la página de introducción.

La página es poco legible porque, además de usar un tamaño de letra demasiado pequeño, usa letra en negrita para todo el texto.

Otro fallo muy importante es el relacionado con la localización del programa (o declaración de intenciones), que se le esconde al usuario tras el item “Sugerencias”.

umasu.com

Aplicando la heurística se sumaron 53 puntos sobre un total posible de 90, lo que hace un cumplimiento de los indicadores del 58′8%. De los 54 indicadores, 9 no eran aplicables.

Los principales problemas concretos fueron:

• Descarga. Ciertos problemas de descarga en equipos con conexión lenta (131 kb. en la página de inicio).
• Marcos. Se emplean marcos en algunas partes del web (Club U+U).
• Logotipo. El logotipo sólo está disponible dentro de un Flash y en algunos momentos desaparece.
• Longitud de página. Es bueno que la página de inicio brinde contenido directamente, sin preámbulos, pero no es bueno que el listado de novedades sea tan largo. Se podría segmentar.
• Buscador. Es la única de las tres páginas que tiene buscador, y la única que, dado su número de páginas, puede necesitarlo. Sin embargo, no hay (o no se ve) un botón “buscar” junto al cajetín de búsqueda
• Navegación. El programa. El programa electoral o declaración de intenciones no aparece en un item que se identifique claramente como tal, y se esconde tras un item denominado “Entrevista”.
• Menú de navegación. El menú de navegación se basa en imágenes que, además, no tienen texto alternativo.
• Animaciones. Se recurre mucho a animaciones Flash, especialmente en el apartado club U+U. Aunque parece pensado para los estudiantes, puede que contenga excesivos elementos de interacción superflua, sin que se proveea de una opción alternativa sin Flash.
• Tipografía y formato del texto. Tamaño muy pequeño del tipo de letra. Tamaño fijo de la letra. Texto justificado. No se optimiza la CSS para impresión.
• Enlaces. No son estándar (gris sin subrayado), ni de distinto color del texno normal, ni cambian de color tras ser visitados.
• Identificación y visibilidad del sitio. El título de la página (TITLE) no es informativo, sólo una marca (“UmasU”), y el lema (”Tu opinión es más universidad”) no aclara gran cosa. La metaetiqueta ‘description’ no usa lenguaje natural y es poco clara (”UmasU , U+U, Universidad de Murcia, Elena Quiñones, Desarrollado por P.l.a.s. ‘05′”). ¿Es más importante informar de que la página la hizo el tal P.l.a.s. ‘05′ que decir que es la página de una candidata a rectorado? (recordemos que las etiquetas TITLE y la meta DESCRIPTION suelen ser las elegidas por Google para describir los resultados de búsqueda)
• Alternativas textuales. La mayoría de imágenes y elementos multimedia no están etiquetadas con una opción accesible alternativa
• Se maqueta con tablas
• Accesibilidad. Además de algunos ya citados, con el TAW se detectan en la página principal 9 fallos de Prioridad 1, 40 fallos de Prioridad 2 y 40 de Prioridad 3. Algunos de ellos son: emplear unidades de medida absolutas, no usar elementos de encabezado (H1, H2…), emplear atributos de presentación en el propio HTML, ventanas emergentes (target=”_blank”).

Además de los enumerados, detectados con la heurística y el TAW, también hay otros detalles reseñables:

• Se indica la fecha del día actual, no la de última actualización (¿Los electores no saben ni en el día en que viven?).
• No se avisa claramente del tipo de formato en el que están los ficheros no HTML enlazados (pdf, mp3…)
• Se usan tres iconos relativos a PDF, correo e impresión que no son necesariamente entendibles por todos, al no llevar ningún tipo de rotulación complementaria

Un aspecto positivo, que la diferencia de los otros dos candidatos hasta el momento, es que la página tiene buen dinamismo de contenidos, se actualiza a menudo con un seguimiento diario a las noticias y notas de prensa.

En definitiva, aunque la sensación general que ofrece la página de la candidata Elena Quiñones es positiva, y cuestiones como elegancia, belleza y atractivo están bien resueltas, hay fallos en cuestiones de accesibilidad y usabilidad.

Quizás el fallo más importante es el relacionado con la localización del programa (o declaración de intenciones), que se esconde tras la etiqueta “Entrevista”.

Este sitio web está gestionado con el CMS Mambo, con lo que parece que bastaría con modificar la hoja de estilo y los ficheros de plantilla para que los cambios fueran efectivos de inmediato.

www.gabrielgarciasanchez.es

Aplicando la heurística se sumaron 55 puntos sobre un total posible de 78, lo que hace un cumplimiento de los indicadores del 70%. Delos 54 indicadores, 15 no eran aplicables.

Los principales problemas concretos encontrados fueron:

• Tiempo de descarga. La página principal tiene problemas de descarga en equipos con conexiones lentas. Ocupa 265 kb, casi todos ellos en una foto del candidato mal optimizada.
• Navegación. El enlace de vuelta a la página principal se sitúa en un item denominado “volver” en lugar de en la cabecera.
• Tipografía y formato del texto. Tamaño del texto adecuado (en inicio y "presentación"). Sin embargo, se utiliza una medida fija (p.e. <font size="4">) y marcada desde el propio código HTML en lugar de en la hoja de estilo. Escesivo grosor del tipo de letra. Texto justificado (En pantalla se lee mejor el texto sin justificar). Interlineado insuficiente en algunos apartados (los que emplean mucho grosor de tipo de letra).
• Identificación y visibilidad del sitio. El título de la página (‘title’) no está mal (“Gabriel García Sánchez”) pero podría ser más informativo. No se incluyen metaetiquetas de descripción del sitio.
• Hay imágenes no etiquetadas con alternativas textuales.
• Otros problemas de Accesibilidad: Unidades de medida absolutas, uso inadecuado de elementos de encabezado (H1, H2..), atributos de presentación dentro del propio HTML…
• Logotipo/cabecera. Se utiliza texto para la rotulación de la cabecera con una fuente no estándar. Si no se tiene instalada dicha fuente el aspecto del encabezado puede variar mucho. Podría ser interesante en este caso usar una imagen como fondo del encabezado, y dentro de un H1 el texto del rótulo pero sin mostrarlo cuando esté visible la imagen

La página web de el candidato Gabriel García tiene un diseño sencillo, estéticamente agradable y con un nivel de usabilidad aceptable.

La página falla, en cambio, en algunas pequeñas cuestiones de usabilidad y accesibilidad. Normalmente son simples detalles, con cierta trascencendia pero fácilmente subsanables.

Sería bueno que incluyera expresamente una categoría “Programa electoral”. Si aún no dispone de un programa cerrado sí podría ofrecer un avance de éste y dejar claro que ahí habrá un programa electoral más adelante.

Aunque se utiliza CSS para definir atributos de presentación, también los hay en el propio código HTML. Debería darse formato de presentación empleando sólo la hoja de estilo.

Conclusiones

A partir de la heurística de usabilidad empleada parecen confirmarse las ideas intuitivas formadas a partir de la primera impresión. La página más usable es la del candidato Gabriel García (70%), seguida de la de Elena Quiñones (58′8%), siendo la de José A. Cobacho (50% [56,4%]) la menos usable de las tres.

La página web del candidato José A. Cobacho tiene una estética poco brillante, lo que, unido a importantes errores conceptuales, puede darle al usuario cierta sensación de dejadez y falta de conocimientos en diseño web por parte de su equipo técnico.

Mejor estética ofrecen las páginas web de la candidata Elena Quiñones (aspecto profesional, con trabajo de marketing) y del candidato Gabriel García (elegante, simple y clara).

No obstante, ninguna de las tres páginas web parece haberse desarrollado siguiendo criterios de usabilidad y accesibilidad desde el principio, aunque la del candidato Gabriel García, gracias a su sencillez, es la que mejor resultado ofrece en este aspecto.

Resulta curioso que uno de los principales problemas de las tres páginas sea que los candidatos no ofrecen un programa electoral (al menos hasta hoy, que quizá sea pronto). Lo más parecido a ello, en el caso de Elena Quiñones y José A. Cobacho, es una especie de declaración de intenciones sobre determinados temas, que esconden en categorías que no parecen tener que ver con el programa electoral, que se supone que es la clave en una campaña electoral.

Tal vez no aparecen los programas electorales por ser aún pronto, pero el usuario medio es ésa la información que esperaría encontrar. Si no se le ofrece, y tampoco se le avisa de cuándo estará, podría desconfiar de la credibilidad o seriedad de los candidatos.

Otro problema común, quizás relacionado con la credibilidad y utilidad más que con la Usabilidad en sentido estricto, es el hecho de que ninguno de los tres de voz a los electores. Todos aportan un medio de contacto, una encuesta o dirección de correo, y ruegan aportaciones. Sin embargo, a fecha de hoy ningún candidato ha hecho pública la participación de ningún elector. Bueno, en realidad, el candidato José A. Cobacho empezó a hacerlo, pero esas preguntas/respuestas desaparecieron después de un tiempo.

Una cuestión que no se estudia en este informe y que no aparece reflejado en los test y heurísticas es la cuestión de la cantidad y/o calidad de la información ofrecida. De hecho, según nuestro análisis la página más usable es precisamente la que menos información contiene (Gabriel García). Suponemos que algo habrá influido eso en su sencillez actual, lo que a su vez repercute en un buen resultado a partir de la heurística. Habrá que estudiar si, de crecer el volumen de información de la página, lo haría en detrimento de la Usabilidad de ésta o no.

En definitiva, salga quien salga elegido, parece claro que ni ellos ni su equipo de asesores tienen excesiva preocupación por la accesibilidad y usabilidad, hecho que no deja de ser preocupante si tenemos en cuenta que ya está en vigor la LSSI.

Si deseas descargarte los informes:

• Informe José A. Cobacho (PDF - 470 kb)
• Informe Elena Quiñones (PDF- 450 kb)
• Informe Gabriel García (PDF -500 kb)

Por supuesto es posible hacer un trabajo más exhaustivo y preciso, incluso se me pueden haber pasado cuestiones importantes en estos informes express, pero eran precisamente eso, informes express.

Si se me ha escapado algo importante podéis hacer aportaciones en los comentarios.

Para hacer un seguimiento del resto de cuestiones de la campaña electoral os recomiendo la bitácora Carrera eRectoral

Enlaces relacionados:

• Motivos para hacer páginas accesibles
• Usabilidad de los sitios accesibles
• Validación automática. Una buena ayuda
• Verificando la Accesibilidad (Curso del Sid@r)
• Guía de Evaluación Heurística de Sitios Web (Yusef Hassan y Francisco Martín)