Denk wie der Benutzer – Interaktionen aus Nutzersicht gestalten
Problem
KI schreibt Interaktionen oft in der Reihenfolge der Implementierung statt in der Reihenfolge des Benutzers: Zuerst wird die Datenstruktur gezeigt, dann die Controls; wo die Funktion im Code geschrieben wird, landet der Button. Ergebnis:
- Der „Speichern“-Button eines langen Formulars ist oben – der Benutzer scrollt nach unten und muss zurück.
- „Löschen“ direkt neben „Speichern“, gleiche Farbe, gleiche Größe.
- Die häufigste Funktion liegt in der zweiten Ebene von „Mehr ⋯“, während seltene Einstellungen den prominentesten Platz in der Symbolleiste belegen.
- Selbst bei einer einzigen Option muss sie erst ausgewählt werden, bevor „Weiter“ klickbar ist.
- Eine Umbenennung erfordert: „Bearbeitungsmodus“ → ändern → „Anwenden“ → „Speichern“ → Bestätigungsdialog „Wirklich speichern?“.
- Ein neues Objekt erfordert einen dreistufigen Assistenten, obwohl nur ein Name nötig ist.
- Buttons heißen „Senden“, „Ausführen“, „Bestätigen“ – der Benutzer weiß nicht, was passiert.
- Bei Fehlern erscheint ein „Fehler bei der Operation“ – alle eingegebenen Daten sind weg.
Jeder Punkt für sich ist nicht tödlich, aber zusammen ergibt sich ein „Was ist das nur für ein unangenehmes Ding?“.
Schritt 1: Sag klar, was der Benutzer tun will
Schreib es auf (auch wenn nur im Kopf), bevor du anfängst:
- Wer nutzt es? Ein Neuling oder ein täglicher Nutzer?
- Was sind die 1–3 häufigsten Aufgaben? Diese müssen am schnellsten und auffälligsten sein.
- Was ist der ideale Pfad für jede Aufgabe? Vom Öffnen des Programms bis zum Abschluss – wie viele Schritte mindestens?
Ordne die Oberfläche danach, nicht nach Funktionsliste, Datenbankfeldern oder Code-Modulen.
Schritt 2: Positioniere Buttons und Zugänge
| Prinzip | Vorgehen | Gegenbeispiel |
|---|---|---|
| Aktion nah am betroffenen Objekt | Inline-Bearbeiten/Löschen in der Zeile; Kartenoperationen auf der Karte | Erst Zeile auswählen, dann oben „Bearbeiten“ suchen |
| Position am Ende des Vorgangs | Submit-Button eines Formulars am Ende; Dialog-Button unten | Langer Formular-Speichern-Button oben |
| Häufigkeit bestimmt Sichtbarkeit | Häufigste direkt sichtbar; seltene im Menü; sehr seltene in den Einstellungen | Häufige Funktion in zweiter Menüebene |
| Eine primäre Aktion pro Oberfläche | Primäre Aktion hervorgehoben, andere sekundär | Fünf gleich auffällige blaue Buttons |
| Gefährliche Aktionen trennen | Löschen in anderer Farbe, weiter weg oder im Menü | Löschen und Speichern nebeneinander, gleich aussehend |
| Plattformkonventionen befolgen | Windows: Dialog-Buttons unten rechts, „OK“ links von „Abbrechen“; macOS: „Abbrechen“ links, Haupt-Button ganz rechts; Web: Schließen oben rechts | Eigene Reihenfolge erfinden |
| Einheitliche Position für gleiche Aktionen | Jede Seite hat „Neu“ an derselben Stelle | Position variiert je Seite |
| Zugang dort, wo der Benutzer sucht | Wenn der Benutzer denkt „Ich möchte exportieren“, sucht er in der Symbolleiste, im Dateimenü, über der Liste | Export in den Einstellungen versteckt |
Schritt 3: Schneide überflüssige Schritte weg
Liste jeden Schritt der Hauptaufgabe auf und frage nacheinander:
- Kann ich es löschen? Muss der Benutzer hier eine Entscheidung treffen? Wenn nein, löschen.
- Kann ich einen Standardwert setzen? Wenn 90% dieselbe Option wählen, setze sie voraus. Merke die letzte Wahl des Benutzers.
- Kann ich Schritte zusammenführen? „Bearbeiten → Anwenden → Speichern“ – kann es direktes Bearbeiten mit automatischem Speichern oder einem einzigen Speichern-Button sein?
- Kann ich es verschieben? Registrierung, detaillierte Einstellungen, optionale Felder – frage erst, wenn der Benutzer sie wirklich braucht.
- Kann ich es automatisch ableiten? Wenn es aus Dateinamen, Kontext oder vorhandenen Daten erschlossen werden kann, lass den Benutzer nicht ausfüllen.
Typische überflüssige Schritte:
| Überflüssig | Geändert zu |
|---|---|
| Bei umkehrbaren Aktionen „Sind Sie sicher?“-Dialog | Direkt ausführen, mit „Rückgängig“-Option (Gmail-Toast); Bestätigung nur bei irreversiblen, schwerwiegenden Aktionen |
| Bestätigungsdialog „Sind Sie sicher? [Bestätigen][Abbrechen]“ | Schreib die Konsequenzen und das Objekt: „3 Dateien löschen? Diese Aktion kann nicht rückgängig gemacht werden. [Löschen][Abbrechen]“ |
| Nur eine Option, muss trotzdem ausgewählt werden | Automatisch auswählen oder Schritt überspringen |
| Separater „Bearbeitungsmodus“-Schalter | Direkt bearbeitbar |
| Ein Feld erfordert einen mehrstufigen Assistenten | Ein Eingabefeld + ein Button oder Inline-Erstellung |
| Nach Änderung der Einstellungen erst „Anwenden“ dann „Speichern“ | Eine Aktion oder sofortige Wirkung |
| Nach einer Aktion zu anderer Seite springen, Benutzer muss zurücknavigieren | Bleib auf der Seite, aktualisiere direkt |
| Jedes Mal dieselben Informationen neu eingeben | Merken oder vorausfüllen |
Schritt 4: Füge nichts hinzu, was der Benutzer nicht will
KI neigt dazu, „nebenbei“ mehr zu tun: Der Benutzer will einen Export-Button, aber es gibt zusätzlich ein Dropdown für das Exportformat, Exportverlauf, Export-Einstellungsseite; der Benutzer will ein kleines Werkzeug, aber es gibt eine Seitenleiste, ein Einstellungsmenü, Theme-Wechsel, Über-Seite, Hilfe-Center, „Demnächst verfügbar“-Platzhalter.
Jede zusätzliche Funktion, jedes Menü, jeder Zugang bedeutet, dass der Benutzer mehr verstehen und überspringen muss – der Zugang zur Hauptaufgabe wird schwerer zu finden. Alles auf der Oberfläche konkurriert um die Aufmerksamkeit des Benutzers.
Frage vor dem Hinzufügen:
- Hat der Benutzer danach gefragt? Nein? Und es ist nicht notwendig für die Hauptaufgabe? Dann füge es nicht hinzu.
- Würde der Benutzer ohne es stecken bleiben? Nein? Dann füge es nicht hinzu.
- Hat es nur eine Option oder wird es fast niemand ändern? Dann braucht es keine Einstellung, kein Dropdown – verwende direkt einen sinnvollen Standardwert.
- Ist es leer, nicht implementiert oder „vielleicht später nützlich“? Dann setze keine Platzhalter, kein ausgegrautes „Bald verfügbar“, keine Menüeinträge, die nichts tun.
Typische Überflüssigkeiten:
| Überflüssig | Geändert zu |
|---|---|
| Tool mit nur einer oder zwei Funktionen, aber mit Seitenleiste + oberer Navigation + Einstellungsmenü | Eine Oberfläche, die die Funktionen direkt anzeigt |
| Nicht angeforderter Theme-Wechsel, Sprachwechsel, Personalisierung | Nicht machen; bei Bedarf später hinzufügen |
| Eine Seite reicht, aber aufgeteilt in „Startseite / Dashboard / Über / Hilfe“ | Eine Seite |
| Dieselbe Funktion hat drei Zugänge (Symbolleiste, Kontextmenü, Einstellungsseite) | Einen Zugang, den der Benutzer am wahrscheinlichsten sucht; Tastaturkürzel zusätzlich möglich |
| Platzhalter „Demnächst verfügbar“, „Erweiterte Funktionen“, leere Statistik-Karten | Löschen |
| Jeder Wert als konfigurierbare Option | Gute Standardwerte setzen, nur für Optionen, die der Benutzer wirklich ändert, sichtbar machen |
Wenn du denkst, eine zusätzliche Funktion sei nützlich, schlage sie nach Abschluss der Hauptanforderung vor und lass den Benutzer entscheiden, ob er sie haben möchte – baue sie nicht direkt ein.
Schritt 5: Lass den Benutzer jederzeit wissen, was passiert
- Button-Text = Verb + Objekt: „Exportiere CSV“, „Lösche Projekt“, „Sende Einladung“, nicht „Senden“, „Ausführen“, „Bestätigen“. Verwende die Wörter des Benutzers, nicht die der Implementierung (nicht „Payload synchronisieren“, „Job auslösen“).
- Reaktion nach Klick: Innerhalb von 100ms visuelles Feedback; bei länger als 1 Sekunde Fortschrittsanzeige oder Ladezustand, Button deaktivieren, um Doppelklicks zu verhindern.
- Nach Abschluss informieren: Leichte Erfolgsmeldung oder direkte Anzeige des Ergebnisses in der Oberfläche.
- Bei Fehlern Anleitung geben: Sag, was falsch ist, wie der Benutzer es beheben kann; Zeige den Fehler neben dem betroffenen Feld; Behalte die eingegebenen Daten.
- Leerer Zustand leitet zum nächsten Schritt: Wenn eine Liste leer ist, sag dem Benutzer, was hier erscheinen wird, und gib einen Button „Erstelle das Erste“.
- Tastatur: Wenn ein Dialog geöffnet wird, setze den Fokus auf das erste Eingabefeld; Enter zum Absenden, Esc zum Schließen; Tab-Reihenfolge stimmt mit visueller Reihenfolge überein.
- Keine plötzlichen Änderungen: Verschiebe keine Buttons während der Benutzeraktion, öffne keine Popups, die den Klickpunkt verdecken.
CLI genauso: Häufige Parameter haben kurze Optionen und sinnvolle Standardwerte; gefährliche Aktionen erfordern Bestätigung, bieten aber --yes; Fehlermeldungen erklären, wie zu beheben ist; lange Aufgaben zeigen Fortschritt.
Schritt 6: Geh den Ablauf wirklich durch
Schreiben ist nicht gleich gut. Vor der Auslieferung tatsächlich aus Benutzersicht die Hauptaufgabe durchgehen (Screenshots bei Bedarf im Hintergrund):
- Tu so, als ob du das Programm zum ersten Mal öffnest: Sieh nicht auf den Code, nur auf die Oberfläche – kannst du innerhalb von 5 Sekunden den Zugang zur Hauptaufgabe finden?
- Zähle die Schritte: Wie viele Klicks/Eingaben braucht die Hauptaufgabe? Vergleiche mit dem idealen Pfad aus Schritt 1 – jeder zusätzliche Schritt muss begründet sein.
- Geh nur mit der Tastatur durch.
- Mach absichtlich einen Fehler: Falsche Eingabe, Abbruch, Netzwerkausfall – sieh, was passiert und ob die Daten verloren gehen.
- Schrumpfe das Fenster, wenn es viele Inhalte oder leere Zustände gibt – sind die Buttons noch an sinnvollen Stellen?
Wenn kein Laufzeitumfeld vorhanden ist, sage dem Benutzer klar: „Der Interaktionsablauf wurde nicht tatsächlich verifiziert“ und liste die von dir entworfenen Schritte auf, damit der Benutzer sie prüfen kann.
Grenzen
- Wenn der Benutzer Layout oder Ablauf vorgibt, folge seinen Vorgaben; wenn du etwas anders siehst, sprich es an und lass den Benutzer entscheiden.
- Profis mit viel Erfahrung legen oft mehr Wert auf Effizienz als auf leichte Erlernbarkeit: Tastaturkürzel, Batch-Operationen, hohe Dichte sind wichtiger als Einsteiger-Hilfen. Stelle zuerst fest, wer der Benutzer ist.
- Irreversible, risikoreiche Aktionen (Zahlungen, Löschen von Produktionsdaten, Massennachrichten) erfordern eine zusätzliche Bestätigung – entferne sie nicht, um „weniger Schritte“ zu erreichen.
- Wenn du ein bestehendes Programm änderst, ändere nicht die Positionen, an die sich der Benutzer gewöhnt hat, nur weil es „logischer“ ist; wenn du es trotzdem änderst, erkläre den Grund.
Checkliste
- Was sind die 1–3 häufigsten Aufgaben? Sind sie am schnellsten und auffälligsten?
- Ist jeder Button in der Nähe des betroffenen Objekts und an der Stelle, wo der Benutzer den Vorgang abschließt?
- Hat jede Oberfläche nur eine primäre Aktion? Sind gefährliche Aktionen von der primären getrennt?
- Entspricht die Oberfläche den Plattformkonventionen (Button-Reihenfolge, -Position, Tastaturkürzel)?
- Ist jeder Schritt der Hauptaufgabe hinterfragt: „Kann ich es löschen, einen Standard setzen, Schritte zusammenführen?“?
- Sind alle Funktionen, Menüs und Zugänge vom Benutzer gewünscht oder notwendig? Gibt es Platzhalter oder nicht angeforderte Einstellungen?
- Werden Bestätigungsdialoge nur für irreversible Aktionen verwendet? Gibt es für umkehrbare Aktionen eine „Rückgängig“-Option?
- Sind die Button-Texte „Verb + Objekt“? Verwenden sie die Wörter des Benutzers?
- Sind Lade-, Erfolgs-, Fehler- und leere Zustände behandelt? Bleiben bei Fehlern die Eingaben erhalten?
- Hast du den Ablauf tatsächlich als neuer Benutzer durchgegangen und die Schritte gezählt? Wenn nicht, sage „Nicht verifiziert“.