TOHFU/ux-huristic-research-skill

Skills UX Heuristic Research Skills

Realiza evaluaciones heurísticas basadas en el diseño centrado en el ser humano y genera un informe con los resultados.

Prerrequisitos

Antes de realizar una evaluación heurística, verifica las siguientes condiciones a partir del prompt recibido. Si no se pueden confirmar, haz las preguntas necesarias. Si la evaluación se realiza en un entorno donde estas condiciones no se cumplen o no están disponibles, notifica previamente que los resultados pueden no ser completos.

Determinación del objetivo

• La evaluación puede elegir entre los siguientes dos patrones:
  • Modo de página completa: Evalúa uniformemente cada página completa de un sitio web especificado.
  • Modo de recreación del recorrido: Evalúa la experiencia al realizar un recorrido de cliente especificado.
• El objeto de evaluación (la lista de sitios web para el modo de página completa, o la URL de inicio del recorrido para el modo de recreación del recorrido) debe ser claro.
• Para el modo de recreación del recorrido, la descripción general del recorrido de cliente objetivo (por ejemplo, "investigar información XX", "realizar una consulta") debe ser clara.

Determinación del entorno objetivo

• Especifica el entorno al que accede el usuario objetivo (PC / dispositivo móvil).

Confirmación del uso del método de investigación

• Debe poder obtenerse el código fuente del sitio web objetivo (HTML, CSS, JavaScript).
• Debe estar disponible Playwright o una herramienta E2E equivalente.
• Debe ser posible acceder y operar el sitio web objetivo utilizando la herramienta E2E.

Principios

• Los resultados de la evaluación deben generarse en español.
• La evaluación debe realizarse de acuerdo con los 10 principios de usabilidad de Nielsen, asignando una puntuación del 1 al 10 para cada principio.
• Si hay observaciones específicas para cada principio, deben informarse sin omisiones.

Proceso de evaluación

La evaluación se ejecuta paso a paso siguiendo las siguientes etapas:

1. Creación de la estructura del sitio / diagrama de navegación de pantallas

   • Utiliza una herramienta E2E como Playwright para realizar operaciones en pantalla y llevar a cabo lo siguiente:
     • Para el modo de página completa: Comprende la navegación de pantallas del sitio web listado y crea una estructura del sitio.
     • Para el modo de recreación del recorrido: Crea un diagrama de navegación de pantallas para lograr el recorrido de cliente.

2. Verificación dinámica/E2E (confirmación del recorrido de cliente objetivo)

   • Para el modo de página completa: Utiliza una herramienta E2E como Playwright para acceder a cada sitio web y realizar operaciones en las principales interfaces de usuario.
     • Durante las operaciones en pantalla, verifica si se cumplen los principios de usabilidad y realiza la evaluación.
   • Para el modo de recreación del recorrido: Utiliza una herramienta E2E como Playwright para reproducir el recorrido de cliente objetivo.
     • Durante la realización del recorrido, verifica si se cumplen los principios de usabilidad y realiza la evaluación.

3. Análisis estático de código

   • Lee el código fuente (HTML, CSS, JavaScript) de las páginas web listadas o transitadas, y verifica la validez de la estructura DOM, el uso de etiquetas semánticas, la validez de los atributos y la configuración de WAI-ARIA, entre otros aspectos.

Definición de estados de juicio

A cada resultado de la evaluación de los principios se le debe asignar obligatoriamente uno de los siguientes estados:

• 1 a 10: Evaluación en una escala de 10 puntos, donde 10 es la puntuación más alta y 1 la más baja.
• No aplica: No existen funciones o elementos de contenido correspondientes al principio evaluado.

Formato de salida

Los resultados de la evaluación deben exportarse como un archivo markdown organizado con la siguiente estructura, junto con capturas de pantalla de toda la página web objetivo (que muestren la ubicación del problema con un recuadro rojo y el número del problema). La estructura de carpetas es la siguiente:

