E-JOVENTUT – ANÁLISIS HEURÍSTICO

En este post se encuentra una explicación de como realizar un análisis heurístico. Veremos como hacer paso a paso un análisis siguiendo un listado de heurísticas para posteriormente recoger los datos analizados y destacar los errores y las posibles mejoras.

E-Joventut es una página de la generalitat de Catalunya que intenta dar acceso a recursos para los profesionales que trabajan con jóvenes. Su diseño necesita ser renovado y es por eso que me ha parecido interesante realizar un análisis heurístico. De esta manera podremos comprobar los aspectos mejorables que tiene el diseño actual.

Preparamos las heurísticas

El análisis heurístico viene dado por una checklist de heurísticas que el evaluador debe seleccionar para poder realizar el análisis. En este caso utilizaremos los 10 principios de Nielsen.

1. Visibilidad del estado del sistema.
2. Adecuación entre el sistema y el mundo real.
3. Libertad y control por parte de la persona usuaria.
4. Consistencia y estándares.
5. Prevención de errores.
6. Reconocimiento antes que recuerdo.
7. Flexibilidad y eficiencia en el uso.
8. Diseño estético y minimalista.
9. Ayuda a las personas usuarias a reconocer y diagnosticar los errores y a recuperarse.
10. Ayuda y documentación.

Conocemos la web

Para llegar hasta aquí he hecho un recorrido de diversas páginas web hasta encontrar E-Joventut, una página con un diseño que nos puede ayudar a entender como hacer un análisis heurístico.

El primer paso es observar la web y experimentar con la arquitectura.

Observamos que la página web trata de acercar los recursos a profesionales que trabajan con jóvenes. Para hacerlo tienen un buscador por palabras claves y a parte 3 tipos de clasificación de estos recursos: por ámbitos, por tipo de recursos y por territorios. Además, dentro de cada tipo puede haber subclassificaciones.

También encontramos, una agenda con actividades, boletines, actualidad y redes sociales y un mail de contacto para cada territorio.

Acto seguido podemos comenzar a analizar las heutísticas una por una.

Heurísticas

Visibilidad del estado del sistema 

Este principio trata de hacer entender al usuario en que punto se encuentra. El diseño debe de ayudar al usuario a saber si, por ejemplo, está descargando un archivo.

La página web que estamos analizando, tiene una arquitectura amplia y utiliza muchos apartados y secciones. Con la utilización de breadcrumps, el diseño indica al usuario en que sección se encuentra en todo momento. Además, también hace que todo los apartados que te redireccionan o abren una pestaña, sean identificables utilizando el color corporativo, en este caso el rojo, y mediante un subrayado de la palabra. Es por lo tanto, un buen uso del principio.

En la imagen podemos ver como esta sección se encuentra en E-Joventut (inicio) y dentro del apartado de nivel 2 llamado Sobre E-Joventut.

No se visualiza ningún ejemplo de mal uso, ya que no hay ningún elemento que utilice este recurso a parte de los breadcrumps.

Adecuación entre el sistema y el mundo real

Como ejemplo de este principio, encontramos una imagen con la @ en el apartado de contacta. Se considera un buen ejemplo del principio porque se relaciona con facilidad el icono con los correos electrónicos.

 

Libertad y control por parte de la persona usuaria

Teniendo en cuenta que este principio está pensado para que el diseño permita al usuario confirmar una acción antes de realizarla para evitar errores, o tener el control sobre filtros que haya seleccionado al realizar una búsqueda, etc., no he encontrado ningún ejemplo.

No obstante, se podrían aplicar elementos que ayudarían al usuario a tener más control, como podría ser un buscador en el que puedas aplicar filtros que estén visibles en todo momento y deseleccionarlos o eliminarlos cuando convenga.

Consistencia y estándares

Como buen uso de este principio encontramos la agenda, ya que es un elemento que se parece a un calendario físico y que, además, se utiliza un diseño parecido en la mayoría de páginas web o aplicaciones móviles. Se utiliza este estándar para que los usuarios tengan una interacción más fácil al ya conocer el elemento.

Como ejemplo de mal uso de este principio, destacaría el menú. Actualmente, la mayoría de páginas tienen un menú en la parte superior de la página web y los usuarios lo relacionan como tal. Al poner el menú en la parte izquierda, el usuario tarda en encontrarlo y e definir que este elemento es el menú. Además, las páginas de nivel uno como serían «Sobre E-Joventut» i «Recursos», no se identifican como tales.

 

Prevención de errores

