ricarossetto/grandma-proof

Oma-sicher

Stellen Sie sich Oma Rosa vor: 70 Jahre alt, wenig Schulbildung, schwache Nahsicht, Angst, dass ein falscher Klick alles kaputt macht. Wenn sie den Bildschirm alleine bedienen kann, kann das jeder.

Dieser Skill besteht aus zwei Teilen. Der erste Teil regelt, was Sie bauen (Regeln 1 bis 4). Der zweite Teil regelt, wie Sie arbeiten (Regeln 5 bis 7). Beide gelten gleichzeitig.

Für wen Sie bauen

Bevor Sie einen Bildschirm entwerfen, gehen Sie diese vier Personen durch. Der Bildschirm muss für alle vier funktionieren.

Person	Wie sie ist	Was sie vom Bildschirm braucht
Oma Rosa, 70	Unsicher, wo sie klickt, verliert den Überblick, Angst vor Fehlern	Große Schrift, große Schaltflächen, ein Pfad, immer ein Rückweg
Herr Müller	Wenig Schulbildung, liest langsam, nicht fließend in der Sprache der App	Alltagswörter, kurze Sätze, Symbole mit Text kombiniert
Kai, 17	Auf TikTok aufgewachsen, hört nach 3 Sekunden auf, wenn es ruckelt oder verwirrt	Sofortige Reaktion auf Berührung, keine Menüs in Menüs, flüssig
Bea, Neuling	Hatte noch nie ein „System" und muss jetzt etwas Komplexes tun	Ein freundlicher Bildschirm, der den nächsten Schritt sagt; Fehler, die nicht erschrecken oder beschuldigen

Keiner von ihnen liest ein Handbuch. Keiner weiß, was „Dashboard", „Modul", „Sync" oder „Session abgelaufen" bedeutet.

Teil A — Was Sie bauen

1. Einfachheit

Das Ziel ist ein einfacher Bildschirm, nicht ein leerer. Zu viel wegzunehmen verwirrt auch.

• Ein Bildschirm, eine Aufgabe. Jeder Bildschirm hat eine Hauptaktion, ohne Scrollen sichtbar. Andere Aktionen wirken leiser.
• Weniger Schaltflächen. Zählen Sie die Klicks der häufigsten Aufgabe und versuchen Sie, einen zu entfernen. Seltene Aktionen landen in einem „Mehr"-Menü; ungenutzte Aktionen verschwinden.
• Weniger Text. Streichen Sie jeden Text, dessen Weglassen niemanden orientierungslos zurücklässt. Titel bis zu 5 Wörter. Sätze bis zu 12 Wörter.
• Behalten Sie, was führt. Behalten Sie immer: Wo bin ich, was mache ich jetzt, wie komme ich zurück. Nur Symbole als Schaltflächen nur für die universellen (Schließen, Zurück, Suchen).
• Fragen Sie nur, was nötig ist. Ein Feld, das das System selbst herausfinden kann, ist keine Frage. Lange Formulare werden zu kurzen Schritten mit „Schritt 2 von 4".
• Wählen Sie für sie aus. Vorauswahl der häufigsten Option. Erweiterte Einstellungen bleiben verborgen, bis jemand danach sucht.

2. Oma

Wörter

• Verwenden Sie das Wort, das sie zu Hause benutzt: „Anmelden", nicht „Authentifizieren"; „Speichern", nicht „Persistieren"; „Löschen", nicht „Datensatz entfernen".
• Keine Abkürzungen oder Fachbegriffe auf dem Bildschirm. Wenn ein Begriff unvermeidbar ist, erklären Sie ihn beim ersten Mal in einem kurzen Satz.
• Die Schaltfläche sagt, was passiert: „Bestellung abschicken", „Foto löschen". Niemals ein bloßes „OK", „Bestätigen" oder „Hier klicken".
• Gleicher Name für dasselbe auf jedem Bildschirm.

Größe und Lesbarkeit

• Textkörper mindestens 16 px; besser 18 px. Kontrast von mindestens 4,5 zu 1.
• Alles Klickbare ist mindestens 48 × 48 px mit 8 px Abstand zum Nachbarn.
• Niemals mit Farbe allein signalisieren. Fügen Sie ein Symbol oder ein Wort hinzu.

Nicht verlaufen

• Jeder Bildschirm zeigt, wo die Person ist, und hat einen „Zurück"-Button an derselben Stelle.
• Bildschirmwechsel verwenden einen kurzen Übergang (150 bis 250 ms), der zeigt, woher Sie kamen und wohin Sie gingen. Nichts springt, blinkt oder bewegt sich von selbst.
• Nach jeder Aktion antwortet der Bildschirm sofort: „Gespeichert", „Gesendet". Wenn es länger als 1 Sekunde dauert, zeigen Sie, dass gearbeitet wird.
• Nichts funktioniert nur durch eine versteckte Geste (Wischen, langes Drücken, Doppeltippen). Eine sichtbare Schaltfläche tut immer dasselbe.

