aj3x/claude-skills

Design: Funktion zuerst, nichts Überflüssiges

Haltung

Gutes Design ist der kürzeste ehrliche Weg zwischen einem Menschen und dem, was er tun möchte. Form und Funktion ergänzen sich, und in den besten Arbeiten sind sie nicht zu unterscheiden. Form folgt Funktion (Sullivan); weniger, aber besser (Rams).

Vorrangregel: Wenn Form und Funktion in Konflikt geraten, gewinnt die Funktion. Immer. Schönheit wird durch Klarheit, Proportion und Passgenauigkeit verdient, niemals auf Kosten von Benutzerfreundlichkeit, Geschwindigkeit, Zugänglichkeit oder Ehrlichkeit erkauft. Nichts Überflüssiges, nichts Leichtfertiges: Jedes Element muss seine Existenz durch eine Aufgabe rechtfertigen, die es erfüllt.

Zurückhaltung ist nicht Langeweile. Das Ziel ist Design, das im Gebrauch verschwindet (Rams' „neutrale Werkzeuge“, Morrison und Fukasawas „supernormal“, Mujis „Leere“), nicht Design, das sich selbst ankündigt.

Entscheidungsablauf

Führe dies für jedes Element, jede Funktion, jede Stilwahl oder Animation durch:

1. Wessen Aufgabe dient dies? Nenne den Benutzer und das Ziel in einem Satz. Wenn du das nicht kannst, halte inne und finde es heraus.
2. Welche Aufgabe erfüllt dieses Element? (informieren, eine Aktion ermöglichen, gruppieren, orientieren, Feedback geben, Vertrauen aufbauen, Wiedererkennung unterstützen). Keine Aufgabe: Lösche es.
3. Kann es entfernt, zusammengelegt oder verschoben werden? Versuche, es zu entfernen. Wenn nichts verloren geht, bleibt es entfernt. Wenn eine Sache verloren geht, frage, ob ein einfacheres Element diese übernehmen könnte.
4. Beeinträchtigt es irgendeine Aufgabe? Überprüfe Geschwindigkeit, Klarheit, Fehlerrate, Zugänglichkeit, Ladezeit, Aufmerksamkeit. Jeder messbare Schaden für die Funktion unterliegt der Funktion, egal wie gut es aussieht.
5. Ist die einfachste Version ehrlich und vollständig? Bevorzuge das konventionelle Muster, es sei denn, es gibt einen funktionalen Grund, davon abzuweichen (Jakobs Gesetz).
6. Dann verfeinere die Form: Ausrichtung, Abstände, Rhythmus, Hierarchie, Konsistenz. Sorgfalt in diesem Stadium ist Gründlichkeit (Rams #8), nicht Dekoration.

Wenn zwei Optionen funktional gleichwertig sind, wähle die mit weniger Teilen, weniger Zuständen und weniger Wörtern.

Prinzipien in der Praxis

Quellenangaben befinden sich in references.md. Paraphrasiert, nicht zitiert.

Prinzip	In der Praxis
Rams: nützlich	Streiche alles, was der Aufgabe nicht dient. Funktionen, Farben, Rahmen, Symbole, Text.
Rams: verständlich	Die Schnittstelle erklärt sich selbst. Beschriftungen statt rätselhafter Symbole; sichtbarer Zustand; kein Handbuch nötig.
Rams: unaufdringlich	Das Chrome tritt zurück, der Inhalt führt. Neutrale Basispalette, eine Akzentfarbe für die primäre Aktion.
Rams: ehrlich	Keine vorgetäuschte Dringlichkeit, vorgetäuschter Fortschritt, übertriebene Behauptungen oder Steuerelemente, die etwas vorgeben. Laden zeigt den echten Zustand an.
Rams: langlebig	Vermeide Trend-Ticks (Glas, Verläufe um ihrer selbst willen, neuartige Layouts). Verwende beständige Typografie, Raster und Tokens.
Rams: gründlich	Randfälle, leere/Fehler-/Ladezustände, lange Zeichenfolgen und winzige Details sind Teil des Designs.
Rams: so wenig Design wie möglich	Reduziere auf das Wesentliche und überprüfe dann, ob das Wesentliche richtig ist.
Hicks Gesetz	Weniger, gruppierte Optionen. Eine primäre Aktion pro Ansicht; progressive Offenlegung für den Rest.
Fitts Gesetz	Häufige und primäre Ziele sind groß und nahe an dem, wo sich Zeiger/Daumen bereits befinden. Mindestens ~44px Touch-Ziele (24px CSS-Mindestwert gemäß WCAG 2.2).
Jakobs Gesetz	Verwende vertraute Muster (Nav-Position, Formularverhalten, Symbole). Neuheit braucht einen funktionalen Nutzen.
Millers Gesetz / Chunking	Verlasse dich nicht auf das Zählen von 7 Elementen; gruppiere Informationen in sinnvolle Blöcke und halte den Arbeitssatz klein.
Kognitive Last	Zeige nur, was gerade benötigt wird. Zwinge Benutzer nicht, sich über Bildschirme hinweg zu erinnern; trage Kontext nach vorne.
Doherty-Schwelle	Reagiere innerhalb von ~400ms. Darüber hinaus zeige sofortiges Feedback, Skelette oder optimistische Aktualisierungen; blockiere niemals still.
Teslers Gesetz	Komplexität bleibt erhalten. Absorbiere sie im System (Standards, Inferenz, Automatisierung), nicht beim Benutzer, es sei denn, deren Offenlegung ist der Zweck.
Postels Gesetz	Akzeptiere unterschiedliche Eingaben (Leerzeichen, Formate, Groß-/Kleinschreibung); gebe konsistente, strenge Ausgaben aus. Validiere sanft, erkläre präzise.
Gestalt: Nähe, gemeinsame Region, Ähnlichkeit, Verbundenheit	Gruppiere durch Abstände vor Rahmen, Rahmen vor Kästen. Abstände sind die billigste Struktur. Ähnliche Funktion, ähnliches Aussehen.
Ästhetik-Usability-Effekt	Politur lässt Dinge einfacher wirken und schafft Toleranz, kann aber echte Usability-Mängel überdecken. Teste mit echten Aufgaben; verwende es niemals als Grund, einen fehlerhaften Ablauf auszuliefern.
Von-Restorff-Effekt	Mache das eine wichtige Ding anders. Wenn alles hervorgehoben wird, wird nichts hervorgehoben.
Serielle Position, Peak-End	Platziere Schlüsselelemente zuerst/zuletzt in Listen und Abläufen; gestalte den letzten Schritt und Fehlermomente rücksichtsvoll.
Zeigarnik-, Zielgradienten-Effekt	Zeige Fortschritt bei mehrschrittigen Aufgaben und speichere Zwischenstände.
Tufte: Daten-Tinte	In Diagrammen und Tabellen sollte jede Markierung Daten tragen. Entferne Chartjunk, schwere Gitterlinien, 3D, redundante Legenden; beschrifte direkt.
Norman: Affordanzen, Signifikanten, Feedback	Steuerelemente sehen bedienbar aus; jede Aktion erhält sichtbare Bestätigung; ordne Steuerelemente Effekten zu; mache Fehler behebbar.
Vignelli / Müller-Brockmann	Ein Raster, eine winzige Schriftgrößenskala, wenige Schriftarten, konsistente Abstände. Einschränkung schafft Kohärenz.
Munari / Aicher	Löse das Problem mit den wenigsten Mitteln; Systeme vor Einzelanfertigungen; verwende Komponenten wieder, anstatt neue zu erfinden.
Krug	Zwinge die Leute nicht zum Denken. Gehe von Scannen, nicht Lesen aus. Offensichtlich schlägt clever.
Wroblewski	Formulare: weniger Felder, oben ausgerichtete Beschriftungen, Inline-Validierung, sinnvolle Voreinstellungen. Mobile-First erzwingt Prioritäten.
Frost (Atomic Design)	Baue aus kleinen wiederverwendbaren Teilen mit Tokens; Konsistenz kommt vom System, nicht von Wachsamkeit.
Tognazzini	Mache den Zustand sichtbar, schütze die Benutzerarbeit, halte Interaktionen umkehrbar, bevorzuge direkte Manipulation, halte Tastaturpfade bereit.
Ive / Rams Handwerkskunst	Löse Details, bis das Objekt unvermeidlich wirkt. Materielle Ehrlichkeit vor Ornament.

Checkliste zur Überprüfung

Funktion

• Die primäre Aufgabe ist schnell erledigbar, die primäre Aktion ist unübersehbar.
• Jedes Element hat eine benennbare Aufgabe; nichts Dekoratives ist übrig.
• Jedes interaktive Element hat Hover/Focus/Active/Disabled/Loading/Error-Zustände.
• Leere, Fehler-, Offline-, langsame und Langinhaltsfälle sind gestaltet.
• Aktionen sind umkehrbar oder erfolgen mit einer dem Risiko entsprechenden Bestätigung.
• Der Text ist klar, spezifisch und handlungsorientiert; Fehlermeldungen sagen, was passiert ist und wie man es behebt.
• Vertraute Muster werden verwendet, es sei denn, ein funktionaler Grund spricht dagegen.

Form (erst nach bestandener Funktionsprüfung)

• Klare Hierarchie: ein Fokuspunkt pro Ansicht; der Squint-Test ist bestanden.
• Einheitliches Raster, Abstandsskala und Schriftgrößenskala; wenige Schriftarten und -schnitte.
• Farbe ist begrenzt, zweckgerichtet und niemals der alleinige Bedeutungsträger.
• Ausrichtung und Rhythmus sind exakt; nichts ist „fast“ ausgerichtet.

Ehrlichkeit und Langlebigkeit

• Keine Dark Patterns, falsche Knappheit oder irreführende Affordanzen.
• Nichts hängt von einem vorübergehenden Trend ab.

Anti-Patterns

• Dekoration: ornamentale Verläufe, Schatten, Illustrationen, Symbole neben jeder Beschriftung, Rahmen um alles, Hintergründe, die den Kontrast verringern.
• Unnötige Bewegung: Animation, die eine Aufgabe verzögert, zur Aufmerksamkeitsschleife wird oder Parallaxe. Bewegung muss eine Änderung erklären (Ursprung, Hierarchie, Zustand) und für UI-Feedback unter ~200 bis 300ms bleiben. Respektiere prefers-reduced-motion.
• Dark Patterns: Bestätigungsbeschämung, versteckte Kosten, vorangehakte Opt-ins, getarnte Werbung, Roach-Motel-Kündigung, Nörgeln, gefälschte Countdowns, asymmetrische Buttons für Annehmen/Ablehnen bei gleicher Konsequenz.
• Mystery Meat: Nur-Symbol-Steuerelemente ohne Beschriftungen oder Tooltips, nur-Gesten-Aktionen ohne sichtbare Alternative.
• Auswahl-Dumping: Einstellungen und Optionen anstelle guter Voreinstellungen.
• Neuerfindung: benutzerdefinierte Bildlaufleisten, nicht standardmäßige Formularsteuerelemente, maßgeschneiderte Navigation um ihrer selbst willen.
• Betonungsinflation: alles fett, farbig oder mit Badge versehen.
• Stil über Inhalt: Den Container gestalten, bevor der Inhalt existiert; Lorem-Ipsum-Abnahmen.
• Verstecken durch Minimalismus: Entfernen von Beschriftungen, Affordanzen oder Zuständen, um sauber auszusehen. Minimal bedeutet wesentlich, nicht fehlend.
• Showcase zuerst: Das Portfolio-Foto sieht gut aus, die leeren und Fehlerzustände sind leer.

Basislinien (nicht verhandelbar)

Barrierefreiheit (WCAG 2.2 AA Minimum)

• Textkontrast 4,5:1 (3:1 für große Texte und UI-Grenzen/-Symbole).
• Vollständige Tastaturbedienung, logische Fokus-Reihenfolge, sichtbarer Fokus-Indikator.
• Semantisches HTML zuerst; ARIA nur zum Füllen von Lücken. Beschriftungen für alle Eingaben; Alt-Text für aussagekräftige Bilder.
• Vermittle Bedeutung niemals allein durch Farbe. Unterstütze Zoom auf 200% und Textgrößenänderung ohne Verlust.
• Ehre prefers-reduced-motion und prefers-color-scheme. Kein Inhalt, der mehr als 3 Mal pro Sekunde blinkt.
• Ziele mindestens 24x24 CSS px an, strebe 44x44 auf Touch-Geräten an.

Responsives Design

• Designe Inhalt zuerst und Mobile-First; Layout passt sich dem Inhalt an, mit Breakpoints, die dort gesetzt werden, wo der Inhalt bricht, nicht bei Gerätenamen.
• Kein horizontaler Scroll bei 320px Breite. Relative Einheiten, fließende Typografie, min()/clamp().
• Fließtext ~16px Minimum, Zeilenlänge ~45 bis 75 Zeichen, Zeilenhöhe ~1,4 bis 1,6.
• Touch und Zeiger funktionieren beide; Hover ist niemals der einzige Pfad.

Leistung als Design

• Schnell ist eine Funktion: schlanke Assets, kein Layout-Shift, Systemschriftarten oder wenige Webschriften, sinnvoller Inhalt vor Anreicherung.

Wann die Form vorangehen darf (enge Ausnahmen)

Die Form darf nur dann die Führung übernehmen, wenn sie der Funktion dient. Jede Verwendung muss die Funktion benennen:

• Wiedererkennung: Markenzeichen, Farbe oder konsistente visuelle Signatur, die hilft, ein Produkt zu identifizieren und ihm zu vertrauen.
• Vertrauen und Glaubwürdigkeit: professioneller Schliff, dessen Fehlen ein Risiko signalisiert (Zahlungen, Gesundheit, Sicherheit).
• Lesbarkeit und Scannen: typografische Skala, Weißraum und Kontrast, die das Lesen und Finden erleichtern.
• Emotionale Passung zur Aufgabe: an den Kontext angepasster Ton (ruhig für medizinische Zwecke, verspielt für Kinderlernen), wenn die Stimmung die Erledigung oder den Komfort beeinflusst.
• Freude mit einer Aufgabe: ein einzelner, kurzer, überspringbarer Moment, der Erfolg bestätigt oder einen Mechanismus erklärt (niemals auf häufigen oder blockierenden Pfaden).
• Kuratierte Kontexte: redaktionelle, Marketing-, Spiel- und Portfolio-Kontexte, in denen das Erlebnis selbst das Produkt ist. Auch dort bleiben Navigation, Lesen und Kaufpfade funktionsorientiert.

Wenn die Ausnahme nicht als „dies hilft dem Benutzer, X zu tun“ formuliert werden kann, ist es keine Ausnahme.

Arbeitsmethode

1. Beschreibe Benutzer, Aufgabe und Einschränkungen in 2 bis 3 Sätzen.
2. Inhalt und Struktur zuerst (Informationshierarchie, Ablauf), visuelles zuletzt.
3. Verwende echte Inhalte, echte Datenmengen und echte Randfälle.
4. Beginne mit der schlichtesten konventionellen Lösung; füge nur das hinzu, was ein Test oder ein genannter Bedarf rechtfertigt.
5. Überprüfe mit der Checkliste; lösche, bevor du hinzufügst.
6. Wenn du eine Designentscheidung meldest, nenne die Funktion, der sie dient, und sage explizit, ob eine gefälligere Option abgelehnt wurde, weil sie die Funktion beeinträchtigt hat.