Los placeholders hacen la función de ayudar a los usuarios a saber que tienen que poner en un recuadro de texto. En este caso, se utilizan para que el usuario sepa como debe escribir la fecha con la que quiere hacer la búsqueda. Es un ejemplo de buen uso de este principio que busca evitar los errores de los usuarios.

 

Como ejemplo de mal uso del principio me dirijo a la página de contactos. En esta página podemos seleccionar el mail y se abre directamente la aplicación de gmail para enviar un correo. Personalmente lo veo como un error de diseño, ya que podría darle sin querer mientras navego por la página y tener que estar cerrando la ventana del gmail cada vez que tenga un missclick.

Podría ser una buena idea para hacer que el usuario acceda más rápido, pero en este caso me parece un mal ejemplo de este principio. No genera el control buscado y da paso a errores.

Reconocimiento antes que recuerdo

Este principio se basa en poder detectar en que sección estás, que acción has realizado o estás realizando en el momento. En E-Joventut, se hace un buen uso de este principio al destacar de color rojo la sección en la que te encuentras. De esta manera, los usuarios no tendrán que recordar en que apartado están, solo con mirar la menú o los breadcrumps lo sabrán.

Por otro lado, encontramos un ejemplo de mal uso en el buscador por criterios. En ningún momento el diseño te indica que puedes seleccionar solo un criterio para empezar la búsqueda, de hecho da a entender que debes seleccionar un criterio de todos los desplegables. Es un mal uso porque cada vez que un usuario quiera buscar un criterio, perderá tiempo si no recuerda que solo con un elemento seleccionado ya puede realizar la búsqueda.

Flexibilidad y eficiencia en el uso

Como ejemplo de mal uso, el buscador podría potenciarse y ponerse en la página de inicio con más importancia. Haría que la navegación fuera más rápida y se encontraran los recursos de una manera más sencilla.  Actualmente están clasificados de diferentes manera y encuentras en el menú diferentes secciones con las que puedes llegar al mismo recurso, pero todo esto sin ser filtros como tal.

Diseño estético y minimalista

Esta página, en general, no tiene un diseño estético y minimalista. No obstante, podría destacarse la página de la agenda. En esta página encontramos la agenda como elemento destacado y las opciones de búsqueda de las actividades. En un segundo plano vemos los resultados. Dentro de lo que es el diseño de esta web, podría identificarse como un buen uso del principio.

Como mal uso destacaría toda la página web en general. De todas maneras, destaco la página de inicio. En esta página, vemos como no hay ningún elemento que destaque por encima del otro. Todos los elementos tienen el mismo tamaño de tipografía, no hay jerarquía de elementos, y hay mucha información disponible y desordenada. Es un claro ejemplo de mal uso de este principio, que busca un diseño estético y minimalista.

 

 

Ayuda a las personas usuarias a reconocer y diagnosticar los errores y a recuperarse

El único ejemplo de este principio sería de buen uso. Aparece un mensaje cuando escribes una palabra clave en el buscador y no hay ningún resultado que corresponda con esa palabra. Ayuda a los usuarios a saber porque no aparece ningún recurso y le invita a probar con otra palabra.

Ayuda y documentación

En esta web no hay ningún elemento que te proporcione ayuda adicional. Podría venir bien un icono de información para ayudarte a utilizar el buscador de recursos aplicando una breve descripción de su uso.

Propuestas de mejora

Hecho el análisis heurístico de la página web, explicaré posibles mejoras destacando los errores más graves detectados.

El error más grave a mi parecer, es el de no seguir el principio de diseño estético y minimalista. En general, la página web no utiliza jerarquías en sus tipografías y no destaca los elementos. Seguir estás indicaciones y estos principios básicos del diseño web, ayudarían a mejorar la página web con creces y que el usuario tuviera una buena impresión nada más entrar. Actualmente, da la impresión de diseño antiguo y no invita a navegar por la web.

Seguidamente, destacaría el hecho de no incluir un menú acorde con los estándares actuales. Haría un menú como el que tiene ahora Gencat. Es un menú claro y que ayuda al usuario a visualizar los niveles de jerarquía de la web. Se podrían destacar elementos en un primer nivel y seleccionar una única manera de llegar a los recursos.

Por último, pondría el buscador de recursos en la página de inicio. Un buscador potente que realmente ayudara a los usuarios a buscar los recursos de una manera más rápida y eficaz. Actualmente el buscador es lioso, no es sencillo y no tiene un diseño agradable.

Conclusión

Como conclusión final, esta página web necesita ser rediseñada y aplicar las mejoras teniendo más en cuenta los principios de Nielsen. No obstante, hay principios que no veo que puedan aplicarse por el objetivo principal de la página en sí.