TOHFU/ux-heuristische-forschung-skill

Skills UX Heuristische Forschung Skills

Führt heuristische Evaluationen basierend auf menschenzentriertem Design durch und erstellt Ergebnisberichte.

Voraussetzungen

Vor der Durchführung der heuristischen Evaluation sind die folgenden Bedingungen aus dem angegebenen Prompt zu überprüfen. Falls diese nicht bestätigt werden können, sind entsprechende Rückfragen zu stellen. Wenn die Evaluation unter Bedingungen durchgeführt wird, bei denen diese nicht bestätigt werden können oder nicht erfüllt sind, ist vorab darauf hinzuweisen, dass die Ergebnisse möglicherweise nicht ausreichend sind.

Zielbestimmung

• Die Evaluation kann zwischen den folgenden zwei Varianten wählen:
  • Seitenweise-Variante: Bewertet alle Seiten der angegebenen Websites gleichmäßig.
  • Journey-Reproduktions-Variante: Bewertet die Experience bei der Umsetzung einer angegebenen Customer Journey.
• Das Evaluationsziel (bei der Seitenweise-Variante die Liste der Websites, bei der Journey-Reproduktions-Variante die Start-URL der Journey) muss klar sein.
• Bei der Journey-Reproduktions-Variante muss die Übersicht der relevanten Customer Journey (z.B. "Informationen zu XX recherchieren", "Kontakt aufnehmen") klar sein.

Zielumgebungsbestimmung

• Die Umgebung, auf die der Zielbenutzer zugreift (PC / Mobilgerät), muss festgelegt werden.

Überprüfung der Nutzung der Untersuchungsmethode

• Der Quellcode der Zielwebsite muss zugänglich sein (HTML, CSS, JavaScript).
• Playwright oder ein vergleichbares E2E-Tool muss verfügbar sein.
• Es muss möglich sein, mit dem E2E-Tool auf die Zielwebsite zuzugreifen und diese zu bedienen.

Prinzipien

• Die Evaluationsergebnisse sind auf Deutsch auszugeben.
• Die Evaluation erfolgt gemäß Nielsens 10 Usability-Prinzipien, und jedes Prinzip wird auf einer 10-stufigen Skala bewertet.
• Falls es zu einem Prinzip spezifische Feststellungen gibt, sind diese vollständig zu melden.

Evaluationsprozess

Die Evaluation wird schrittweise gemäß den folgenden Schritten durchgeführt.

1. Erstellung der Seitenstruktur / des Screen-Transition-Diagramms

• Mit einem E2E-Tool wie Playwright werden Bildschirmoperationen durchgeführt, um Folgendes umzusetzen:
  • Bei der Seitenweise-Variante: Die Bildschirmübergänge der aufgelisteten Websites erfassen und eine Seitenstruktur erstellen.
  • Bei der Journey-Reproduktions-Variante: Die Übergänge zur Umsetzung der Customer Journey als Screen-Transition-Diagramm erstellen.

2. Dynamische / E2E-Verifikation (Bestätigung der relevanten Customer Journey)

• Bei der Seitenweise-Variante: Mit einem E2E-Tool wie Playwright auf jede Website zugreifen und die wichtigsten UI-Elemente bedienen.
  • Während der Bildschirmoperationen prüfen, ob die Usability-Prinzipien eingehalten werden, und eine Bewertung vornehmen.
• Bei der Journey-Reproduktions-Variante: Mit einem E2E-Tool wie Playwright die relevante Customer Journey reproduzieren.
  • Während der Umsetzung der Journey prüfen, ob die Usability-Prinzipien eingehalten werden, und eine Bewertung vornehmen.

3. Statische Code-Analyse

• Den Quellcode (HTML, CSS, JavaScript) der aufgelisteten oder durchlaufenen Webseiten laden und die Gültigkeit der DOM-Struktur, die Verwendung semantischer Tags, die Gültigkeit von Attributen, die Struktur von WAI-ARIA usw. überprüfen.

Definition der Bewertungsstatus

Jedem Bewertungsergebnis eines Prinzips ist einer der folgenden Status zuzuweisen.

• 1–10: Eine 10-stufige Bewertung, wobei 10 die höchste und 1 die niedrigste ist.
• Nicht zutreffend: Es existieren keine relevanten Funktionen oder Inhaltselemente für das betreffende Prinzip.

Ausgabeformat

Die Evaluationsergebnisse sind in einer nach folgender Markdown-Struktur organisierten .md-Datei sowie als Screenshot-Bild der gesamten Zielwebseite (mit rotem Rahmen um die Problemstellen und Angabe der Problemnummer) als Dateien auszugeben. Die Ordnerstruktur ist wie folgt:

├ huristic-research-result-[Domainname].md
└ screenshots
  ├ screenshot-[Website-URL].png
  └ ...

---

Heuristischer Evaluationsbericht

1. Evaluationsübersicht

• Datum und Uhrzeit der Evaluation
• (Bei Journey-Reproduktions-Variante) Die relevante Journey
• Liste der relevanten URLs
• Prüfumgebung (PC / Mobil)

Seitenstruktur / Screen-Transition-Diagramm

Beschreiben Sie die Seitenstruktur oder das Screen-Transition-Diagramm in einem Codeblock der Mermaid-Notation.

Zusammenfassung der Gesamtergebnisse

Prinzip	Bewertung	Begründung / Kommentar
1. Sichtbarkeit des Systemstatus	1–10 oder Nicht zutreffend	Begründung / Kommentar angeben
2. Übereinstimmung zwischen System und realer Welt	1–10 oder Nicht zutreffend	Begründung / Kommentar angeben
3. Benutzerkontrolle und Freiheit	1–10 oder Nicht zutreffend	Begründung / Kommentar angeben
4. Konsistenz und Standards	1–10 oder Nicht zutreffend	Begründung / Kommentar angeben
5. Fehlervermeidung	1–10 oder Nicht zutreffend	Begründung / Kommentar angeben
6. Recognition rather than Recall	1–10 oder Nicht zutreffend	Begründung / Kommentar angeben
7. Flexibilität und Effizienz	1–10 oder Nicht zutreffend	Begründung / Kommentar angeben
8. Ästhetisches und minimalistisches Design	1–10 oder Nicht zutreffend	Begründung / Kommentar angeben
9. Hilfe zur Fehlererkennung, -diagnose und -behebung	1–10 oder Nicht zutreffend	Begründung / Kommentar angeben
10. Hilfe und Dokumentation	1–10 oder Nicht zutreffend	Begründung / Kommentar angeben

---

2. Problemliste und Verbesserungsvorschläge

Berichten Sie über konkrete Probleme im folgenden Format, nachdem Sie das entsprechende Prinzip angegeben haben.

Issue-XX: [Problemnummer, kurzer Titel des Problems]

• Zutreffendes Prinzip: Name des zutreffenden Prinzips angeben.
• Fundstelle: URL der Zielseite, CSS-Selektor oder Codeposition angeben.
• Position auf der Seite: Kurze Beschreibung der Position auf der Zielseite (z.B. "Überschrift unterhalb des Hauptvisuals").
• Bedienung: Beschreiben, ob es durch visuelle Inspektion oder durch welche Bedienung auftritt.
• Problem: Beschreiben, welches Problem auftritt.
• Beispiel betroffener Benutzer: Beschreiben, welche Benutzer besonders betroffen sind (z.B. Screenreader-Nutzer, Tastaturnutzer, Sehbehinderte usw.).
• Behebungsvorschlag: Einen Vorschlag zur Behebung angeben. Falls ein konkreter Korrekturvorschlag vorhanden ist, zeigen Sie ein Codebeispiel im folgenden Format.
  • Beispiel für problematischen Code (Before):

    <!-- Problembehaftetes Implementierungsmuster -->
    

  • Empfohlenes Codebeispiel (After):

    <!-- Problembehebendes Implementierungsmuster -->
    

3. Zusätzliche Beobachtungen

Falls während der Evaluation besondere Vorkommnisse auftreten, diese beschreiben (z.B. JavaScript-Fehler, Fehlfunktionen).

---

Referenzen

• references/hcd-10-usability-heuristics.md - Nielsens 10 Usability-Prinzipien (Original, englisch)
• references/hcd-standards.md - Überblick über HCD-bezogene ISO-Standards. Für die Definition von Usability siehe diese Referenz.
• references/examples_01.md - Bewertungsbeispiel 1 basierend auf dem Ausgabeformat
• references/huristic-research-result-www.soumu.go.jp.md - Bewertungsbeispiel 2 basierend auf dem Ausgabeformat (Bewertung der Website des Innenministeriums)
• /references/screenshots/screenshot-https_www.soumu.go.jp.png - Bewertungsbeispiel 2 basierend auf dem Ausgabeformat (Bewertung der Website des Innenministeriums)
• /references/huristic-research-result-www.digital.go.jp.md - Bewertungsbeispiel 3 basierend auf dem Ausgabeformat (Bewertung der Website der Digitalen Agentur)