Looking For Fashion?




Análisis de la web de la UAM


Como muchos ya sabréis, soy psicóloga (sí, lo sabéis porque soy una pesada). Y estudié en la Universidad Autónoma de Madrid.

Os podría decir infinitas cosas que recuerdo con mucho cariño de allí: las ganas de enseñar de muchos profesores, la cantidad de libros interesantes de la biblioteca, las asociaciones que existen comprometidas por mejorar la calidad del alumnado, las sonrisas del personal de cafetería (os prometo que son de lo mejorcito que me he encontrado en la vida), etc.

Photo by Headway on Unsplash
Tienen el título de una de las mejores Universidades de Madrid bien ganado, las cosas como son.

Sin embargo, hay una cosa que todavía me persigue en sueños por las noches: su página web. Creo que jamás he sido capaz de encontrar algo que buscaba allí, y os prometo que, en ocasiones, le puse muchísismo empeño.

Por lo general, solemos pensar que aquellas cosas que se hacen en las universidades suelen estar bien hechas, debido a que hay grandes expertos en distintas materias trabajando allí.

Sin embargo, como bien dice el refrán “en casa del herrero, cuchillo de palo”.

Por ello me dispongo a analizar la página web de la Universidad Autónoma de Madrid, siguiendo un análisis heurístico y el método PURE.

Y por fin podré dormir tranquila.

Análisis heurístico

Un análisis heurístico se trata de una prueba de experto que se basa en aplicar principios de diseño para ver aquellos fallos que se están cometiendo y que perjudican a la experiencia de usuario.

Para hacer un análisis más exhaustivo he desarrollado una tabla de airtable.

Voy a desglosar los fallos dependiendo de distintas categorías:

Generales

Vamos a echarle un primer vistazo 

G-01: La página web no tiene una URL segura. El usuario se puede sentirse confuso debido a que se encuentra en la página de una institución pública y no rellenar distintos datos básicos. Es recomendable hacer que se trate de una URL segura como https://. También hay que tener en cuenta que esto penaliza para temas de SEO.

G-02: URLs que no son claras. En la página emplean URLs muy largas, con números aleatorios que no se recuerdan bien. Se recomienda, tanto por temas de experiencia de usuario como por temas de SEO el empleo de URLs más cortas y fáciles de recordar.

Por ejemplo, http://www.uam.es/UAM/Personal-y-estudiantes/1233310431942.htm?language=es&nodepath=Soy%20de%20la%20UAM&pid=1233310431942. Da miedo solo de ver la URL, ¿verdad?

G-03: Sobrecarga de la página principal. La página principal esta muy llena de elementos que hacen que el usuario se sienta un poco perdido y no se ve de un modo claro el camino que debe de seguir en la navegación.

G-04: Fallos de consistencia: Existen claros fallos de consistencia en general, hasta el punto que pueden llegar a parecer dos páginas completamente distintas y se podría mejorar estableciendo unas pautas estéticas o style guides. Hago hincapié en este punto porque evita que haya un aprendizaje de la página haciendo aún más difícil la navegación.

A la izquierda la página principal y a la derecha el subapartado de la OAE.

G-05: Información desactualizada: Existe información desactualizada desde hace más de 5 años. Sería recomendable actualizar la página al menos cada año para no dar información errónea o atrasada a los usuarios.

G-06: Iconos de redes sociales desactualizados: No se entienden bien y además se ven pixelados por lo que dificulta tanto la legibilidad como la comprensión de estos.

Reconocer el icono de twitter cuesta, allá por el 2011…

G-07: Carga lenta de la página debido al empleo de formatos png y gif. Aumenta el tiempo de carga, además al usar iconos en fotmato png se pixelan y disminuye su legibilidad. Lo más efectivo es emplear formatos que pesen menos, como es el formato jpg y, para los iconos y logotipos, es recomendable usar el formato svg para evitar que se pixele la imagen.

Nunca fui capaz de saber que pone encima de excelencia

Identidad e Información

Hazte tu propia identidad

I-01: Logotipo y favicon. El logotipo es bastante complejo al escribir el nombre de la universidad al lado y, además, al usar el formato PNG, el logotipo se pixela y dificulta la legibilidad. Además, no existe consistencia entre el favicon y el logotipo. Simplificarlo y cambiar a un formato SVG o aumentar la calidad de la imagen ajustándose al tamaño retina.

