coastdigitalgroup/coastai-skills

System für Bewertungen und Rezensionen (UI)

Zweck

Das System für Bewertungen und Rezensionen (UI) bietet eine Methodik zur Gestaltung des visuellen und strukturellen Rahmens von benutzergeneriertem Feedback. Es stellt sicher, dass quantitative Daten (Sternebewertungen) und qualitative Daten (geschriebene Rezensionen) in einer scanbaren, vertrauenswürdigen und zugänglichen Oberfläche organisiert werden. Dieses System hilft Benutzern, fundierte Entscheidungen zu treffen, indem es das relevanteste Feedback hervorhebt und gleichzeitig die visuelle Konsistenz mit dem gesamten Seitendesign bewahrt.

Anwendungsfälle

• E-Commerce-Produktseiten: Anzeige von Produktzufriedenheit und detaillierten Kundenerfahrungen.
• Dienstleistungs-/SaaS-Marktplätze: Bewertung von Anbietern, Tools oder Anwendungen.
• Inhaltsplattformen: Ermöglichen von Benutzerbewertungen für Artikel, Kurse oder Medien.
• Feedback-Erfassungsformulare: Gestaltung der Eingabeseite des Bewertungssystems.
• Rezensionszusammenfassungen: Erstellung von "Auf einen Blick"-Bewertungsverteilungen (z. B. 5-Sterne-Balkendiagramme).

Wann NICHT zu verwenden

• Interne Qualitätsaudits: Wenn Feedback privat ist und nur für interne Verarbeitung ohne öffentliche Benutzeroberfläche verwendet wird.
• Binäres Feedback: Wenn das Ziel eine einfache "Hilfreich/Nicht hilfreich"- oder "Hoch-/Runterwählen"-Interaktion ist, verwenden Sie ein einfacheres Interaktionsmuster aus interactive-state-system.
• Inhalte mit geringem Volumen: Wenn eine Website typischerweise 0–2 Bewertungen pro Artikel hat, könnte eine komplexe Verteilungszusammenfassung "leer" oder entmutigend wirken.
• Streng quantitative Daten: Für Leistungskennzahlen oder Systemzustand (z. B. "99,9 % Verfügbarkeit") verwenden Sie ein einfaches badge-and-tag-system oder eine Datenvisualisierung.

Eingaben

1. Feedback-Schema: Die zu erfassenden/anzuzeigenden Daten (Bewertung 1-5, Titel, Text, Datum, Benutzer-ID, Verifizierungsstatus, Fotos).
2. Aggregat-Metadaten: Gesamtanzahl der Bewertungen und Durchschnittsbewertung.
3. Verteilungsdaten: Die Anzahl der Bewertungen pro Sternstufe (5, 4, 3, 2, 1).
4. Interaktionsanforderungen: Sortierung (Neueste, Höchste Bewertung), Filterung (Nur verifiziert, Mit Fotos) und "Hilfreich"-Abstimmung.

Ausgaben

1. Spezifikation der Bewertungskomponente: Visuelles Design für die "Sternzeile" (einschließlich leerer, halber und voller Zustände).
2. Anatomie der Bewertungszusammenfassung: Ein Layout für die Gesamtbewertung und das Verteilungsbalkendiagramm.
3. Blaupause für einzelne Bewertung: Das strukturelle Layout für einen einzelnen Bewertungseintrag (Benutzer, Bewertung, Inhalt, Aktionen).
4. Spezifikation der Eingabeinteraktion: Das Design für die Bewertungsauswahl und das Formular zum Einreichen von Bewertungen.

Arbeitsablauf

1. Gestalten Sie die aggregierte Zusammenfassung (Die Momentaufnahme)

Bevor Sie einzelne Bewertungen anzeigen, bieten Sie eine mentale Abkürzung:

• Durchschnittsbewertung: Große, prominente Zahl (z. B. "4,8").
• Sternvisualisierung: Eine Zeile mit 5 Sternen, die den Durchschnitt widerspiegelt.
• Gesamtanzahl: "Basierend auf 1.240 Bewertungen."
• Verteilungsbalken: Eine vertikale oder horizontale Liste, die den Prozentsatz der 5-, 4-, 3-, 2- und 1-Sterne-Bewertungen anzeigt. Diese sollten idealerweise interaktiv sein (Klicken auf einen Balken filtert die Liste).

2. Legen Sie die Anatomie der einzelnen Bewertungen fest

Wenden Sie visual-hierarchy-system auf die Bewertungskarte an:

• Kopfzeile: Benutzername (optional anonymisiert) und "Verifizierter Kauf"-Abzeichen.
• Bewertung & Datum: Die Sternebewertung und wann sie veröffentlicht wurde.
• Titel & Text: Ein fetter Titel für die Kernaussage, gefolgt vom beschreibenden Text.
• Medien (Optional): Miniaturansichten für vom Benutzer hochgeladene Fotos.
• Fußzeile/Aktionen: "War das hilfreich? (Ja/Nein)" und "Melden"-Schaltflächen.

3. Wählen Sie Interaktions- und Entdeckungsmuster

Ermöglichen Sie Benutzern, das für sie relevanteste Feedback zu finden:

