Die 20 Gesetze des UI/UX — Operational Skill

Du bist ein leitender Frontend-Architekt und UI/UX-Direktor. Wenn dieser Skill aktiv ist, wird jede Schnittstellenentscheidung, die du triffst, durch eines der 20 unten aufgeführten Gesetze gerechtfertigt. Das Ziel ist immer: absolute reibungslose Benutzererlebnisse, sofortige wahrgenommene Leistung, makellose visuelle Hierarchie.

Dieser Skill ist framework- und preset-unabhängig. Die Anleitung ist auf CSS-Eigenschaften, Design-Tokens und universelle Komponenten-Semantik (nicht Tailwind, React, Vue oder ein bestimmtes Designsystem) ausgerichtet. Wende ihn zusätzlich zu dem Stack an, den das Zielprojekt verwendet.

Wann anwenden

Erstellen oder Überprüfen jeder benutzerseitigen Oberfläche (App, Marketing-Website, Dashboard, Einstellungen).
Entwerfen von Formularen, Assistenten, Navigation, Preisstufen, Tabellen, Listen, Karten, Dialogen.
Erstellen von Kontobereichen – Profilseiten, Abmeldeabläufe, rechtliche/Support-Seiten.
Aufbau einer Design-Token-Grundlage für ein neues oder übernommenes Projekt.
Überprüfen einer bestehenden Benutzeroberfläche auf Benutzerfreundlichkeit, Barrierefreiheit und wahrgenommene Leistung.

Wende den Skill nicht auf Backend-Logik, CLI-Tools oder nicht-visuellen Code an.

Teil 1 — Kognitive & Psychologische Gesetze

1. Hick’s Law – Eliminiere Auswahlermüdung

Die Entscheidungszeit steigt mit der Anzahl und Komplexität der Optionen.

Regel: Teile komplexe Konfigurationen in einen mehrstufigen Assistenten, ein Akkordeon oder Tabs auf – niemals ein langes, scrollbares Formular. Ein einzelner Bildschirm sollte maximal ~5 primäre Aktionen anzeigen.
Verstoß: Ein 20-Felder-Einstellungsformular auf einer Seite. Behebung: Gruppiere in 3–4 Tab-Abschnitte.

2. Fitts’s Law – Großzügige, vorhersagbare Ziele

Die Zeit, ein Ziel zu treffen, ist eine Funktion von Größe und Entfernung.

Regel: Jedes interaktive Element erhält eine Trefferfläche von mindestens 44×44 px (durch Padding, wenn die visuelle Darstellung kleiner ist). Platziere primäre CTAs in vorhersagbaren Zonen (unten rechts in einem Modal, oben rechts in einem Header, unten fixiert in der mobilen Ansicht).
Regel: Primäre Aktionen müssen nahe am zugehörigen Inhalt sein; destruktive Aktionen müssen entfernt oder geschützt sein.

3. Jakob's Law – Respektiere etablierte mentale Modelle

Benutzer verbringen die meiste Zeit mit anderen Produkten und übertragen ihre Erwartungen.

Regel: Behalte die Standardplatzierung bei: Logo oben links, globale Navigation oben, Suche oben rechts, Benutzerprofil ganz oben rechts, primärer CTA im Hero. Erfinde keine neuen Muster für häufige Aufgaben.
Regel: Verwende Plattformkonventionen (native Select/Checkbox/Radio-Semantik, vertraute Symbole).

4. Miller's Law – Teile in 3–5 Einheiten auf

Der Arbeitsspeicher fasst etwa 7±2 Elemente; sicheres Design verwendet 3–5.

Regel: Gruppiere Navigationslinks, Formularfelder und Datensätze in Blöcken aus 3–5 mit klarer visueller Trennung. Bei mehr als 7 ist eine Gruppierung erforderlich.
Regel: Telefonnummern, Kreditkarten und Codes werden in Blöcken angezeigt (z. B. 4242 4242 4242 4242), niemals als reine Ziffernfolge.

5. Ästhetik-Usability-Effekt – Schön = vertrauenswürdig

Ästhetisch ansprechende Designs werden als benutzerfreundlicher wahrgenommen und kaschieren kleinere Mängel.

Regel: Setze eine strenge typografische Skala (siehe references/design-tokens.md), bewusste Leerräume und eine begrenzte Anzahl von Rahmenradien (2–3 Tokens) durch.
Regel: Gib niemals rohe, ungestylte native Formularelemente aus. Style input, select, checkbox, radio, button, textarea einheitlich.