I-02: Eslogan o tagline. No existe ningún eslogan o tagline que permita entender rápidamente a que se dedica la empresa y facilitar al usuario la navegación. Sería recomendable crear uno para ayudar al usuario a situarse

Lenguaje y Redacción

Como dice Prodigioso Volcán “Todo el mundo tiene derecho a entender, por ello, el modo de transmitirlo importa”

L-01: Lenguaje con tecnicismos: Se emplea un lenguaje bastante técnico que no permite la comprensión clara de los textos ni de las ideas clave. Sería recomendable emplear un lenguaje más claro, simple y conciso para permitir llegar a más usuarios.

L-02: Lenguaje impersonal: El lenguaje, a parte de ser bastante técnico, tiene por lo general un tono impersonal. Teniendo en cuenta que la mayor parte de sus usuarios son personas jóvenes sería muy interesante adaptar el lenguaje a los usuarios con un tono más juvenil.

L-03: Página de error. Como se muestra en la imagen, emplean el color verde para comunicar el error. Este color no se suele asociar a los errores por lo que se puede llegar a considerar confuso. Asimismo, se emplea un lenguaje muy formal. Sería necesario crear una página de error más clara y que permita al usuario reconducir la navegación. También sería recomendable que la página de error ayudase a rebajar el nivel de frustración.

Rotulado

Hagamos un esquema visual para poder entender un poco mejor las jerarquías y ayudar a la búsqueda de información.

R-01: No se emplea un sistema único de rotulado. Esto hace que la página pierda consistencia visual y evita el aprendizaje de los usuarios por lo que dificulta la navegación. Es importante seguir una guía de estilos para ayudar a los usuarios a entender la página web.

Estructura y Navegación

A veces navegamos con el viento, a veces en contra, pero debemos navegar, no estar a la deriva, ni echar el ancla.
- Oliver Wendell Holmes

N-01: Menú de navegación muy extenso. Como se muestra en la imagen, la página esta muy cargada de contenido. Entendiendo que, según Miller, la memoria de trabajo puede almacenar más o menos 7 elementos de información, todo aquello que sobrepase este número de elementos supone un exceso de carga cognitiva. Asimismo, tanta información supone que el usuario se sienta con falta de control y libertad, debido a que no sea capaz de encontrar lo que esté buscando.

Esto se podría solucionar apostando por una estética más minimalista. En las páginas que hay mucha información, una solución plausible puede ser contar con menús que, como las Matrioshkas, albergan funcionalidades en su interior para que el usuario pueda filtrar el exceso de información que no le interesa.

N-02: Formas de indicar la precarga. Primero, no cuenta ni con spinners ni ningún otro elemento que muestre que se está cargando, por lo que el usuario se puede llegar a sentir un poco perdido. Como bien es sabido, el conocimiento es poder, y en una página que da poco feedback, se genera poca sensación de control. Si el usuario tiene más información, tiene una mejor experiencia y puede tomar mejores decisiones.

N-03: Guías de navegación. Si bien es cierto que se emplean breadcrumbs, éstos son poco intuitivos debido a la gran cantidad de subpestañas que tiene la página que satura la carga cognitiva. E incluso, en ocasiones, se tratan de enlaces que te redirigen a otra página con una estética totalmente distinta. En ningún momento se informa de que te han redirigido a una página distinta.

N-04: No siempre el logotipo sirve como enlace para volver a la home. Por un lado, se dificulta la navegación al no tener atajos que faciliten y la hagan más fluida, y por otro, impide que los usuarios aprendan la clave para poder volver con facilidad.

N-05: Enlaces. No existe una distinción clara entre los distintos tipos de enlaces (cambiar a una página totalmente distinta o seguir en la misma página), e incluso en algunas ocasiones pasan desapercibidos.

N-06: La mayoría de los enlaces se abren en una pestaña nueva: Aún siendo enlaces dentro de la propia web y no externos. Esto hace más difícil tanto la navegación como poder volver para atrás, reduciendo así la eficiencia de los usuarios.

N-07: Mucha de la información se encuentra en un PDF que te tienes que descargar. Al tener que descargarte elementos hace que la búsqueda se vuelva más tediosa, aumentando la latencia de encontrar la información necesaria y reduciendo la eficacia de los usuarios. Lo más recomendable es que toda la información se encuentre dentro de la página web.