Keine Angst vor Fehlern

• Aktionen können rückgängig gemacht werden. Wo nicht, fragen Sie zuerst mit beiden Auswegen ausgeschrieben: „Foto löschen" und „Foto behalten".
• Fehlermeldungen sagen, was passiert ist und was zu tun ist, ohne Schuldzuweisung: „Wir konnten diese Nummer nicht finden. Überprüfen Sie die Ziffern und versuchen Sie es erneut."
• Leere Bildschirme sagen den nächsten Schritt: „Sie haben noch keine Bestellungen. Tippen Sie auf Neue Bestellung, um zu beginnen."
• Löschen Sie niemals, was sie eingegeben hat, wegen eines Fehlers.

3. Ausrichtung

KI neigt dazu, schiefe Schaltflächen, Kästchen unterschiedlicher Größe und an Schaltflächen klebenden Text auszuliefern. Liefern Sie das nicht aus.

• Gleiche Linie. Schaltflächen in einer Gruppe teilen sich eine Grundlinie und eine Höhe.
• Gleiche Größe. Schaltflächen in einer Gruppe teilen sich Höhe, Eckenradius, Schriftart und Abstand. Wenn die Breiten stark variieren, gleichen Sie die breiteste an.
• Gleiches Verhältnis. Karten und Kästchen in einer Liste teilen sich Breite und Zeilenhöhe. Langer Text wird mit Auslassungspunkten abgeschnitten; er dehnt das Kästchen nicht.
• Ein Lineal. Alle Abstände stammen aus einer Skala (4, 8, 12, 16, 24, 32, 48 px). Keine abweichenden Werte wie 13 px oder 22 px.
• Eine Hervorhebung. Eine primäre Schaltfläche pro Bildschirm. Die übrigen verwenden den sekundären Stil, immer denselben.
• Schaltflächen halten Abstand zu Text. Mindestens 24 px zwischen einer Schaltfläche und einem Textblock. Stapeln Sie keinen Satz direkt über oder unter einer Schaltfläche.
• Schaltflächen haben keine Beschriftungen. Fügen Sie keinen Text auf dem Bildschirm hinzu, um eine Schaltfläche zu erklären. Wenn eine Schaltfläche erklärt werden muss, ist ihr Label schlecht: Ändern Sie das Label. Zusätzliche Erklärung kommt in den Hinweis beim Hover (title oder Tooltip, plus aria-label für Screenreader).
• Überprüfen Sie durch Messen. Öffnen Sie nach dem Bau den Bildschirm, machen Sie einen Screenshot und vergleichen Sie Höhen, Breiten und Abstände. Das Lesen des Codes reicht nicht.

4. Kein KI-Look

Lesen Sie references/ai-tells.md, bevor Sie eine Startseite, einen Einführungsbildschirm oder Werbetexte erstellen. Kurz gesagt:

• Die „GPT-Landingpage" ist verboten: ein riesiger zentrierter Textblock mit einer knackigen Zeile und einem kursiven Wort, einem Pill-Badge darüber, zwei Schaltflächen darunter und drei Icon-Karten direkt danach.
• Als Reflexe verboten: lila oder blau-violette Verläufe, Neon-Glow, Milchglas, Farbverlaufstext, Emojis anstelle von Icons, farbige Schatten, Karten in Karten.
• Erfundene Beweise verboten: Zahlen, Testimonials, Kundenlogos oder Bewertungen, die nicht existieren.
• Verkaufsprosa verboten: „Transformieren", „Elevieren", „Revolutionieren", „mühelos", „Es ist nicht X. Es ist Y."
• Stattdessen: Zeigen Sie das echte Produkt, sagen Sie in einfachen Worten, was es tut, und platzieren Sie die Hauptaktion weit oben.

Der Test: Wenn der Block unverändert in die Website eines anderen Produkts eingefügt werden könnte, ist er generisch. Machen Sie ihn mit dem Inhalt dieses Produkts neu.

Teil B — Wie Sie arbeiten

5. Sprechen Sie klar

Die Person auf der anderen Seite ist möglicherweise kein Programmierer, selbst wenn sie ein Fachwort verwendet. Die Verwendung eines Begriffs beweist nicht, dass sie das Fachgebiet beherrscht.

• Beginnen Sie mit dem Ergebnis: Was sich geändert hat und was die Person jetzt tut.
• Kurze Sätze, gewöhnliche Wörter. Fachbegriffe nur bei Bedarf, mit ein paar erklärenden Worten daneben.
• Werfen Sie keine Dateinamen, Befehle oder Code aus, es sei denn, Sie werden danach gefragt. Wenn die Person etwas ausführen muss, geben Sie nummerierte Schritte.
• Sagen Sie klar, was funktioniert hat, was nicht und was fehlt.
• Wenn die Person nach dem technischen Detail fragt, dann geben Sie es vollständig.

6. Teilen Sie die Arbeit mit Sub-Agenten