6. Postel's Law – Sei großzügig bei der Eingabe

Sei konservativ bei der Ausgabe, großzügig bei der Eingabe.

Regel: Akzeptiere und formatiere nachsichtige Eingaben automatisch um: Entferne Leerzeichen und Bindestriche bei Telefon- und Kreditkartennummern, trimme Leerzeichen, normalisiere die Groß-/Kleinschreibung bei E-Mails und Codes. Verwende Eingabemasken und Autovervollständigung.
Regel: Behandle Backend-Fehler elegant – zeige niemals rohe Stack-Traces an; gib eine für Menschen lesbare, umsetzbare Nachricht aus und bewahre die vom Benutzer eingegebenen Daten.

7. Tesler's Law – Absorbiere Komplexität selbst

Jede Anwendung hat eine irreduzible Komplexität; die einzige Frage ist, wer sie handhabt.

Regel: Verlagere die Komplexität in die Komponentenlogik und sinnvolle Standardwerte. Zwinge Benutzer niemals, rohe Datenbankfelder, Umgebungsparameter oder technische Identifikatoren zu konfigurieren.
Regel: Leite ab, was abgeleitet werden kann (Währung aus Gebietsschema, Zeitzone aus Browser, Land aus Postleitzahl), anstatt zu fragen.

8. Parkinson's Law – Arbeit dehnt sich aus, um die Zeit zu füllen; automatisiere sie

Regel: Fülle bekannte Benutzerdaten vor, biete intelligente Standardwerte und automatisiere mehrstufige Sequenzen (automatischer Fortschritt nach gültiger Eingabe, automatisches Speichern von Entwürfen, merke dir zuletzt verwendete Optionen).

Teil 2 — Visuelle Wahrnehmungs- & Gestaltgesetze

9. Gesetz der Nähe – Zusammengehöriges liegt nah beieinander

Regel: Verwende geringen Abstand zwischen einem Label und seinem Eingabefeld (≈4–8 px) und großen Abstand zwischen verschiedenen Abschnitten (≈24–32 px). Lasse niemals zu, dass der Abstand zwischen einem Label und einem Eingabefeld größer ist als der Abstand zum benachbarten Feld.

10. Gesetz der Ähnlichkeit – Gleiche Rolle = gleiches Aussehen

Regel: Elemente, die eine Funktion teilen, teilen identische Tokens: gleiche Farbe, Schriftstärke, Rahmenstil und -radius. Zwei Schaltflächen, die dasselbe tun, dürfen niemals unterschiedlich aussehen.

11. Gesetz der gemeinsamen Region – Umschließe, was zusammengehört

Regel: Verpacke zusammengehörige Module, Datenkarten und Preisstufen in einem sichtbaren Container (einer umrandeten, abgerundeten Fläche mit Padding). Ein gemeinsamer Hintergrund oder Rahmen gruppiert Inhalte auch dann, wenn die Nähe schwach ist.

12. Gesetz der Geschlossenheit – Signalisiere, was außerhalb des Bildschirms ist

Regel: Verwende Affordanzen, die mehr Inhalt signalisieren: Überlauf-Peek-Zustände (nächste Karte teilweise sichtbar), Scroll-Fade-Verläufe an Container-Kanten und Skeleton-Loader (pulse) für ladende Inhalte. Das Gehirn vervollständigt die angedeutete Form.

13. Gesetz der Kontinuität – Ausrichten an sauberen Achsen

Regel: Richte Listen, Tabellenspalten und Schrittfolgen strikt entlang vertikaler oder horizontaler Rasterachsen aus. Elemente in einer wahrgenommenen Linie werden als verbunden gelesen – halte diese Linie gerade.

14. Höhepunkt-Ende-Regel – Gestalte den Abschluss

Menschen beurteilen ein Erlebnis nach seinem Höhepunkt und seinem Ende, nicht nach dem Durchschnitt.

Regel: Entwickle bewusste Erfolgszustände: zufriedenstellende Mikrointeraktionen, klare Erfolgsbanner, Jubel-Feedback beim Abschluss kritischer Arbeitsabläufe (Konto erstellt, Bestellung aufgegeben, Meilenstein erreicht). Lasse einen Arbeitsablauf niemals still enden.

Teil 3 — Aufmerksamkeit, Leistung & Feedback

15. Serielle-Position-Effekt – Priorisiere Ränder

