Looking For Fashion?




Análisis heurístico de la página web de Educación de la Comunidad de Madrid


Para comenzar es necesario preguntarse: ¿qué es la usabilidad? Es la calidad con la que un usuario interactúa con un sistema o herramienta con el fin de obtener un objetivo concreto. Las webs, como producto digital, han de diseñarse facilitando el camino del usuario para que no se sienta frustrado por no conseguir el objetivo por el que accede a la misma.

En este caso concreto, como web al servicio ciudadano, (especialmente para padres y estudiantes), debería tener la mayor usabilidad posible, con claridad y facilidad de uso, ya que tiene que dar su servicio al mayor número de personas. No olvidemos que la sociedad madrileña es heterogénea. En la ciudad viven personas de diferentes puntos de España, con múltiples nacionalidades y personas con diversas funcionalidades. Una web de este ámbito debería tener accesibilidad para todos, un lenguaje claro y sobre todo información comprensible y útil para los usuarios.

Con este ensayo se trata de hacer un recorrido por la web de Educación de la Comunidad de Madrid, para aplicar los principios básicos de usabilidad de Jacob Nielsen y valorar si cumple o no con sus heurísticas, las cuales son:

  1. Mostrar el estado del sistema
  2. Hablar el lenguaje del usuario
  3. Control y libertad del usuario
  4. Consistencia y estándares
  5. Prevenir errores
  6. Aliviar la carga en la memoria del usuario
  7. Atajos, flexibilidad, eficiencia
  8. Estética y minimalismo
  9. Comunicar los errores con claridad
  10. Ayuda y documentación

En función de esta escala, el ranking de severidad, se analizará la usabilidad en relación con las heurísticas, siendo 0 ningún problema y 4 una catástrofe de uso.

¿Responsive Design?

Nada más comenzar, es necesario decir que el primer déficit que se halla es que la web a través del móvil no funciona muy bien, es decir, no tiene un diseño responsive. Es necesario disponer de un ordenador para hacer los trámites, y muchas personas no disponen de un pc para realizar dichas tareas. Una web al servicio del ciudadano, debería adaptar su uso a cualquier dispositivo.

Dado que estamos en confinamiento, aquí hay una primera barrera que dificulta el acceso a muchas personas.

Vivimos en una sociedad en la que la gran mayoría tiene un smartphone, y a la hora de diseñar los productos digitales de la Administración, se debería tener muy en cuenta. Este punto se puede clasificar como catástrofe, obteniendo un 4 en el ranking.

Home de la Comunidad de Madrid

La página de inicio de la Comunidad de Madrid sencillamente parece un conglomerado de cosas que han ido cayendo allí por azar. No hay ningún tipo de coherencia interna y da la sensación de que la página se haya diseñado por partes.

Página Principal de la Comunidad de Madrid URL: https://www.comunidad.madrid/

Ni jerarquías, ni colores, ni tamaños, ni formas, ni alineaciones. El diseño está hecho con grid, pero algunos elementos no se han ajustado bien a la misma. Da una sensación total de caos alejándose del minimalismo y la estética. La carga cognitiva para el usuario es muy superior a lo deseable.

Hay “botones” que son literalmente cuadrados de gran tamaño, que además están duplicados, como el de 112, que aparece hasta 4 veces, pudiendo haberse unificado en uno solo. Otros sí que tienen apariencia de botón, pero no tienen coherencia entre sí y no siguen un estándar que guíe al usuario en su navegación.

Sería necesario homogeneizar la web, tanto en estética, colores, uso de iconos y botones, como de estructura, para facilitar la comprensión del conjunto. Todos estos problemas obtienen un 3 en el ranking de usabilidad.

Se podría decir que sí habla el lenguaje del usuario, pero pese a utilizar un lenguaje sencillo, no deja claros los contenidos. Por ejemplo: “haz tu propia evaluación del COVID-19”. ¿Qué espera el sistema que hagas?, ¿un análisis crítico de la situación?, ¿qué hagas tu propia prueba RCP? Aunque no utilice un lenguaje academicista, no se entiende de primeras la información que vas a encontrar en cada apartado. Hay tantos elementos en el cuerpo que el usuario irremediablemente se pierde. El footer es mucho más grande que el hero y da tantas opciones de búsqueda, que sobrecarga al usuario y limita su poder de decisión. Puntúa con un 2 en usabilidad.