├ heuristic-research-result-[nombre-del-dominio].md
└ screenshots
  ├ screenshot-[URL-del-sitio-web].png
  └ ...

---

Informe de evaluación heurística

1. Resumen de la evaluación

• Fecha y hora de la evaluación
• (Para el modo de recreación del recorrido) Recorrido objetivo
• Lista de URL objetivo
• Entorno de verificación (PC / Móvil)

Estructura del sitio / Diagrama de navegación de pantallas

Describe la estructura del sitio o el diagrama de navegación de pantallas en un bloque de código en notación Mermaid.

Resumen de resultados globales

Principio	Puntuación	Justificación / Comentario
1. Visibilidad del estado del sistema	1-10 o No aplica	Escribir justificación / comentario
2. Correspondencia entre el sistema y el mundo real	1-10 o No aplica	Escribir justificación / comentario
3. Control y libertad del usuario	1-10 o No aplica	Escribir justificación / comentario
4. Consistencia y estándares	1-10 o No aplica	Escribir justificación / comentario
5. Prevención de errores	1-10 o No aplica	Escribir justificación / comentario
6. Reconocimiento antes que recuerdo	1-10 o No aplica	Escribir justificación / comentario
7. Flexibilidad y eficiencia de uso	1-10 o No aplica	Escribir justificación / comentario
8. Diseño estético y minimalista	1-10 o No aplica	Escribir justificación / comentario
9. Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de errores	1-10 o No aplica	Escribir justificación / comentario
10. Ayuda y documentación	1-10 o No aplica	Escribir justificación / comentario

---

2. Lista de problemas y sugerencias de mejora

Para cada problema específico, indica el principio correspondiente e informa en el siguiente formato.

Issue-XX: [Número de problema, título breve del problema]

• Principio correspondiente: Escribe el nombre del principio correspondiente.
• Ubicación correspondiente: Escribe la URL de la página objetivo, el selector CSS o la ubicación en el código.
• Posición en la página: Describe brevemente en qué parte de la página objetivo se encuentra (ej: "Título debajo de la imagen principal").
• Acción realizada: Describe si se observa visualmente o mediante qué operación ocurre.
• Problema: Describe qué problema está ocurriendo.
• Ejemplo de usuarios afectados: Describe especialmente a los usuarios que se ven afectados (ej: "usuarios de lectores de pantalla", "usuarios de navegación por teclado", "personas con baja visión", etc.).
• Solución: Describe una propuesta de solución. Si existe una solución concreta, muestra un ejemplo de código en el siguiente formato:
  • Ejemplo de código problemático (Antes):

    <!-- Patrón de implementación problemática -->
    

  • Ejemplo de código recomendado (Después):

    <!-- Patrón de implementación que resuelve el problema -->
    

3. Observaciones adicionales

Escribe cualquier anotación relevante durante la evaluación (errores de JavaScript, mal funcionamiento, etc.).

---

Referencias

• references/hcd-10-usability-heuristics.md - Los 10 principios de usabilidad de Nielsen (texto original en inglés)
• references/hcd-standards.md - Resumen de las normas ISO relacionadas con HCD. Consultar aquí para la definición de usabilidad.
• references/examples_01.md - Ejemplo de evaluación 1 basado en el formato de salida
• references/huristic-research-result-www.soumu.go.jp.md - Ejemplo de evaluación 2 basado en el formato de salida (resultados de la evaluación del sitio web del Ministerio del Interior y Comunicaciones de Japón)
• /references/screenshots/screenshot-https_www.soumu.go.jp.png - Ejemplo de evaluación 2 basado en el formato de salida (resultados de la evaluación del sitio web del Ministerio del Interior y Comunicaciones de Japón)
• /references/huristic-research-result-www.digital.go.jp.md - Ejemplo de evaluación 3 basado en el formato de salida (resultados de la evaluación del sitio web de la Agencia Digital de Japón)