Was macht Experience Design?
Das ux-ui-kit macht Oberflächen korrekt: Token, Komponenten, Zustände, Barrierefreiheit, geprüfte Darstellungen. Diese Fähigkeit entscheidet, wie die Oberfläche sich anfühlen und in Erinnerung bleiben soll, und verwandelt das in konkrete Entscheidungen, die das Kit umsetzen kann. Sie beantwortet: Was soll als Erstes auffallen, was muss vertraut bleiben, wo verdient Originalität ihren Platz, was bewegt sich und was bleibt still, wie kommunizieren Interaktionen, wo liegt der Höhepunkt des Erlebnisses und wie endet es, und was bleibt übrig, wenn die beeindruckende Schicht entfernt wird.
Wo dies einzuordnen ist
| Ebene | Zuständigkeit | Fähigkeit |
|---|---|---|
| Website-Strategie | was die Website erreichen und sagen muss, Seitenstruktur, Beweis, Vertrauen, Conversion, SEO | website-excellence |
| Experience Direction (diese Fähigkeit) | Aufmerksamkeit, Vertrautheit und Originalität, Art Direction, Komposition und Rhythmus, Interaktion, Bewegung, besondere Momente, Anpassung, erfahrungsbasierte Validierung | experience-design |
| Umsetzung und Verifikation | Token, Komponenten, Code, Text, Gates | apply-aesthetic, brandkit, design-tokens, design-component, design-code, image-to-code, ux-writing, prototype, redesign, design-review, a11y-audit, performance, design-qa |
Verwende strategischen Kontext nur, wenn er eine Interface-Entscheidung beeinflusst. Wenn das Publikum, das Angebot oder der Seitenzweck einer Website ungeklärt ist, hole es zuerst von website-excellence oder nenne die Annahme und fahre fort. Produkt-UIs, Apps und Dashboards kommen direkt hierher.
Schritt 0: Den Prozess skalieren
Wähle die Tiefe, bevor du irgendetwas anderes tust. Die Frameworks in den Referenzen sind Werkzeuge für das Urteilsvermögen, keine Phasen, die jede Anfrage durchlaufen muss.
| Modus | Verwende für | Was zu produzieren ist |
|---|---|---|
| Quick | eine Komponente, einen Zustand, eine Bildschirm-Anpassung oder -Korrektur innerhalb eines etablierten Systems | Lies das Design-Entscheidungsprotokoll des Projekts, falls vorhanden. Aufmerksamkeitsreihenfolge für die betroffene Ansicht, eine Interaktions- oder Bewegungskarte nur für das, was sich ändert, den Anti-Pattern-Scan, dann bauen. Keine These-Abhandlung. |
| Standard | eine neue Seite, einen Ablauf oder eine Bildschirmfamilie, oder das Redesign einer solchen | Experience Brief und These, Aufmerksamkeitskarte, Neuartigkeitsbudget, eine Richtung (Alternativen nur bei einem echten Kompromiss), Rhythmus-Karte, Interaktions- und Bewegungskarte, Anpassungsnotizen, Selbstkritik, Entscheidungsprotokoll. |
| Signature | eine markenprägende Site oder einen Launch, ein Identitäts-Redesign oder eine explizite Anfrage nach etwas Einprägsamem | Alles aus Standard, plus Konzepterkundung (drei wirklich unterschiedliche Richtungen, verglichen, eine ausgewählt), gestaltete besondere Momente, ein Prototyp des riskantesten Teils und ein Plan zur Validierung des Erlebnisses. |
Zurückhaltungs-Check. In einem Behördendienst, Checkout, Authentifizierung, Einstellungen, Dokumentation, einem operativen Dashboard oder einer medizinischen oder finanziellen Aufgabe ist das Neuartigkeitsbudget in Aufgabenpfaden nahe Null. Persönlichkeit lebt in Typografie, Klarheit, Ton, Präzision und der Qualität des Feedbacks. Zu wissen, wann Zurückhaltung die stärkere Entscheidung ist, gehört zum Job.
Der Kreislauf
Führe die Schritte aus, die der Modus benötigt. Jeder verweist auf die Referenz, die die Methode enthält.
- Verstehen. Schreibe den Experience Brief: Benutzerabsicht, Ankunftskontext, primäre Aufmerksamkeit, Ergebnis, Ton, was vertraut bleibt, Einschränkungen, woran man sich erinnern soll. [01]
- Ausrichten. Schreibe die Experience These und die Aufmerksamkeitshierarchie (Stufen 1 bis 4) für jede wichtige Ansicht. Die These filtert jede spätere Entscheidung. [01]
- Erkunden (Signature, oder wenn die erste Idee die Kategorie-Vorgabe ist). Drei Richtungen, die sich im Konzept unterscheiden, nicht in der Farbe; vergleiche konservativ, differenziert und gewagt; wähle aus; protokolliere, was abgelehnt wurde und warum. Höre auf zu erkunden, sobald die Wahl klar ist. [02]
- Anleiten. Lege drei bis sieben Art-Direction-Regeln fest und übersetze die These in Konsequenzen für Layout, Schriftart, Skalierung, Raum, Dichte, Farbe, Bildsprache, Oberflächen, Komponenten, Interaktion, Bewegung und reaktives Verhalten. [02]
- Komponieren. Zeichne die Rhythmus-Karte: Aufgabe jedes Abschnitts, Dichte und Intensität, wo Stille sitzt, wo der Höhepunkt ist, wie es endet. Lass den Inhalt seine Form wählen, anstatt Überschrift, Absatz, drei Karten. [03]
- Interagieren. Schreibe Interaktionskarten für bedeutungsvolle Interaktionen (Absicht, Affordanz, Auslöser, Reaktion, Feedback, Zustand, Wiederherstellung, Kontinuität) und decke Lade-, Leer-, Fehler-, Erfolgs-, Unterbrochen- und Randzustände ab. [04]
- Choreografieren. Erstelle die Bewegungskarte: was sich bewegt, was still bleibt, eine Bewegungskarte pro signifikanter Bewegung mit ihrer Budget-Klasse und einer gestalteten Version für reduzierte Bewegung. [05]
- Höhepunkt. Wähle null bis drei besondere Momente und führe den Signature-Test für jeden durch. [06]
- Anpassen. Entscheide das Erlebnis neu für kleine Bildschirme, Touch, Tastatur, Zoom und Refkow, reduzierte Bewegung und leistungsschwache Geräte; definiere die Degradationsleiter. [07]
- Stresstest und Überarbeitung. Führe wichtige Entscheidungen durch den Entscheidungsfilter und ambitionierte durch den Realitätscheck der Implementierung; dann den Anti-Pattern-Scan, Austauschbarkeitstest, Konzeptintegritätstest und Selbstkritik aus sieben Perspektiven; entferne dann, was seinen Platz nicht verdient. [08]
- Übergabe und Verifikation. Gib das Experience Spec an die Build-Fähigkeiten weiter. Führe die Kit-Gates und
motion_audit.mjsaus; rendere und schaue bei etwa 375 und 1440 px, nur Tastatur, mit emulierter reduzierter Bewegung. [07, 08] - Validieren, verfeinern und erinnern. Teste die riskantesten Annahmen mit der billigsten Methode, die sie beantworten kann; behebe die Schwächen mit der größten Auswirkung, anstatt Details mit geringem Wert zu polieren; aktualisiere das Design-Entscheidungsprotokoll. [08]
Nicht verhandelbar
- Mach das Notwendige vertraut; mach das Bedeutungsvolle unverwechselbar. Navigation, Formulare, Checkout, Authentifizierung, Suche, Einstellungen und Fehlerbehebung behalten konventionelles Verhalten, es sei denn, Publikumsdaten unterstützen eine Änderung. Drücke die Marke um sie herum aus.
- Barrierefreiheit ist ein Design-Input. WCAG 2.2 AA ist die Untergrenze. Nichts Wesentliches hängt allein von Hover, Drag, Bewegung, Farbe oder Ton ab. Jede Bewegung hat eine gestaltete Version für reduzierte Bewegung, nicht nur eine gelöschte.
- Keine Bewegung ohne Aufgabe. Jede signifikante Bewegung benennt, was sie kommuniziert, und ihre Budget-Klasse: essentiell, verbessernd, ausdrucksstark, experimentell oder vermeiden.
- Keine Interaktion ohne Feedback und Wiederherstellung. Jede bedeutungsvolle Aktion wird innerhalb von etwa 100 ms bestätigt und kann rückgängig gemacht, abgebrochen oder wiederholt werden, wo das sinnvoll ist.
- Jede Verbesserung hat einen Fehlermodus. Inhalte und Kernaufgaben funktionieren noch, wenn JavaScript, schwere Medien und Animationen entfernt werden.
- Variation muss Bedeutung tragen. Ändere Komposition, Dichte oder Intensität, weil Inhalt, Rhythmus, Hierarchie oder Emotion danach verlangen, niemals nur, um Wiederholung zu vermeiden.
- Referenzen geben Prinzipien, keine Oberflächen. Baue niemals die Identität eines echten Unternehmens für jemand anderen nach; extrahiere, warum eine Referenz funktioniert und drücke sie anders aus.
- Gib Neuartigkeit aus, streue sie nicht. Typisches Budget: Quick 0, Standard 0 bis 1, Signature 1 bis 2 ungewohnte Ideen, konzentriert dort, wo sie Bedeutung oder Erinnerung schaffen.
- Kennzeichne Vertrauen bei materiellen Behauptungen (unten) und behaupte niemals ein Ergebnis, das du nicht gemessen hast (Kit-Verifikationsprotokoll).
- Skaliere Analyse auf die Entscheidung. Keine Theorie für offensichtliche Entscheidungen; entscheide und mach weiter.
Ausgabe: das Experience Spec
Fülle templates/experience-spec.md in der Tiefe des Modus aus: etwa zehn Zeilen für Quick, eine bis zwei Seiten für Standard, zwei bis vier für Signature. Während des Bauens ist das Spec ein Arbeitsplan, der den Code antreibt; halte seine Sprache aus Seitenkopien und Code-Kommentaren heraus und fasse nur die Entscheidungen zusammen, die bei der Übergabe wichtig sind. Für Standard- und Signature-Arbeiten schreibe oder aktualisiere das Design-Entscheidungsprotokoll des Projekts aus templates/design-decision-record.md und lies es zuerst bei jeder späteren Aufgabe in diesem Projekt.
Übergaben
| Hier getroffene Entscheidung | Ausgeführt von |
|---|---|
| Art-Direction-Regeln werden zu Token (Farbrollen, Schriftart, Raum, Radius, Tiefe, Bewegungsmodus und Dauern) | brandkit für eine neue Grundlage oder apply-aesthetic für eine bestehende, dann design-tokens |
| Komponenten und ihre Zustände, aus den Interaktionskarten | design-component, dann design-code |
| Seiten und Bildschirme aus dem Spec | design-code, oder image-to-code beim Bauen aus einer Referenz |
| Upgrade einer bestehenden UI nach der Generizitätsdiagnose | redesign |
| Texte für Aktionen, Fehler, leere Zustände und Feedback | ux-writing |
| Prototypen von besonderen Momenten und riskanten Interaktionen | prototype |
| Gates: Kontrast in allen Zuständen, axe, Focus Traps, responsiver Überlauf, Geschmack, Bewegung | a11y-audit, design-qa, performance und node ~/.claude/ux-ui-kit/scripts/motion_audit.mjs <page> |
| Bewertete Überprüfung eines Bildschirms durch die Grundlagen- und Experience-Linse | design-review |
Die Regeln des Kits binden den Bau weiterhin: nur Token, die 8 Komponentenzustände, das Verifikationsprotokoll in ~/.claude/ux-ui-kit/CLAUDE.md, kein Emoji.
Vertrauenslabel
Verwende sie bei Empfehlungen, die ein Leser für eine Tatsache halten könnte. Kennzeichne nicht jeden Satz.
| Label | Bedeutung | Website-Excellence-Äquivalent |
|---|---|---|
| Vertrauenswürdige Konvention mit hohem Vertrauen | weit verbreitetes Muster mit starkem Nutzwert | Aktuelle Konvention oder Standard |
| Evidenzgestützte Leitlinie | gestützt durch einen Standard oder relevante Forschung; sage, was die Evidenz abdeckt | Standard / Anforderung, Starke Evidenz |
| Projektspezifische Ableitung | abgeleitet aus diesen Nutzern, Einschränkungen und Zielen; nenne die Annahme | Ableitung |
| Kreative Hypothese | ein Urteil, das ein Gefühl oder eine Erinnerung erzeugen soll; testbar, nicht durch Forschung beweisbar | Praktische Heuristik |
| Experimentelle Gelegenheit | neuartig, unsicheres Ergebnis; begründe es und teste es, bevor du dich darauf verlässt | Begrenzte/kontextuelle Evidenz, plus Validierungsplan |
Forschung kann Einschränkungen setzen und Risiken aufzeigen. Sie kann nicht die eine richtige Art Direction auswählen.
Referenzen
Lade nur das, was der Modus und das Problem benötigen.
- 01 Brief, These und Aufmerksamkeit: Experience Brief, These, die drei Ebenen der Reaktion, Aufmerksamkeitshierarchie, Verhältnismäßigkeit nach Kontext, wann Zurückhaltung gewinnt.
- 02 Konzepte und Art Direction: kreative Territorien, konzeptioneller Unterschied, Richtungskarten und Vergleich, Absicht zur Umsetzung, Typografie, Farbe, Bildsprache, Oberflächen, Verwendung von Referenzen und der Stilbibliothek.
- 03 Komposition, Rhythmus und Inhalt: Gestaltung über die Zeit, die Rhythmus-Karte, Kontrast und Rhythmus, Dichte und Pause, inhaltsgeformte Oberflächen, Karten, Kompositionswerkzeuge.
- 04 Interaktionsdesign: Interaktionskarten, der Kommunikationstest, Neuartigkeitsbudget, Feedback-Zeit, optimistische Updates, Rückgängig, Formulare, Erlebniszustände, Eingabeparität, Transformation von Mustern, signifikante Interaktionen, wiederholte Nutzung.
- 05 Bewegungssystem: Evidenz, Aufgaben der Bewegung, Budget-Klassen, Bewegungskarte und Karten, Timing, Easing und Federn, Choreografie, scrollgebundene Bewegung, View Transitions, reduzierte Bewegung als Design, Leistung, mobil, Werkzeuge, Testen.
- 06 Besondere Momente: Momenttypen, Einprägsamkeit ohne Spektakel, Höhepunkt und Ende, Auswahl, der Signature-Test, stille Formen, Prototyping.
- 07 Anpassung und Degradation: Responsive als Anpassung, Eingabe- und Fähigkeitsabfragen, Container Queries, Zoom und Refkow, Reichweite, Geräte-Stufen, die Degradationsleiter, Fehlermodi, Barrierefreiheit für ausdrucksstarke Funktionen, Rendering-Checks.
- 08 Kritik, Validierung und Erinnerung: der Entscheidungsfilter, Implementierungs-Realitätscheck, KI-Anti-Pattern-Scan, Austauschbarkeits- und Integritätstests, Selbstkritik-Kreislauf, radikale Überarbeitung, Handwerksdurchgang, Validierungsmethoden für Klarheit und Gefühl, das Design-Entscheidungsprotokoll.