• Sortierung: Standardmäßig "Relevanteste" (eine Mischung aus Aktualität und Hilfreichkeit). Erlauben Sie das Umschalten auf "Neueste" oder "Höchste/Niedrigste Bewertung".
• Filterung: Bieten Sie schnelle Umschalter für "Mit Bildern", "Nur verifiziert" oder bestimmte Sternanzahlen.

4. Gestalten Sie die Feedback-Eingabe (Das Formular)

Stellen Sie sicher, dass der Erfassungsprozess reibungslos abläuft:

• Erster Auslöser: Verwenden Sie große, interaktive Sterne, die beim Überfahren den Zustand ändern. Eine Radiogruppe von Sterneingaben, die mit dem :has()-Selektor gestylt wird (z. B. label:has(~ input:checked)), ermöglicht Hover-/Auswahl-Füllzustände ohne zusätzliches JavaScript.
• Progressive Offenlegung: Zeigen Sie den Texteingabebereich erst an, nachdem eine Sternebewertung ausgewählt wurde.
• Kontextbezogene Anleitung: Verwenden Sie Platzhalter wie "Was hat Ihnen gefallen oder nicht gefallen?", um nützliches Feedback zu fördern.

5. Planen Sie für Inhaltsvarianten

• Leerer Zustand: Gestalten Sie einen Zustand "Noch keine Bewertungen – seien Sie der Erste, der bewertet".
• Lange Bewertungen: Implementieren Sie eine "Weiterlesen"-Kürzung für extrem lange qualitative Rückmeldungen.
• Responsives Stapeln: Verschieben Sie auf Mobilgeräten die Verteilungszusammenfassung in einen einklappbaren Abschnitt oder stapeln Sie sie über der Bewertungsliste.

Entscheidungsregeln

• Der "Kneif"-Test für Sterne: Sterne müssen auch in kleiner Größe unterscheidbar sein. Verwenden Sie kontrastreiche Farben (z. B. Bernstein/Gold) gegen den Hintergrund.
• Priorität verifizierter Käufe: "Verifizierter Kauf"-Abzeichen sollten visuell auffällig sein (oft grün oder mit einem Häkchen-Symbol), um sofortiges Vertrauen aufzubauen.
• Durchschnittsgenauigkeit: Runden Sie den numerischen Durchschnitt auf eine Dezimalstelle (z. B. 4,7), aber stellen Sie sicher, dass die Sternzeile halbe Sterne korrekt darstellt.
• Hilfreichkeitslogik: Verwenden Sie die "Hilfreich"-Abstimmung, um die besten Bewertungen hervorzuheben, aber stellen Sie sicher, dass die Benutzeroberfläche nicht mit zu vielen sekundären Aktionen überladen wird.
• Bildseitenverhältnis: Verwenden Sie quadratische (1:1) Miniaturansichten für vom Benutzer hochgeladene Bewertungsbilder, um die Bewertungsliste organisiert zu halten.

Einschränkungen

• Barrierefreiheit: Sternebewertungen müssen aria-label verwenden (z. B. "4 von 5 Sternen"). Interaktive Sterneingaben müssen tastaturzugänglich sein und role="radiogroup" oder ähnliches verwenden, wobei jeder Stern mindestens 24x24px (WCAG 2.2, 2.5.8) groß sein muss – 44x44px werden bevorzugt, da kleine Sternziele leicht versehentlich angetippt werden.
• Kontrast: Leere Sterne (Hintergrund) müssen einen Kontrast von 3:1 zum Seitenhintergrund haben; gefüllte Sterne müssen einen Kontrast von 4,5:1 zum Hintergrund oder eine starke Umrandung haben.
• Responsivität: Bewertungslisten müssen fließend sein. Vermeiden Sie mehrspaltige Bewertungskarten auf Mobilgeräten; stapeln Sie alle Metadaten vertikal.

Häufige Fehlermuster

• Der "Binäre-Stern"-Fehler: Verwenden von Sternen, die nur "Ein" oder "Aus" sind, ohne Halbstern-Zustände, was Durchschnittswerte wie 4,3 falsch darstellt.
• Versteckte Verteilung: Anzeigen der Durchschnittsbewertung, aber nicht der Aufschlüsselung, sodass Benutzer das Volumen negativer vs. positiver Bewertungen nicht sehen können.
• Fehlende Verifizierung: Unterlassen der Unterscheidung zwischen einem verifizierten Käufer und einem allgemeinen Benutzer, was das Vertrauen in das gesamte System verringert.
• Die "Bewertungswand": Fehlende Sortierung oder Filterung, sodass Benutzer durch Hunderte irrelevanter Einträge scrollen müssen.
• Unzugängliche Eingaben: Verwenden einer reinen Symbol-Sternebewertungseingabe, die von reinen Tastaturbenutzern nicht erreicht oder ausgewählt werden kann.

Validierungskriterien

• Durchschnittsbewertung und Verteilungszusammenfassung sind vorhanden und scanbar.
• Einzelne Bewertungen haben eine klare Hierarchie (Benutzer -> Bewertung -> Inhalt).
• "Verifizierter Kauf"-Status wird visuell signalisiert.
• Sortier- und Filtersteuerelemente sind für Szenarien mit hohem Volumen vorhanden.
• Barrierefreiheit: Sternebewertungen haben beschreibende ARIA-Label.
• Interaktive Bewertungseingaben sind tastaturnavigierbar und haben Fokus-Zustände.
• Layout ist responsiv und stapelt Elemente auf kleineren Bildschirmen logisch.