Hola a tod@s! Aquí os dejo los ejemplos que he utilizado para mis informes sobre los principios y leyes de percepción en la usabilidad de una interfaz.

EVALUACIÓN HEURÍSTICA, PLAN DE TEST Y CARD SORTING

Constantemente entramos en contacto con interfaces, ya sean webs aplicaciones o portales, que no nos ofrecen la mejor experiencia posible durante su uso. Nuestro papel como diseñador consiste en mantener una mirada crítica en el uso de estas interfaces para reconocer los diferentes problemas.

La evaluación heurística es una técnica que se inscribe, dentro de un proceso de diseño centrado en el usuario, en la fase de evaluación; y se puede llevar a cabo durante todo el proceso de diseño. Esto permitirá identificar y corregir aspectos de usabilidad antes de desarrollarlo completamente y diagnosticar elementos de usabilidad que no eran visibles en etapas previas.

En este post evaluaremos una interfaz gráfica según el listado de evaluación heurística de Jakob Nielsen, identificando y justificando el buen o mal uso de cada una de ellas, para clasificarlos y aportar alguna propuesta de solución.

La interfaz en cuestión se trata del “Área Privada” de la Intranet de “Empresarios Agrupados”, la cual es utilizada diariamente (y más de 10 veces al día) por todos y cada uno de sus empleados. Como comprobaremos un poco más adelante, este portal web no ofrece una buena experiencia a las personas usuarias, que tienen que utilizarla de manera muy recurrente.

En primer lugar, evaluaremos una por una cada una de las heurísticas de Nielsen, y juzgaremos y justificaremos si se está haciendo un buen o mal uso de ellas. Después, valoraremos los hallazgos más graves y realizaremos un ranking de ellos teniendo en cuenta parámetros como la frecuencia con la que ocurre el problema, el impacto y la persistencia. Además, se realizará un análisis de estos resultados para realizar la propuesta de soluciones factibles. Por último, se llevará a cabo una justificación acerca de la evaluación de la perspectiva de género e inclusión de la interfaz.

Evaluación de las heurísticas de Nielsen

1. Visibilidad del estado del sistema

El sistema siempre debe mantener informados a los usuarios sobre lo que está sucediendo, a través de comentarios apropiados dentro de un tiempo razonable. En este caso en concreto se lleva a cabo una buena práctica, ya que el sistema te devuelve feedback sobre si estás conectado con tu usuario o no.

2. Relación entre el sistema y el mundo real

El sistema debe hablar el idioma de los usuarios, con palabras, frases y conceptos familiares para el usuario también haciendo que la información aparezca en un orden natural y lógico. Creo que en el ejemplo que podemos ver a continuación se lleva a cabo esta práctica de concordancia con el mundo real y, sin embargo, creo que de una manera completamente errónea.

Para la identificación de los distintos apartados o secciones se ha elegido algo tan real que… ¡es una foto! Desde luego que se podrían haber elegido otro tipo de iconos mucho más minimalistas y representativos.

3. Libertad y control por parte del usuario

Los usuarios siempre van a comenten errores y necesitarán una “salida de emergencia” claramente marcada, apoyando las funciones de deshacer y rehacer. En el ejemplo que vemos a continuación, el usuario encuentra una salida si quiere salir del proceso de edición de documento que está bien señalizada.

4. Consistencia y estándares

Los usuarios no deberían cuestionarse si acciones, situaciones o palabras diferentes significan en realidad la misma cosa; siga las convenciones establecidas.

En este caso en concreto se ha identificado una inconsistencia de flujo ya que una vez estás en el área privada de empleado y te encuentras frente a la imagen que puedes ver más abajo, cualquiera de las opciones te lleva a una home, donde tienes que volver a encontrar la herramienta que buscabas para entrar en ella específicamente.

Es decir, cliques donde cliques, la siguiente pantalla que tendrás delante de tus ojos será de nuevo… ¡esta!

5. Prevención de errores

Es tan importante tanto el buen diseño de mensajes de error como realizar un diseño cuidadoso que prevenga la ocurrencia de problemas.

Cuando pasa un tiempo límite sin conectarte, la web directamente se desconecta de tu usuario. Esta es una forma de prevención de posibles riesgos y errores de las personas usuarias.

6. Reconocimiento antes que recuerdo

Se deben hacer visibles los objetos, acciones y opciones, el usuario no tendría que recordar la información que se le da en una parte del proceso, para seguir adelante.

Obviando la parte de la estética, en el siguiente ejemplo se muestra en todo el proceso al usuario los campos obligatorios y los datos a introducir. Salvando las distancias de que esto sea un buen diseño, creo que podemos encontrar una buena práctica dentro de él.