Búsqueda

Quién busca, encuentra.

B-01: Buscador no autocompleta. El buscador no ayuda a completar las palabras por lo que no ayuda ni a prevenir errores ni ayuda al usuario como un atajo de uso.

B-02: Legibilidad del buscador: El buscador tiene un icono pixelado debido al formato que se emplea y usa un tamaño de fuente de 11px y el color no tiene contraste suficiente para permitir una buena legibilidad.

Ayuda

I’ll send an SOS to the world I hope that someone gets my message in a bottle
- The Police

Ay-01: Elementos de ayuda al usuario. En ningún momento se emplean recursos como son los onboarding, wizards, tootips, etc. que puedan llegar a guiar a los usuarios por la página. Sería recomendable usar algún tipo de guía par los usuarios.

Ay-02: Preguntas frecuentes. En la mayoría de sus secciones, por no decir todas, no presenta un apartado de preguntas frecuentes. Este tipo de apartados se tratan de una buena práctica a la hora de guiar la navegación de los usuarios y como clave heurística para solucionar los problemas o dudas que puedan llegar a tener.

Accesibilidad

Una web inclusiva, porque la accesibilidad importa, y mucho.

Ac-01: Tamaño de la tipografía. Como se enseña en la imagen, inspeccionando los textos y las tipografías podemos observar que la mayoría del tamaño de fuente es de 12 px, lo cual dificulta la legibilidad de los textos de la página. Lo recomendable es emplear un tamaño de 16 px o superior.

Ac-02: Tamaño del interlineado. El interlineado es bastante reducido, lo que dificulta aún más la lectura y da la sensación de que está sobrecargado.

Ac-03: Empleo del color. La página emplea colores con bajo contraste lo cual dificulta la legibilidad. Empleando tamaños de letra más grandes, un mayor interlineado y colores de tipografía con mayor contraste se solucionaría este problema y, además, daría mayor sensación de limpieza.

Método PURE

El método PURE (Pragmatic Usability Rating by Experts) se trata de un método establecido por Nielsen y Norman que sirve para medir la usabilidad de un producto digital de un modo muy visual, fácil y eficaz.

Se trata de un análisis de experto, por la cuál los expertos dan una valoración acerca de la facilidad de uso desglosando una tarea en pasos y estableciendo una puntuación de 1 al 3:

  1. Baja carga cognitiva.
  2. Grado notable de carga cognitiva.
  3. Gran dificultad para el usuario.

Tras terminar de evaluar la tarea en sus distintos pasos, se suma la puntuación total. Esta puntuación nos sirve para poder comparar entre páginas web similares y para poder observar la mejora tras una iteración de nuestro propio producto digital.

Para hacer más llevadero este análisis y empatizar mejor con los usuarios, he desarrollado este vídeo:

Tareas a desarrollar

En el ejemplo que se muestra en el vídeo, existen dos tareas a desarrollar:

Tarea 1: Encontrar cómo se convalida una asignatura.

Tarea 2: Encontrar una asociación de estudiantes.

Finalmente, sumamos las puntuaciones de ambas tareas para que nos de una cifra concreta y obtenemos la puntuación total del método PURE.

En conclusión…

Es necesario revisar la página de la UAM para mejorar la experiencia de usuario y una mejor navegación.

Sin duda, no es fácil sintetizar tanta información en una sola página por lo que es muy importante trabajar la arquitectura de información de la página web.

Los puntos más débiles son el exceso de carga cognitiva y la consistencia visual. Es necesario revisar, en general, toda la página para hacerla más minimalista y establecer unas guías visuales que permitan que el usuario no se sienta perdido.

Una de las razones principales por las que es importante tener en cuenta estas recomendaciones es por el sesgo de negatividad. Este sesgo es la razón por la cuál, por norma general, le damos más importancia a aquellos aspectos de la web que nos generan emociones negativas. Por ello, aunque nuestra página web esté muy bien desarrollada, alguna experiencia negativa o de frustración que tengan los usuarios puede llegar a pasarnos factura.

Por mi parte, se podría hacer un análisis más exhaustivo de las heurísticas y desarrollar el método PURE con otras tareas para ver aquellas en las que se cometen más fallos y poder solucionarlo.

Simplemente es un pequeño aperitivo de un gran trabajo que queda por delante.

Gracias por leerlo entero ️


Análisis de la web de la UAM was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.