TOHFU/ux-huristic-research-skill

Compétences : Compétences en recherche heuristique UX

Réalise une évaluation heuristique basée sur les principes de la conception centrée sur l'humain et génère un rapport de résultats.

Prérequis

Avant de procéder à l'évaluation heuristique, vérifiez les conditions suivantes à partir de l'invite donnée. Si ces conditions ne peuvent être vérifiées, posez les questions appropriées. Si l'évaluation est réalisée dans un environnement où ces conditions ne sont pas vérifiées ou remplies, veuillez notifier à l'avance que les résultats risquent d'être insuffisamment fournis.

Détermination de la cible

• L'évaluation peut choisir l'un des deux modes suivants :
  • Mode page entière : évalue uniformément chaque page entière d'un site Web spécifié.
  • Mode reproduction de parcours : évalue l'expérience pour réaliser un parcours client spécifié.
• La cible de l'évaluation (liste des sites Web en mode page entière, URL de départ du parcours en mode reproduction de parcours) doit être claire.
• En mode reproduction de parcours, un aperçu du parcours client cible (par exemple, rechercher des informations XX, faire une demande de contact) doit être clair.

Détermination de l'environnement cible

• Clarifier l'environnement auquel l'utilisateur cible accède (PC/appareil mobile).

Confirmation de l'utilisation de la méthode de recherche

• Le code source du site Web cible (HTML, CSS, JavaScript) doit pouvoir être récupéré.
• Playwright ou un outil E2E équivalent doit être disponible.
• Pouvoir accéder au site Web cible et effectuer des opérations à l'aide de l'outil E2E.

Principes

• Les résultats de l'évaluation doivent être fournis en japonais.
• L'évaluation doit être effectuée conformément aux 10 principes d'utilisabilité de Nielsen, et chaque principe doit être évalué sur une échelle de 10 points.
• S'il existe des points de remarque spécifiques pour chaque principe, les rapporter sans omission.

Processus d'évaluation

L'évaluation est exécutée étape par étape selon les étapes suivantes.

1. Création de la structure du site et du diagramme de transition d'écran

   • Effectuer des opérations sur l'écran à l'aide d'un outil E2E tel que Playwright, et effectuer les opérations suivantes :
     • En mode page entière, comprendre les transitions d'écran du site Web répertorié et créer une structure du site.
     • En mode reproduction de parcours, créer les transitions pour réaliser le parcours client sous forme de diagramme de transition d'écran.

2. Vérification dynamique et E2E (confirmation du parcours client cible)

   • En mode page entière, accéder à chaque site Web à l'aide d'un outil E2E tel que Playwright et effectuer des opérations sur l'interface utilisateur principale.
     • Pendant les opérations sur l'écran, vérifier si les principes d'utilisabilité sont satisfaits et effectuer l'évaluation.
   • En mode reproduction de parcours, reproduire le parcours client cible à l'aide d'un outil E2E tel que Playwright.
     • Pendant la réalisation du parcours, vérifier si les principes d'utilisabilité sont satisfaits et effectuer l'évaluation.

3. Analyse statique du code

   • Lire le code source (HTML, CSS, JavaScript) des pages Web répertoriées ou parcourues, et vérifier la validité de la structure DOM, l'utilisation des balises sémantiques, la validité des attributs, la configuration WAI-ARIA, etc.

Définition du statut de jugement

Pour chaque principe, l'un des statuts suivants doit être attribué au résultat de l'évaluation.

• 1 à 10 : évaluation sur une échelle de 10 points, 10 étant le plus élevé, 1 le plus bas.
• Non applicable : aucune fonctionnalité ou élément de contenu pertinent pour le principe concerné n'existe.

Format de sortie