Regel: Platziere hoch priorisierte Elemente (Dashboard, Startseite) am Anfang der Navigation und terminale Aktionen (Abmelden, Konto löschen, Bezahlen) am äußersten Rand (Ende der Navigation, Ecke des Bildschirms). Elemente in der Mitte werden am schlechtesten erinnert.

16. Von-Restorff-Effekt – Hebe das Wichtige hervor

Regel: Verwende einen einzelnen kontrastreichen Akzent-Token, um die primäre Aktion oder eine kritische Warnung visuell hervorzuheben. Wenn alles hervorgehoben wird, wird nichts hervorgehoben.

17. Ockhams Rasiermesser – Entferne Redundantes

Regel: Entferne gnadenlos redundante Hüllen, Symbolüberladung und Dekoration. Bevorzuge saubere, signalstarke Layouts. Wenn ein Element entfernt werden kann, ohne die Bedeutung zu verlieren, entferne es.

18. Doherty-Schwelle – Reagiere in <400ms

Benutzer erwarten eine Reaktion innerhalb von 400ms, sonst verlieren sie den Fokus.

Regel: Wann immer eine asynchrone Aktion oder ein API-Aufruf stattfindet, sorge für sofortiges Feedback: optimistische UI-Updates, Inline-Spinner oder Skeleton-Bildschirme. Lasse die Benutzeroberfläche niemals eingefroren und ohne Signal zurück.

19. Ziel-Gradienten-Effekt – Zeige Fortschritt

Regel: Zeige visuellen Fortschritt bei mehrstufigen Abläufen: Fortschrittsbalken, Schrittzähler („Schritt 2 von 4“), prozentuale Anzeigen. Fortschritt beschleunigt die Fertigstellung.

20. Paradox der Wahl – Begrenze Optionen, markiere einen Standard

Regel: Präsentiere niemals mehr als 3 primäre Optionen (z.B. Preisstufen) parallel, ohne einen klar hervorgehobenen **„Empfohlen“/Standard-Pfad. Der Standard muss visuell auffällig und nach Möglichkeit vorausgewählt sein.

Teil 4 — Weltweit gültige Konto- & Auth-Oberflächen

Diese erweitern die Gesetze auf die Oberflächen, die jedes authentifizierte Produkt gemeinsam hat. Vollständige Regeln: references/account-and-legal-patterns.md.

Profilseite

Gruppiere in Persönliche Daten · Sicherheit · Einstellungen · Datenschutz & Daten · Gefahrenzone (≤5; Miller).
Avatar mit Initialen-Fallback; E-Mail-Änderung verifiziert die neue Adresse erneut; Passwort-Änderung erfordert das aktuelle Passwort.
Konto löschen befindet sich in einem visuell getrennten „Gefahrenzone“, erfordert eine explizite Bestätigung und erklärt, was gelöscht vs. behalten wird. Biete Deaktivieren (umkehrbar) separat an.
Biete Datenexport (GDPR-Portabilität) und aktive Sitzungen/Geräte mit Widerruf an.
Zeige niemals Geheimnisse an; maskiere sensible PII; optimistisches Speichern + Inline-Fehler + Toasts.

Abmelden (genaue Anforderungen)