7. Flexibilidad y eficiencia de uso

Se debe permitir que los usuarios se adapten al sistema para usos frecuentes. La arquitectura de la información, la clasificación y la estructuración en general de los contenidos de la web es tan deficiente que el usuario tiene que recorrer con su mirada todas y cada una de las opciones cada vez que entra en el sitio, ya que le resulta muy difícil recordar dónde se encontraba cada cosa (no me juzgues… ¡experiméntalo tu mismo!)

8. Estética y diseño minimalista

Los diálogos no deben contener información que es irrelevante o poco usada y que disminuye su visibilidad relativa. Para la evaluación de esta heurística, retomamos el ejemplo utilizado en el punto 2 (o cualquiera de todos los anteriores). La estética del sitio web no centra tu atención ni pone el foco en los aspectos importante, distrayéndote y no dejándote formar un mapa mental apropiado en la cabeza. El uso de imágenes sin estilo visual ni cromático definido, que en ocasiones incluso se pixela, hace que la experiencia de uso resulte incómoda al usuario.

Creo que alguien no sabe nada de iconos ni del mundo vectorial…

9. Ayudar a los usuarios a reconocer

Diagnosticar y recuperarse de errores: los mensajes de error se deben entregar en un lenguaje claro y simple, indicando en forma precisa el problema y sugerir una solución constructiva al problema.

Recuperando lo que comentábamos en el apartado 5 de la prevención de errores, teniendo en cuenta que la práctica de la que hablábamos es buena, el mensaje que recibe el usuario es realmente escaso y poco explícito. Solamente nos encontramos en la esquina superior izquierda un mensaje de error que ni siquiera se comunica en lenguaje completamente humano. Tanto la posición, como el tamaño de la fuente como la redacción del mensaje hacen que la comunicación entre el sistema y el usuario sea deficiente.

10. Ayuda y documentación

La información debería ser fácil de buscar, estar enfocada en las tareas del usuario, con una lista concreta de pasos a desarrollar y no ser demasiado extensa. En el ejemplo que venimos evaluando no existe un apartado dedicado a que el usuario pueda consultar dudas con respecto al sistema o ayuda de algún tipo (¡y mira que, visto lo visto, la necesitamos…!).

Top 3 “los más problemáticos”

Tras la evaluación de los heurísticos de Nielsen en este maravilloso sitio web, a continuación, realizaremos un ranking de las 3 peores malas prácticas llevadas a cabo que hacen de la experiencia casi un pequeño infierno diario.

En el puesto número 3… aunque no menos importante que las demás se encuentra la falta de una estética y de un kit de estilos configurada y diseñada. Los colores no siguen una línea cromática visualmente agradable y cada una de las secciones está diseñada de una manera distinta, tanto a nivel de estructura como de diseño de botones, como de utilización de tipografía o iconos.

En el siguiente estado del pódium y con una gran importancia (¡el puesto número dos!), es la falta de minimalismo en el diseño de todos y cada uno de los apartados, así como la elección de los iconos (o esas imágenes…) que hacen de la experiencia visual un caos total.

Casi nos recuerda a la Homer’s Web Page de Los Simpson…

Por último (y en este caso sí que lo más importante), la estructuración de la información hace prácticamente imposible recordar dónde se encuentra o cómo llegar hasta determinados servicios o herramientas. Es decir, el usuario debe aprender una y otra vez cada vez que entra en la web la forma en la que se realizan procesos que deberían resultar evidentes con respecto a su uso.

Propuesta de mejora

La propuesta de mejora consistiría en primer lugar en realizar un research con usuarios para e diseño de un listado de contenidos coherente y clasificado en apartados intuitivos y claros para el usuario. Organizando un menú agradable para su uso.

Por otro lado, haría falta un diseño de un UI Kit que hiciera coherente el uso de botones, tipografías, colores e iconos, otorgando al sitio web un toque más minimalista a la vez de eficiente.

Perspectiva de género e inclusión

Ahora, vamos a hablar de un tema realmente interesante que es la inclusión y la perspectiva de género del sitio web. Por lo general no se utiliza ni el género masculino ni el femenino para referiste a los empleados y las personas usuarias. Esto no quiere decir que la web (o su intención) se inclusiva, simplemente que no se lleva a cabo la utilización de cierto tipo de palabras.

Por otro lado, nos encontramos imágenes que, por lo general, muestran diversidad entre sus formas, como por ejemplo estas que vemos a continuación.

Por otro lado, teniendo en cuenta el uso de los iconos realizado y de las imágenes seleccionadas en general a lo largo de todo el sitio web, no me parece justo considerarlo como inclusivo ya que no tiene en cuenta ningún tipo de posible discapacidad dentro de los usuarios que lo utilizan.