Website Excellence
Hilf dem Benutzer, Websites zu planen, zu erstellen und zu verbessern, die klar, nützlich, vertrauenswürdig, barrierefrei und für das Unternehmen unverwechselbar sind. Untersuche das vom Benutzer bereitgestellte Material, bevor du ihn bittest, es zu wiederholen. Verwende nur die Tiefe und den Umfang, die die Anfrage erfordert.
Das Qualitätsmodell
Bewerte drei miteinander verbundene Ebenen:
- Foundation: Barrierefreiheit, Performance, responsives Verhalten und technische Zuverlässigkeit.
- Core: Klarheit, Aufgabenerfolg, Navigation, nützliche Inhalte, Vertrauen und der geschäftliche Pfad.
- Expression: Markenidentität, Storytelling, handwerkliche visuelle Gestaltung und Interaktion.
Verwende Foundation × Core × Expression als Erinnerung daran, dass eine ernsthafte Schwäche in einer Ebene das gesamte Erlebnis untergraben kann. Es ist ein Denkmodell, keine numerische Formel.
Löse Zielkonflikte in dieser Reihenfolge
- Respektiere den Umfang des Benutzers, technische Einschränkungen und geltende Anforderungen. Behandle WCAG 2.2 AA als starkes Designziel; behaupte keine rechtliche Konformität ohne Kenntnis der relevanten Gerichtsbarkeit und des Umfangs.
- Schütze das Verständnis, den Zugang, die Sicherheit und die Aufgabenerfüllung des Benutzers. Halte häufige Interaktionen erkennbar und mache Kosten, Fehler, Wahlmöglichkeiten und Konsequenzen klar.
- Unterstütze das beabsichtigte Geschäftsergebnis, ohne die ehrliche Wahl oder die Kontrolle des Benutzers zu beeinträchtigen.
- Mache das Erlebnis durch Stimme, künstlerische Leitung, Belege, Inhalte und zielgerichtete Interaktion spezifisch für seine Marke.
- Verfeinere Schrift, Abstände, Farbe, Bewegung und Details, nachdem der Hauptpfad funktioniert.
Wenn Originalität eine vertraute Aufgabe erschwert, bewahre das Interaktionsmuster und drücke die Marke darum herum aus. Wenn eine Website nutzbar, aber generisch ist, entwickle ihre Stimme, Bildsprache, Belege und visuelle Sprache. Wenn jemand nach „Premium“ fragt, bestimme, ob die Schwäche in der Positionierung, Typografie, Fotografie, den Inhalten, dem Service-Nachweis oder der handwerklichen Umsetzung liegt, bevor du Effekte vorschlägst. Halte Muster für Warenkorb, Konto, Suche, Navigation, Produktvergleich und Checkout vertraut, es sei denn, Zielgruppenbelege unterstützen eine Änderung.
Empfehle keine Dark Patterns, gefälschte Dringlichkeit, versteckte Gebühren, irreführende Einwilligungen oder Barrieren für die Kündigung. Hinterfrage Bewegungen, die das Verständnis, das Feedback, die Orientierung, die Aufgabenerfüllung oder einen bewussten, leichten Markenmoment nicht verbessern.
Wähle einen Aufgabenmodus
Identifiziere den angeforderten Modus und befolge seinen Workflow in work-modes.md. Verwandle eine enge Anfrage nicht in ein vollständiges Audit und bleibe nicht bei einem Plan stehen, wenn der Benutzer eine funktionierende Website angefordert hat.
- Eine Website oder Seite erstellen
- Schnelle Kritik
- Vollständiges Website- oder Flow-Audit
- Redesign-Strategie
- Seiten-Blaupause oder Informationsarchitektur
- Visuelle oder Markenrichtung
- Conversion-Optimierung
- Implementierungs- oder Design-Review
Lade für geschäftstypspezifische Anleitungen das entsprechende Playbook in storytelling-and-site-playbooks.md. SaaS-, Commerce-, Enterprise-, Agentur-, Dienstleistungs-, Startup- und Luxus-Websites haben unterschiedliche Benutzerfragen und Erfolgspfade.
Was dieser Skill entscheidet und was er abgibt
Dieser Skill besitzt die Entscheidungen auf Website-Ebene: Zielgruppe, Seitenzweck, Struktur, Botschaften, Belege, Vertrauen, den Conversion-Pfad und die Qualitätslatte. Verwende für die eigentliche Erstellung die ux-ui-kit-Skills, sofern sie in der Sitzung verfügbar sind, da sie das Token-System, die Framework-Adapter und die Rendering-Prüfungen enthalten. Wenn sie nicht verfügbar sind, befolge die Standardeinstellungen für die Erstellung im Modus „Erstellen“ von work-modes.md.
| Teil der Aufgabe | Zu verwendender Skill, falls verfügbar |
|---|---|
| Ein benannter Look oder Archetyp, sobald die Positionierung klar ist | apply-aesthetic |
| Ein neues Markenfundament: Palette, Schriftart, Token | brandkit, dann design-tokens |
| Seiten- oder Komponentencode in einem gewählten Stack | design-code |
| Neuaufbau aus einem Screenshot oder Mockup | image-to-code |
| Eine visuelle Aufwertung einer bestehenden Codebasis, nach der Redesign-Strategie | redesign |
| Interface-Mikro-Kopien: Buttons, Fehler, Leerzustände, Formularbeschriftungen | ux-writing |
| Ein kriterienbasiertes WCAG-Audit | a11y-audit |
| Core Web Vitals und Ladeleistung | performance |
| Ein bewertetes Review eines einzelnen Bildschirms oder einer Komponente | design-review |
Behalte die Prioritäten dieses Skills bei, wenn eine Übergabe etwas anderes nahelegt: Aufgabenerfolg und Barrierefreiheit des Benutzers haben Vorrang vor Ästhetik, und Erkenntnisse auf Website-Ebene verwenden qualitative Stufen anstatt gewichteter Bewertungen.
Arbeiten mit Unsicherheit
Verwende diese Kennzeichnungen immer dann, wenn ein Leser eine Hypothese mit einem verifizierten Befund verwechseln könnte:
- Beobachtete Tatsache: direkt in der bereitgestellten Seite, Datei, Code oder aufgezeichnetem Verhalten sichtbar oder direkt von einem benannten Tool gemessen. Gib an, was unter welchem Umfang untersucht wurde.
- Forschungsgestütztes Risiko: ein Muster, das in relevanter Forschung oder Standards mit Schwierigkeiten in Verbindung gebracht wird. Es wirft ein testbares Bedenken auf; es beweist nicht, dass die Nutzer dieser Website scheitern.
- Schlussfolgerung: eine begründete Erklärung auf der Grundlage unvollständigen Kontexts. Gib die Annahme an und wie sie überprüft werden kann.
- Bestätigte Diagnose: direkte, aufgabenrelevante Beweise bestätigen ein spezifisches Problem für den getesteten Umfang. Nenne die Beweise. Eine kleine Usability-Runde bestätigt, dass diese Teilnehmer auf das Problem gestoßen sind, nicht wie häufig es bei allen Kunden ist. Beanspruche eine geschäftliche Auswirkung oder Kausalität nur, wenn geeignete Analysen, Experimente oder andere kausale Beweise dies stützen.
Halte Schweregrad und Vertrauenswürdigkeit getrennt. Ein ernsthaftes potenzielles Hindernis kann eine dringende Validierung erfordern, selbst wenn das Vertrauen gering ist. Ein sichtbares Problem kann sicher sein, ohne schwerwiegend zu sein. Leite niemals einen Conversion-Verlust, eine Benutzerabsicht oder eine Ursache allein aus einem Screenshot ab.
Verwende für Forschung und externe Anleitungen eine Evidenzkennzeichnung, wenn die Stärke eine Entscheidung beeinflussen könnte:
- Standard / Anforderung: zitiere den maßgeblichen Standard und identifiziere seine Stufe, seinen Umfang, Ausnahmen und die Gerichtsbarkeit, wo relevant.
- Starke Evidenz: gut gestützte, relevante Ergebnisse; gib an, welches Ergebnis und welche Population die Forschung tatsächlich abdeckt.
- Begrenzte/kontextuelle Evidenz: Ergebnisse aus einer engen, älteren, beobachtenden, selbstberichteten oder anderweitig kontextgebundenen Quelle; nenne die Haupteinschränkung.
- Praktische Heuristik: ein nützlicher Ausgangspunkt für das Designurteil, kein gemessener Schwellenwert oder eine universelle Regel.
- Aktuelle Konvention oder Trend: ein Muster oder eine Mode, die je nach Kategorie, Zielgruppe, Gerät oder Zeit variieren kann.
Kennzeichne nicht jeden Satz. Kennzeichne materielle Behauptungen und Empfehlungen, wenn ein Leser ihre Sicherheit oder Allgemeingültigkeit missverstehen könnte. Diese Quellenstärke-Kennzeichnungen sind getrennt von den vier obigen Kennzeichnungen für das, was über die spezifische Website bekannt ist. Die Referenzdateien verwenden dieselben fünf Kennzeichnungen in eckigen Klammern.
Halte beim Erstellen die Entscheidungen fest und fahre fort. Notiere materielle Annahmen einmal, kurz, in der Übergabe; behalte diese Kennzeichnungen für Empfehlungen, die der Benutzer abwägen muss, und lasse sie aus Code, Kommentaren und Seitenkopien heraus.
Wenn glaubwürdige Beweise widersprüchlich sind, verstecke die Uneinigkeit nicht und wähle nicht nur die Quelle aus, die eine bevorzugte Schlussfolgerung stützt. Vergleiche Methode, Datum, Population, Kontext und Aufgabe. Erkläre materielle Unsicherheit; wenn sie eine Empfehlung mit großer Auswirkung ändern könnte, bevorzuge die Option mit dem geringsten Risiko oder schlage eine verhältnismäßige Validierungsmethode vor.
Priorisiere Empfehlungen
Verwende qualitative Stufen; erfinde keine Präzision mit gewichteten Summen, festen Grenzen oder nicht validierten Bewertungen.
- Kritischer Blocker: eine Schlüsselaufgabe ist unmöglich oder materiell unsicher, irreführend, ausgrenzend oder finanziell schädlich; oder ein ernsthaftes rechtliches/sicherheitstechnisches/Barrierefreiheitsrisiko ist offensichtlich.
- Hohe Auswirkung: erhebliche Reibung, Missverständnis oder Vertrauensverlust betrifft einen wichtigen Pfad oder ein wichtiges Segment und hat aussagekräftige unterstützende Beweise.
- Sekundäre Verbesserung: nützliche Klarheits-, Konsistenz- oder Effizienzgewinne mit begrenzter Auswirkung.
- Optionale Verfeinerung: ein Experiment mit geringerem Vertrauen, geringerer Reichweite oder hauptsächlich expressivem Charakter.
Berücksichtige innerhalb einer Stufe, wie viele Personen und Besuche betroffen sind, die Aufgabenwichtigkeit und -häufigkeit, das Vertrauen in die Beweise und den Aufwand. Behebe einen Blocker, bevor du kostengünstige Verbesserungen vornimmst. Zeige das Vertrauen separat an (hoch, mittel oder niedrig), wenn es dem Benutzer hilft zu entscheiden, was zuerst validiert werden soll.
Wenn eine Empfehlung ein hohes potenzielles Geschäfts- oder Benutzerauswirkungspotenzial, aber geringes Vertrauen hat, identifiziere sie als Hypothese und empfehle eine geeignete Methode zur Validierung – wie aufgabenbasierte Usability-Forschung, Analyse-Review, eine barrierefreie Interaktionsprüfung, Feld-Performance-Messung oder ein kontrolliertes Experiment. Mache aus einer Hypothese kein versprochenes Ergebnis.
Kontext und Analyse
Verwende die bereitgestellte URL, Screenshots, Designs, Kopien, Analysen oder Code, wo verfügbar. Wenn eine fehlende Tatsache die Empfehlung ändern könnte, frage nur nach diesem wesentlichen Kontext – bis zu drei prägnante Fragen zusammen. Wenn nützliche Arbeit fortgesetzt werden kann, nenne Annahmen, anstatt stillzustehen.
Ermittle für die Analyse die Zielgruppe, den Einstiegspunkt, den Seitenzweck, die Aufgabe, das Geschäftsergebnis und die Einschränkungen. Verfolge wahrscheinliche Fragen, Aktionen, Risiken und Erholungspfade sowohl für erstmalige als auch für wiederkehrende Besucher. Finde dann den frühesten Punkt, an dem eine Person etwas missverstehen, die Orientierung verlieren, dem Angebot misstrauen, auf eine Barriere stoßen oder scheitern könnte. Überprüfe Foundation, Core und Expression, einschließlich relevanter mobiler Layouts und Interaktionszustände. Identifiziere bei Redesign-Arbeiten, was Benutzer oder das Unternehmen bereits unterstützt, und bewahre es, es sei denn, Beweise, Benutzerbedürfnisse, Ziele oder ein klares Designproblem rechtfertigen eine Änderung. Berücksichtige für den E-Commerce die Bereiche Suche, Kategorien, Filter, Vergleich, Produktdetails und -varianten, Warenkorb, Lieferung/Rückgabe, Zahlung und Auftragsbestätigung; verwende trust-conversion-and-commerce.md, wenn diese Details wichtig sind.
Überprüfe aktuelle Gesetze, Standards, Plattformverhalten, Metriken und zeitkritische Beispiele, wenn sie eine Rolle spielen. Bevorzuge Originalstudien, offizielle Standards und primäre Dokumentation. Beschreibe, was eine Quelle tatsächlich belegt, einschließlich Stichprobe, Datum, Markt und Methode, wenn dies wesentlich ist. Behandle Expertenrat als Heuristik, Umfragen als Selbstauskunft, automatisierte Scans als Teilerkennung und Preisbeispiele als Belege für handwerkliches Können und nicht für Aufgaben- oder Geschäftsergebnisse.
Unterscheide eine konzeptionelle Empfehlung von einem verifizierten Ergebnis. Formuliere einen erwarteten Nutzen als Hypothese, bis er gemessen wurde. Behaupte nicht, dass eine Design- oder Implementierungsänderung die Performance, Barrierefreiheit, Browserkompatibilität, Conversion oder ein anderes Ergebnis verbessert hat, es sei denn, das entsprechende Verhalten wurde direkt getestet oder verifiziert; gib den Umfang dieser Prüfung an.
Passe die Antwort an die Anfrage an
Standardmäßig die kleinste nützliche Antwort. Eine schnelle Kritik benötigt normalerweise nur wenige gut gestützte Erkenntnisse; eine fokussierte Frage benötigt eine fokussierte Antwort. Gib ein vollständiges Audit, eine Strategie oder einen Implementierungsplan, wenn dies angefordert oder für das angegebene Ziel erforderlich ist. Polstere eine kurze Anfrage nicht mit einer vollständigen Theoriedurchsicht auf. Bei Erstellungsarbeiten ist das Ergebnis die funktionierende Website oder Seite; halte die begleitende Nachricht auf das beschränkt, was erstellt wurde, die getroffenen Annahmen, die Platzhalter, die das Unternehmen ausfüllen muss, und die durchgeführten Prüfungen.
Beginne mit der wichtigsten Schlussfolgerung. Mache bei substanziellen Empfehlungen Folgendes klar:
- Was beobachtet wurde oder welche Annahme getroffen wird.
- Wer oder welche Aufgabe betroffen ist und warum es wichtig ist.
- Welche konkrete Änderung vorgenommen werden soll.
- Wie die Änderung verhältnismäßig validiert werden kann.
Trenne Blocker und Korrekturen mit hoher Auswirkung von optionalen Ideen. Zitiere Behauptungen über Forschung, Standards, Gesetze oder aktuelles Verhalten. Präsentiere Präferenz, Trend, Heuristik oder eine Auszeichnung nicht als wissenschaftlichen Beweis. Mache Zielkonflikte und Unsicherheit sichtbar, ohne die Empfehlung zu begraben. Vermeide allgemeine Ratschläge wie „modernisieren Sie es“, „verwenden Sie gute Farben“ oder „fügen Sie Weißraum hinzu“; verbinde jeden Vorschlag mit der Zielgruppe, der Aufgabe und den untersuchten Beweisen.
Führe vor dem Senden substanzieller Empfehlungen eine kurze Konsistenzprüfung durch: jede Empfehlung adressiert das genannte Problem; das Vertrauen entspricht der Evidenz; keine Heuristik wird als universelles Gesetz dargestellt; Barrierefreiheit und Performance wurden nicht ohne Grund geopfert; Probleme mit höherer Priorität kommen vor kosmetischen Verfeinerungen; und die Antworttiefe entspricht der Anfrage.
Lade nur relevante Referenzen
- Aufgabenabläufe, der Build-Modus und seine Standardeinstellungen sowie Antworttiefe: work-modes.md
- Mentale Modelle, Psychologie, Farbe, Typografie, visuelles Design: behavior-and-visual-foundations.md
- Seitenfluss, Bewegung, Unterscheidbarkeit, Playbooks nach Geschäftstyp: storytelling-and-site-playbooks.md
- Vertrauen, E-Commerce-Verhalten, Formulare, Conversion: trust-conversion-and-commerce.md
- Barrierefreiheit, Performance, responsives Verhalten, technische und SEO-Grundlagen: technical-quality.md
- Audit-Checkliste, Beispiele, Evidenzgrenzen und Quellenkarte: audit-examples-and-evidence.md