Les résultats de l'évaluation doivent être stockés dans un fichier md organisé selon la structure Markdown suivante, ainsi qu'une image de capture d'écran de l'ensemble de la page Web cible (illustrant l'emplacement du problème avec un cadre rouge et incluant le numéro du problème). La structure des dossiers est la suivante.

├ huristic-research-result-[nom de domaine].md
└ screenshots
  ├ screenshot-[URL du site Web].png
  └ ...

---

Rapport d'évaluation heuristique

1. Résumé de l'évaluation

• Date et heure de l'évaluation
• (En mode reproduction de parcours) Parcours ciblé
• Liste des URL ciblées
• Environnement de test (PC/mobile)

Structure du site / Diagramme de transition d'écran

Décrire la structure du site ou le diagramme de transition d'écran dans un bloc de code en notation Mermaid.

Résumé global des résultats

Principe	Score	Justification/Commentaire
1. Visibilité de l'état du système	1~10 ou Non applicable	Décrire la justification/commentaire
2. Correspondance entre le système et le monde réel	1~10 ou Non applicable	Décrire la justification/commentaire
3. Contrôle et liberté de l'utilisateur	1~10 ou Non applicable	Décrire la justification/commentaire
4. Cohérence et standardisation	1~10 ou Non applicable	Décrire la justification/commentaire
5. Prévention des erreurs	1~10 ou Non applicable	Décrire la justification/commentaire
6. Reconnaissance plutôt que mémorisation	1~10 ou Non applicable	Décrire la justification/commentaire
7. Flexibilité et efficacité d'utilisation	1~10 ou Non applicable	Décrire la justification/commentaire
8. Esthétique et design minimaliste	1~10 ou Non applicable	Décrire la justification/commentaire
9. Aider les utilisateurs à reconnaître, diagnostiquer et récupérer des erreurs	1~10 ou Non applicable	Décrire la justification/commentaire
10. Aide et documentation	1~10 ou Non applicable	Décrire la justification/commentaire

---

2. Liste des problèmes et propositions d'amélioration

Pour les problèmes spécifiques, indiquer le principe correspondant et les rapporter au format suivant.

Issue-XX : [Numéro de problème, titre succinct du problème]

• Principe concerné : Indiquer le nom du principe concerné.
• Emplacement concerné : Indiquer l'URL de la page cible, le sélecteur CSS ou l'emplacement dans le code.
• Position concernée : Décrire brièvement l'emplacement sur la page cible (ex. : titre en bas de l'image principale).
• Opération effectuée : Décrire s'il est détecté par inspection visuelle de l'écran ou par quelle opération il se produit.
• Problème : Décrire le problème qui se produit.
• Exemple d'utilisateurs affectés : Décrire les utilisateurs particulièrement affectés (ex. : utilisateurs de lecteurs d'écran, utilisateurs de navigation au clavier, malvoyants, etc.).
• Méthode de résolution : Proposer une méthode de résolution. S'il existe une proposition de correction spécifique, montrer un exemple de code au format suivant.
  • Exemple de code problématique (Avant) :

    <!-- Modèle d'implémentation présentant le problème -->
    

  • Exemple de code recommandé (Après) :

    <!-- Modèle d'implémentation résolvant le problème -->
    

3. Observations complémentaires

Décrire tout élément notable au cours de l'évaluation (erreurs JavaScript, dysfonctionnements, etc.).

---

Références

• references/hcd-10-usability-heuristics.md - Les 10 principes d'utilisabilité de Nielsen (texte original en anglais)
• references/hcd-standards.md - Aperçu des normes ISO liées à la conception centrée sur l'humain (HCD). Se référer à ce document pour la définition de l'utilisabilité.
• references/examples_01.md - Exemple d'évaluation 1 basé sur le format de sortie
• references/huristic-research-result-www.soumu.go.jp.md - Exemple d'évaluation 2 basé sur le format de sortie (résultat de l'évaluation du site Web du ministère des Affaires intérieures et des Communications)
• /references/screenshots/screenshot-https_www.soumu.go.jp.png - Exemple d'évaluation 2 basé sur le format de sortie (résultat de l'évaluation du site Web du ministère des Affaires intérieures et des Communications)
• /references/huristic-research-result-www.digital.go.jp.md - Exemple d'évaluation 3 basé sur le format de sortie (résultat de l'évaluation du site Web du Bureau du numérique)