Las heurísticas de Jakob Nielsen son 10 principios de usabilidad que nos sirven de guía para llevar a cabo buenas prácticas en nuestros diseños. Ayudan a reducir las frustraciones que el usuario puede sentir al consumir un producto.
Cuando aplicamos las heurísticas a un producto digital, en este caso a una web, estamos realizando un análisis profesional. Los fallos son objetivos y podemos apoyarnos en estos principios para argumentarlos.
Hallazgos
Para seguir un orden en la evaluación de la web, se han recogido los datos en una tabla de Airtable, estableciendo 9 columnas para identificar cada problema:
- 1ª Código. Representa el orden de los hallazgos y el principio heurístico al que atentan.
- 2ª Espacio web. Dónde encontramos el problema.
- 3ª URL.
- 4ª Descubrimiento. Indentificación del problema.
- 5ª Explicación. Descripción extendedia del problema.
- 6ª Principio heurístico.
- 7ª Severidad. Evaluación del fallo de 1 a 4.
- 8ª Recomendación. Propuesta de una posible solución.
- 9ª Screenshot.
Evaluación. Severidad de los problemas.
Mostraré el imcumplimiento de las 10 heurísticas, pero antes es necesario explicar cómo se evalúa el fallo. A cada problema le he dado una puntuación de 0 a 4, teniendo en cuenta el criterio de Jacob Nielsen:
- 0: No cumple ninguna heurística pero no llega a ser un problema de usabilidad.
- 1: No es necesario solucionar el problema a menos que haya tiempo adicional en el proyecto.
- 2: Problema de usabilidad menor. Arreglarlo tiene una prioridad baja en el proyecto.
- 3: Problema de usabilidad mayor. Arreglarlo tiene una prioridad alta en el proyecto.
- 4: Problema de usabilidad catastrófico. Arreglarlo tiene una prioridad máxima en el proyecto. No es posible su lanzamiento hasta que no se haya corregido el problema.
Heurística 1: Mostrar el estado del sistema.
El feedback ayuda al usuario a entender cómo se está desarrollando y en qué punto se encuentra el proceso/tarea que está realizando.
Problema: La web no da feedback al usuario. Cuando se está cargando una página nueva aparece la pantalla en blanco. Además el usuario no sabe en qué punto de la web está en cada momento.
Puntuación: 2.
Posible solución: Spinners o imágenes “skeleton”/de precarga mientras se cargan las distintas páginas y crear un menú breadcrumbs.
Heurística 2: Hablar el lenguaje del usuario.
El lenguaje de una web depende en cierta medida de la personalidad de la empresa y siempre tiene que estar dirigido los usuarios. Además, la infomación debe seguir un orden lógico y natural.
Problema: El lenguaje es correcto para una web institucional pero el orden de la información falla. Además se mezclan títulos en mayúsculas con otros minúsculas; diferentes tamaños en la tipografía; diferentes interlineados… Todo esto provoca la confusión de usuario.
Puntuación: 2.
Posible solución: Ordenar la información de forma más intuitiva y jerarquizada y estandarizar el uso de la tipografía.
Heurística 3: Control y libertad.
Una web tiene que ofrecer opciones de salida, de volver atrás… para darle al usuario control en su proceso.
Problema: El usuario no sabe dónde está en ningún momento y tampoco puede retroceder sobre sus pasos.
Puntuación: 2.
Posible solución: Crear un menú de breadcrumbs/migas de pan.
Heurística 4: Consistencia y estándares.
La coherencia es fundamental en una web. El usuario aprende y crea un modelo mental que le permite avanzar por la web de manera más natural. Esta coherencia viene dada por elementos estandarizados.
Problema: La pantalla principal aparece organizada a través de una especie de cards. Tienen características diferentes (colores, bordes, tipografía…) pero no corresponden a ningún estándar concreto.
Puntuación: 4.
Posible solución: Seguir estándares en las cards, por ejemplo el color verde podría estar dirigido al alumnado de grado; el color azul al de postgrado… También podría aplicarse hover en las cards para que se reconocieran como botones.
Heurística 5: Prevenir errores.
La web tiene que brindarle al usuario de suficiente información con anterioridad para que éste no llegue al error.
Problema: Hay muchos PDFs adjuntos en la web y están indicados como tal. El problema es que esta indicación tiene el mismo peso que el propio nombre del archivo. Además, cada uno se comporta de una manera diferente: algunos de abren en la misma pestaña y otros en una pestaña distinta.
Puntuación: 1.
Posible solución: Modificar la indicación [pdf] y estandarizar la forma de abrir los PDFs creando una ventana modal para indicar que se va a abrir una pestaña nueva con dicho PDF.
Heurística 6: Aliviar la carga cognitiva del usuario.
Los usuarios deben tardar lo menos posible en realizar su tarea y para ello es necesario que los elementos estandarizados se reconozcan con facilidad, reduciendo así la carga cognitiva.
Problema: Una web universitaria debe mostrar con claridad el listado de asignaturas. Se debe establecer un orden, ya sea por cursos o por materias, para que el usuario pueda acceder a la información. En este caso aparece un listado completo de todas las asignaturas que genera un gran scroll vertical. Es cierto que se pueden encontrar las asignaturas, pero requiere de un gran esfuerzo.
Puntuación: 2.
Posible solución: Crear un menú jeráquico con una serie de filtros según curso, materia… para reducir la carga cognitiva del usuario.
Heurística 7: Atajos, flexibilidad y eficiencia.
Los usuarios buscan acelerar sus tareas y esto es posible de varias maneras. Los atajos del teclado o las recomendaciones/autorrellenado en el buscador son buenos ejemplos para mejorar la eficiencia.
Problema: El buscador no ofrece alternativas mientras el usuario está escribiendo ni una vez buscado, cuando la palabra no ha sido escrita correctamente.
Puntuación: 2.
Posible solución: Diseñar un buscador más visual, darle más importancia en la web de inicio y prevenir el error del usuario ofreciéndole recomendaciones mientras escribe y opciones corregidas.
Heurística 8: Estética y minimalismo.
La información que aparece en la web ha de ser relevante, sobretodo si nos referimos a la página de inicio. Reduciendo y ordenando los distintos elementos conseguimos una menor carga cognitiva y un mayor entendimiento en el usuario.
Problema: Anteriormente se ha señado su falta de consistencia en lo que respecta a la heurística 4 de Nielsen. En este caso además, debido al desorden de la información a nivel visual tampoco se establece ningún tipo de jerarquía ni categorización para los diferentes contenidos.
Puntuación: 4.
Posible solución: Crear un megamenú jerárquico, reducir el contenido de la página de inicio y dotarle al color un significado entendible por el usuario.
Heurística 9: Comunicar errores con claridad.
Es necesario diseñar para el error, ya que el usuario tiene que entender por qué ha fallado y qué alternativas/soluciones se le proponen.
Problema: Error 403. Es positivo que la ventana nos indique cuál ha sido el error pero se puede mejorar. Ahora bien, el problema más grave es que no hay alternativas por lo que el usuario no puede volver a la página de inicio ni retroceder.
Puntuación: 3.
Posible solución: Colocar un botón para volver a la página de inicio o para retroceder y diseñar la página 403 con el mismo estilo de toda la web.
Heurística 10: Ayuda y documentación.
En ocasiones es necesario reforzar la web con información adicional. Ésta tiene que estar ordenada y ser fácil de encontrar.
Problema: Es complicado encontrar documentos como calendarios de exámenes, aulas de las asignaturas, documentos para secretaría… Incluso hay redirecciones a otras webs sin previo aviso. Un usuario habitual puede encontrarlo más o menos rápido porque lleva años enfrentándose a esta web pero nuevos estudiantes que buscan información por primera vez lo tienen mucho más complicado.
Puntuación: 3.
Posible solución: Ordenar correctamente la documentación utilizando la técnica de card sorting.
Conclusión
Las heurísticas de Jakob Nielsen han servido como herramienta para valorar objetivamente la usabilidad de una web universitaria. Seguir estos principios es un proceso sencillo y aporta precisión y profesionalidad al análisis.
No sólo diseñamos producto, también los evaluamos para ofrecerle al usuario la mejor versión posible.
¡Gracias por leerme!