Sub-Agenten beschleunigen die Arbeit und verbessern das Ergebnis. Verwenden Sie sie immer dann, wenn die Aufgabe mehr als einen Teil hat, auch wenn niemand etwas konfiguriert hat.

• Finden Sie das Werkzeug. Verwenden Sie, was die Umgebung bietet: ein Agenten- oder Aufgaben-Tool, Hintergrundagenten, parallele Sitzungen oder das Aufrufen des Agenten selbst über die Kommandozeile.
• Teilen Sie in unabhängige Teile und starten Sie sie alle gleichzeitig: Recherche, jeder Bildschirm, jede Datei, Tests, Überprüfung.
• Geben Sie jedem Sub-Agenten ein vollständiges Briefing: Ziel, beteiligte Dateien, was nicht berührt werden darf und was zurückgegeben werden soll. Er startet von Null und hat das Gespräch nicht gesehen.
• Haben Sie immer einen Prüfer. Ein Sub-Agent, der die Arbeit nicht geschrieben hat, prüft das Ergebnis anhand der Regeln 1 bis 4.
• Zwei Sub-Agenten bearbeiten niemals gleichzeitig dieselbe Datei.
• Sie sind für das Ergebnis verantwortlich. Prüfen Sie, was zurückkommt, bevor Sie sagen, dass es fertig ist.
• Kein Sub-Agenten-Tool: Führen Sie dieselben Teile als separate Durchläufe durch, einen nach dem anderen, plus einen abschließenden Prüfdurchlauf mit den Augen eines Außenstehenden.

Eine Einschritt-Aufgabe (ein Wort ändern, eine Frage beantworten) erledigen Sie einfach.

7. Entscheiden, ohne den Menschen zu belästigen

Gehen Sie nicht zurück zum Menschen, um Details zu bestätigen. Jede kleine Frage unterbricht seinen Arbeitsfluss.

Einfacher Zweifel: per Debatte entscheiden. Befolgen Sie das Skript in references/debate.md:

1. Schreiben Sie den Zweifel in einem Satz, mit beiden Optionen.
2. Starten Sie zwei Debattierer gleichzeitig, einen pro Option. Jeder verteidigt seine in bis zu 5 Zeilen.
3. Starten Sie einen Schiedsrichter, der beide liest und auswählt. Das Kriterium des Schiedsrichters ist immer: Was ist am besten für Oma und am einfachsten rückgängig zu machen.
4. Befolgen Sie die Entscheidung des Schiedsrichters und machen Sie weiter.
5. Melden Sie am Ende jede Entscheidung in einer Zeile: „Ich habe mich für einen grünen Button statt blau entschieden, weil er mehr Kontrast hat."

Ohne Sub-Agenten-Tool führen Sie die Debatte selbst: Schreiben Sie das beste Argument für jede Seite, dann urteilen Sie.

Fragen Sie den Menschen nur, wenn:

• die Aktion nicht rückgängig gemacht werden kann (Löschen von Daten, Veröffentlichen, Senden einer Nachricht, Ausgeben von Geld);
• die Antwort von etwas abhängt, das nur sie wissen (ein Passwort, eine persönliche Präferenz, eine Geschäftsregel);
• die Anfrage zwei Lesarten hat, die zu sehr unterschiedlicher Arbeit führen.

Stellen Sie in diesen Fällen eine Frage, mit den Optionen bereit, und machen Sie mit allem weiter, was nicht von der Antwort abhängt.

Vor der Auslieferung: der Oma-Test

Öffnen Sie den echten Bildschirm und überprüfen Sie. Wenn ein Punkt fehlschlägt, beheben Sie ihn vor der Auslieferung.

1. 5 Sekunden. Können Sie nach 5 Sekunden Anschauen sagen, wofür der Bildschirm ist und wo Sie klicken müssen?
2. Eine Hauptaktion. Zieht nur eine Schaltfläche mehr Aufmerksamkeit auf sich als die anderen?
3. Alltagswörter. Gibt es ein Wort, das Oma nicht verwenden würde? Ersetzen Sie es.
4. Dicke Finger. Ist alles Klickbare 48 px oder größer, mit ausreichend Platz darum?
5. Zurück. Können Sie auf jedem Bildschirm zurückgehen und rückgängig machen?
6. Lineal. Sind Schaltflächen und Kästchen in einer Gruppe gleich groß und auf derselben Linie?
7. Schaltfläche allein. Ist jede Schaltfläche frei von einem Satz, der erklärt, was sie tut?
8. KI-Look. Taucht nichts von der Liste der KI-Merkmale auf?
9. Handy. Funktioniert der Bildschirm bei 360 px Breite, ohne seitliches Scrollen?
10. Klare Antwort. Passt das, was Sie dem Benutzer sagen werden, in ein paar jargonfreie Sätze?

Wenn Sie ausliefern, sagen Sie in einer Zeile, wie viele Punkte bestanden haben und welchen Sie behoben haben.