Básicamente se incumplen todas las heurísticas en la página principal de la Comunidad. El usuario siente que pierde el control de lo que está haciendo, no sabe dónde acudir para buscar la información deseada, no hay eficiencia ni flexibilidad en la navegación así como tampoco se entienden bien los pasos a seguir.

Card de acceso a Educación

Al abrir la web de la Comunidad de Madrid, haciendo scroll vertical, se encuentra el apartado de Educación, que es la web informativa objeto de estudio en este Medium.

Se entiende que el botón se corresponde con el título por la card que lo encuadra, ya que la distancia entre texto y botón es excesiva en cuanto a las leyes de la Gestalt. Si no existiera ese frame, sería muy difícil identificar que van unidos.

Para mí es un 1 en usabilidad, ya que es un problema fundamentalmente estético. Sigue el Principio de regiones comunes y mantiene la misma estructura que el resto de cards, pero los botones se podrían haber diseñado con un menor espacio de aire entre ellos.

Una vez pulsas el botón acceder, te redirige a la página de solicitud de admisión en Educación infantil, Obligatoria y Bachillerato. Ni siquiera te lleva a la página correcta de Educación, sino directamente a las de admisiones. Habría que corregir el copy del título “Educación”, ya que la descripción dentro de la card sí especifica que te envía a la sección “admisiones”, pero genera confusión.

URL: https://www.comunidad.madrid/servicios/educacion/solicita-tu-admision-educacion-infantil-obligatoria-bachillerato

Para llegar a la página de Educación se debe utilizar el menú local, que te indica que la página está en paso anterior. Es como si se volviera para atrás, pero sin haber pasado en ningún momento por allí.

Desde la Home, la forma de acceder a la sección general de Educación es a través del menú principal Servicios e información”, pero aquí muestra un hero con altura excesiva teniendo que hacer scroll para acceder a la información, el buscador no ofrece recomendaciones de búsqueda y el menú de “Servicios e Información” pierde consistencia. Resulta dificultoso para el usuario entender el recorrido que debe realizar.

Definitivamente el mapa de sitio está mal diseñado. Esto es un problema grave que puntúa con un 4. No cumple con varias heurísticas, como que no muestra el punto en el el que el usuario se halla dentro del sistema, pierde el control de lo que está haciendo, no puede realizar las tareas ni con eficiencia ni con libertad, y no comunica los errores con claridad.

Menú local

La persona al otro lado de la pantalla definitivamente se pierde. Llegados a este punto, seguro que más de una habrá optado por ir a su buscador habitual y teclear “Madrid Educación” para encontrar la página correcta. Desde la principal de la Comunidad es difícil.

Página de Educación

Tras todos los pasos anteriores, por fin se consigue llegar a la página buscada: la página de Educación de la Comunidad de Madrid, y aparece lo siguiente:

Hero de la página de Educación de la Comunidad de Madrid. URL: https://www.comunidad.madrid/servicios/educacion

Se observa algo más de coherencia estética que en la home. Es necesario decir que el sistema sí informa en qué parte de la navegación se encuentra el usuario, los botones muestran el estado hover cuando se pasa el ratón por encima y el cursor cambia a ser una mano cuando un elemento el clicable. Esto cumple con las heurísticas y no es un error de usabilidad, obteniendo un 0 en el ranking.

Se sigue teniendo el menú sticky de la página de la Comunidad con su buscador, pero en el hero se encuentra un buscador nuevo, que además está localizado en mitad de la imagen, cosa que no suele ser habitual en el entorno digital. Parece que el objetivo es darle importancia al buscador, sin embargo, para que sea realmente útil, debería dar recomendaciones de búsqueda pertinentes. Claramente, si toma tanta importancia un elemento, debería estar diseñado para que cumpla su función con eficacia.

El buscador no da opciones relevantes de búsqueda, como se ve en el ejemplo:

No guía al usuario con búsquedas predeterminadas. Lo lógico sería que añadiera a la palabra “educación” opciones como “infantil”, “universitaria”, “de idiomas”, etc. Pero en cambio añade puntos, comas, y números, que se presupone que son el número de veces que aparecen en las páginas del sitio. Realmente no se sabe a qué se refieren dichos números ni qué utilidad pueden tener para el usuario. Además el icono lupa que aparece en el buscador tiene una falsa affordance, pues no es clicable. Incumple la heurística número 7 y se le puede aplicar un 2 en en el ranking de severidad.

Debajo del hero aparecen estos dos iconos RSS feeds, que permiten indexar el contenido que se va actualizando en la web. El problema con introducirlos en esta posición tan relevante es que llaman mucho la atención del usuario, que si no los reconoce, no entenderá su función ni sabrá cómo usarlos. Por otro lado, los iconos RSS habitualmente se diseñan en el color semántico naranja. Al clicarlos llevan automáticamente a una página como esta:

URL: https://www.comunidad.madrid/latest-content/19268/rss.xml

El usuario, después de ver esto, puede pensar directamente que su ordenador ha sufrido algún daño o que se ha metido donde no debía. Este me parece un error especialmente grave, pues además el sistema no da la opción de volver al punto anterior ni explica lo que está pasando. Dentro del ranking de severidad puntúa con un 4 y atenta contra las heurísticas 5, 910.

Los temas de interés no siguen una buena arquitectura de la información. Lo normal sería que la información estuviera ordenada por etapas siguiendo el esquema mental que todos tenemos de la Educación: Infantil, Primaria, Secundaria, Formación Profesional, Universidades,… Pero aquí la encontramos sin organizar. Se salta la heurística de consistencia y estándares con un 2 en severidad.

Al continuar scroleando verticalmente se encuentra lo siguiente:

El título da la sensación que todos los siguientes campos están relacionados con los profesionales de la Educación, pero realmente no es así. El texto en rojo es un enlace al espacio para profesionales, pero el resto de categorías tienen contenidos para alumnos. Además la imagen de “solicita tu admisión para el curso 2020/2021” tiene un botón insertado dentro, pero el resto de categorías funcionan como botones en sí mismos. El mal posicionamiento de la información hace que se pierda la homogeneidad y la consistencia en las acciones que tiene que realizar el usuario y este pierde el control. No sirve como ayuda, sino justo lo contrario. Si el usuario es un alumno, y piensa que este apartado es para docentes, directamente no va a clicar en los botones. Tiene una puntuación de 3 en el ranking de severidad.

Footer solapado con el menú sticky

De nuevo el footer es más grande que el header. Debido a que usa el mismo color y el tamaño elegidos, se solapa con el menú sticky, dando lugar a que no se entienda cuál es cuál. Va en contra las heurísticas 6 y 8. Puntúa con un 1 en el ranking de severidad.

Análisis heurístico URL: https://www.comunidad.madrid/servicios/educacion

Análisis en formato tabla

A continuación se presenta el análisis heurístico en formato tabla. Aquí se añade una columna, que es la facilidad de ajuste del error en puntuación de 1 a 3, siendo 1 la solución fácil, 2 difícil y 3 muy difícil.

En general, es una página con muchas posibilidades de iteración. Siguiendo la guía de buenas prácticas que ha dejado Jacob Nielsen, se podrían reducir muchas de las frustraciones que experimenta el usuario al acceder a la web de Educación.

En este momento, cuando estamos inmersos en los periodos de matriculación de escuelas, institutos y universidades, todos ellos cerrados debido a la pandemia, es precisamente el momento en que las herramientas online deberían tener la máxima usabilidad, ser más accesibles que nunca y que dispongan de un feedback constante con el usuario. Se hace especialmente necesario que la web sea responsive, para que se pueda acceder a la misma desde cualquier dispositivo.

También es probable que los picos de tráfico, que ralentizan el rendimiento que recibe la aplicación al inicio y final de cualquier trámite, sean consecuencia de una mala performance de la aplicación y sería necesario ahondar en estos motivos en el futuro.

Es necesario que se revise el diseño de esta página para hacerla más funcional y accesible por el bien de los usuarios: alumnos, padres, madres y docentes.

Gracias por vuestro tiempo.


Análisis heurístico de la página web de Educación de la Comunidad de Madrid was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.