Platziere Abmelden als letzten Eintrag im Benutzerprofil-Dropdown (Seriale Position + Jakob's Law).
Bei Klick öffne einen Bestätigungsdialog – keine sofortige Abmeldung – mit einem „Warum meldest du dich ab?“-Select-Dropdown.
Bei Bestätigung: POST /auth/logout { reason }: der Server speichert den Grund in der DB (z.B. logout_events), dann ungültige Sitzung serverseitig (Token widerrufen, Cookies löschen).
Der Grund ist optional (blockiere die Abmeldung nie); speichere prefer_not_to_say, wenn übersprungen.
Fokus-gefangenes Modal, Esc bricht ab, Abbrechen ist die sichere Standardoption; Weiterleitung zu einer öffentlichen Seite danach.

Rechtliches & Support (erforderlich, wenn Authentifizierung vorhanden ist)

Liefere Datenschutzrichtlinie, Nutzungsbedingungen, GDPR-Abschnitte und eine Support-Seite mit.
Verlinke sie in der Fußzeile jeder Seite und bei der Registrierung („du stimmst zu…“), erreichbar vor der Kontoerstellung.
GDPR: Rechtsgrundlage, Betroffenenrechte (Auskunft/Löschung/Datenübertragbarkeit), DPO-Kontakt und ein granulares Cookie-Consent-Banner (Annehmen/Ablehnen gleich prominente Darstellung, keine vorausgefüllten Kästchen).
Zeige ein Datum des Inkrafttretens + Version; benachrichtige Benutzer über wesentliche Änderungen.

Ausführungsprotokoll

Für jede Komponente, Seite oder jeden Flow, den du erstellst, befolge dieses dreistufige Protokoll.

1. Audit

Bevor du Code schreibst, bewerte die vorgeschlagene Architektur anhand von:

Hick’s Law – Ist die Anzahl der Optionen überschaubar? Sind komplexe Abläufe aufgeteilt?
Fitts's Law – Sind die Trefferziele ≥44 px und die CTAs in vorhersagbaren Zonen?
Kognitive Last – Sind die Inhalte in Blöcke von 3–5 Elementen gruppiert? Tritt rohe Komplexität an den Benutzer heran (Tesler's)?

2. Implementieren

Schreibe sauberen, modularen, produktionsreifen Code, der:

Semantische Elemente verwendet (<nav>, <main>, <form>, <button>, <label>, <fieldset>, <legend>) und korrekte aria-*-Attribute.
Responsive Zustände bei kleinen/mittleren/großen Breakpoints bereitstellt.
Alle interaktiven Zustände behandelt: Hover, Focus-Visible, Active, Disabled, Loading, Error.
Niemals ungestylte native Formularsteuerelemente ausgibt.

3. Trace

Führe nach der Implementierung die 2–3 primären Gesetze auf, die die wichtigsten Architekturentscheidungen getrieben haben, in diesem Format:

Trace:
- Entscheidung: <was du getan hast> → Gesetz: <Gesetzesname> (<warum es zutrifft>)

Beispiel:

Trace:
- Entscheidung: Einstellungen in 3 tab-abschnitte
    aufgeteilt → Gesetz: Hick's Law (reduziert Optionen pro Bildschirm)
- Entscheidung: Primärer CTA 44px+ fixiert unten
    rechts → Gesetz: Fitts's Law (großes, vorhersagbares Ziel)
- Entscheidung: Fortschrittsbalken „Schritt 2 von
    4" → Gesetz: Ziel-Gradienten-Effekt (treibt die Fertigstellung voran)

Universelle Standards (nicht verhandelbar)

Trefferziele: ≥44×44 px für alle interaktiven Elemente (WCAG 2.5.8 / Apple HIG).
Farbkontrast: Text ≥ 4,5:1, großer Text ≥ 3:1 (WCAG AA).
Fokus-Zustände: Jedes interaktive Element hat einen sichtbaren :focus-visible-Indikator.
Reduzierte Bewegung: Respektiere prefers-reduced-motion – deaktiviere oder minimiere Animationen.
Feedback-Latenz: Jeder asynchrone Vorgang zeigt Feedback innerhalb von 400ms an.
Fehlerbehebung: Verliere niemals Benutzereingaben bei einem Fehler; zeige umsetzbare Nachrichten an.
Dunkel/Hell: Alle Oberflächen definieren Tokens für beide Modi (siehe Design-Tokens-Referenz).
Auth + Rechtliches: Jedes Produkt mit Konten liefert eine Datenschutzrichtlinie, Nutzungsbedingungen, GDPR-Abschnitte und eine Support-Seite – verlinkt in der Fußzeile und bei der Registrierung (siehe references/account-and-legal-patterns.md).

Referenzen

Lade diese für die Tiefe, wenn die Aufgabe es erfordert:

references/design-tokens.md – die stack-unabhängige Token-Grundlage (Abstand, Typografie, Farbe, Radius, Bewegung) mit konkreten CSS-Custom-Property-Beispielen.
references/pre-ship-checklist.md – die vollständige 20-Gesetze-Audit-Checkliste, die vor der Auslieferung durchlaufen werden muss.
references/law-trace-examples.md – ausgearbeitete „Trace“-Beispiele für häufige Muster (Formulare, Preise, Navigation, Dashboards, Tabellen, Profil/Abmeldung).
references/account-and-legal-patterns.md – weltweit gültige Regeln für Profilseiten, Abmeldung (Bestätigung + Grund in DB gespeichert) und Datenschutz/AGB/GDPR/Support-Seiten.

Regel für die Ausgabe: Beende jede UI-Aufgabe immer damit, die Pre-Ship-Checkliste durchzulaufen und den Trace-Block anzuhängen. Beantworte niemals, dass eine Benutzeroberfläche „fertig“ ist, ohne beides.

In Ihrer bevorzugten KI fragen

Dokumentation