Análisis heurístico web

Analizando la web de un producto digital

Comenzamos con la realización de una Evaluación Heurística web de un producto digital.

INTRODUCCIÓN

Las heurísticas consisten en unos principios de usabilidad que nos sirven de guía para llevar a cabo unas buenas prácticas en nuestros diseños, mejorando de esta forma el recorrido que un usuario puede realizar al consumir nuestro producto. Reduciendo así las frustraciones que pueden llegar a sentir. Por ende, una Evaluación heurística consiste en un método de inspección o análisis técnico de la usabilidad de la interfaz de usuario de un sitio web, permitiendo identificar sus problemas de usabilidad.

¡VAMOS A LA ACCIÓN!

Para llevar a cabo este análisis he aplicado los 10 Principios Generales de Jakob Nielsen para argumentar el análisis profesional que he realizado. Así como también he tenido en cuenta los Principios de la Gestalt para las posibles soluciones.

Para estar organizada durante la realización de la evaluación web, he recogido los datos en una tabla de Airtable, estableciendo 10 columnas para explicar cada problema identificado (Imagen 1).

Imagen 1. Resumen explicativo del contenido de la tabla en Airtable

Cada problema lo he identificado observando el incumplimiento de las 10 heurísticas de Jakob Nielsen y evaluado mediante un Ranking de Severidad. En este ranking el problema se evalúa de 0 a 4, siendo 4 un problema catastrófico (Imagen 2).

• 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 menor. La mejora tiene prioridad baja en el proyecto.
• 3: Problema mayor. La mejora tiene prioridad alta en el proyecto.
• 4: Problema de usabilidad catastrófico. La mejora tiene prioridad máxima en el proyecto.

Imagen 2. Ranking de Severidad

RESULTADOS — Problemas identificados

Identifiqué 9 problemas diferentes en el sitio web:

PROBLEMA 1

El usuario no sabe en qué punto de la web está en cada momento.

Imagen 3. Visibilidad del estado del sistema

• Explicación: La web no da feedback al usuario de dónde se encuentra (Imagen 3).
• Heurísticas incumplidas: 1. Visibilidad del estado del sistema.
• Ranking de Severidad: 2
• Posible solución: Añadir un menú sticky y crear “active btns” en la sesión de la Home donde se encuentre el usuario. Al usuario se le debería decir “está usted aquí”.

PROBLEMA 2

Hay botones que no usan la opción hover para cambiar el estilo de un botón cuando mueves el ratón encima de él, sin embargo, hay en otros que sí (Imagen 4).

Imagen 4. Botones diferentes

• Explicación: 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, para que esto suceda debe existir una coherencia dada por elementos estandarizados.
• Heurísticas incumplidas: 1. Visibilidad del estado del sistema y 4. Consistencia y estándares y 7. Flexibilidad y eficiencia de uso.
• Ranking de Severidad: 2
• Posible solución: Crear consistencia funcional en el diseño. Aplicar Hover en todos los botones. Añadir el mismo estilo a todos los botones.

PROBLEMA 3

No existe feedback al usuario de lo que se está desarrollando.

• Explicación: El feedback ayuda al usuario a entender cómo se está desarrollando y en qué punto se encuentra el proceso/tarea que está realizando.
• Heurísticas incumplidas: 1. Visibilidad del estado del sistema.
• Ranking de Severidad: 0
• Posible solución: Añadir una tarea de “comprobando” o “accediendo”.

PROBLEMA 4

Demasiado texto en determinados apartados (Imagen 5).

Imagen 5. Demasiado texto

• Explicación: Demasiado texto, crear estética en cada uno de los textos y perseguir el diseño minimalista.
• Heurísticas incumplidas: 1. Visibilidad del estado del sistema, 2. Coincidencia entre el sistema y el mundo real y 4. Estética y diseño minimalista.
• Ranking de Severidad: 2
• Posible solución: Crear una estrategia de UX Writing utilizando patrones de comportamiento y comunicación efectiva, teniendo en cuenta la mayor simpleza y claridad posible de los textos.

PROBLEMA 5

Ajuste de layout (Imagen 6).

Imagen 6. Contenido desordenado

• Explicación: La layout o plantilla de la web está compuesta por una serie de bloques donde sus dimensiones no son exactamente iguales. El contenido queda desordenado. En general en la web los márgenes son inexistentes y en algunos casos la longitud de las líneas son demasiado anchas.
• Heurísticas incumplidas: 4. Consistencia y estándares y 7. Flexibilidad y eficiencia de uso.
• Ranking de Severidad: 2
• Posible solución: Ajustar la layout, tiene que coincidir los espacios entre cards, textos, títulos…

PROBLEMA 6

Las tipografía no está bien definida, no corresponden a ningún estándar concreto (Imagen 7).

Imagen 7. Tipografía irregular a lo largo de la web

• Explicación: Las tipografía no está bien definida, tienen características diferentes (colores, tamaño, tipografía…). Por ejemplo los títulos, en general son de un tamaño de 40px en Lato, sin embargo, en una de las sesiones está a 45px en Lato.
• Heurísticas incumplidas: 4. Consistencia y estándares y 7. Flexibilidad y eficiencia de uso.
• Ranking de Severidad: 4
• Posible solución: Seguir estándares en la tipografía, por ejemplo, todos los títulos de cada apartado con la misma tipografía, tamaño, peso…; los subtítulos con la misma tipografía, tamaño, peso…; los párrafos con la misma tipografía, tamaño, peso…

PROBLEMA 7

Las distribución / alineamiento de los elementos entre sesiones y en la propia sección no es uniforme (Imagen 8a y 8b).

Imagen 8a. Cards mal alineadas

Imagen 8b. Títulos a diferente altura

• Explicación: No existe consistencia. Las imágenes están a diferentes alturas, los títulos y los textos. Los botones en algunos casos no son legibles. Existe ruido visual y desorganización.
• Heurísticas incumplidas: 4. Consistencia y estándares y 7. Flexibilidad y eficiencia de uso.
• Ranking de Severidad: 4
• Posible solución: Crear consistencia visual en el diseño UI. Un diseño consistente mejora la usabilidad del producto.

PROBLEMA 8

Extraña distribución de una de las secciones en forma de flor con tooltips con hover (Imagen 9).

Imagen 9. Distribución en flor y posible solución

• Explicación: No es cómodo de utilizar ya que no es muy legible. No se sobreentiende que haya que pasar el cursor para obtener más información.
• Heurísticas incumplidas: 3. Dale al usuario el control y la libertad, 4. Consistencia y estándares y 7. Flexibilidad y eficiencia de uso.
• Ranking de Severidad: 4
• Posible solución: Se puede seguir manteniendo el efecto de texto sobre imagen al pasar el cursor pero no con un tooltip con hover, sino por ejemplo una grid con imágenes con efecto hover con texto. Algo menos circular ya que con tanta información no es atractivo y no cabe toda la sección en una pantalla, por lo que la distribución no queda armónica.

PROBLEMA 9

No corresponden los títulos de los apartados con los del menú superior.

• Explicación: Se debe utilizar el mismo título del menú superior, como título de la sección.
• Heurísticas incumplidas: 5. Prevención de errores.
• Ranking de Severidad: 4
• Posible solución: Añadir el mismo título del menú superior, como título de la sección.
  Menú: Valor diferencial / Título sección: Valor diferencial; Subtítulo: Nuestro valor
  Menú: Funcionamiento / Título: Funcionamiento; Subtítulo: ¿Cómo funciona?
  …

FUTURIBLES

Como futuribles podría realizarse (Imagen 10):

• Un prototipo web teniendo en cuenta las recomendaciones de mejora según las heurísticas aplicadas y Los principios de la Gestalt en el diseño.
• E incluso un análisis SEO del sitio.

10. Futuribles

CONCLUSIONES

Al utilizar como herramientas del proceso de análisis de una página web, las heurísticas de Jakob Nielsen he podido valorar objetivamente la usabilidad de la web analizada. Se concluye que la web necesita mejorar su capa y jerarquía visual ya que le falta consistencia y estándares, así como rebajar el contenido visual para dar una información más minimalista y armónica. Las personas interpretamos un elemento visual lo más simple y reconocible posible, ya que el cerebro prefiere las formas integradas, completas y estables.

El nuevo diseño debe tener una percepción visual basada en visualizar nuestro entorno como formas o grupos unitarios. De esta manera evitaremos la desorganización y volvernos locos, ya que el mundo lo percibimos con muchas señales diferentes a la vez y tenemos que organizarlas. Para ello se deben emplear los Principios de la Gestalt en el diseño, los cuales intentan explicar cómo nuestras mentes perciben los diferentes componentes visuales como parte de un conjunto:

• Proximidad de los objetos por cercanía.
• Similitud de los objetos que permitan que los usuarios los perciban como un grupo o patrón.
• Mantener un punto focal que permita crear interés, énfasis o diferencia dentro de una composición, captando y reteniendo la atención del usuario. Creando posibles nuevos leads.
• Principio de igualdad y principio de cerramiento así los objetos que se encuentren en una misma “sección cerrada” se perciban como agrupados.
• Principio de continuidad. Los elementos que están dispuestos en una línea o curva o se mueven en la misma dirección se perciben como un solo grupo.

Si quieres ver más detalles accede al archivo de Airtable.