UX Psychology Skill
Beratungsebene für Webdesign-Entscheidungen. Bringt relevante Prinzipien der Verhaltenspsychologie bei der Gestaltung von Seiten und Komponenten ein. Dies ist eine gewichtete Eingabe – sie informiert Entscheidungen, überschreibt jedoch nicht das ästhetische Urteil, die Markenidentität oder die kreative Richtung.
Wann verwenden
Nach dem Erstellen oder Gestalten von Seiten, Komponenten oder Abläufen aufrufen. Das Skill funktioniert am besten als Review-Ebene – zuerst bauen, dann die psychologische Linse anlegen, um zu finden, was fehlt:
- Landing Pages, Preisseiten, Onboarding-Abläufe
- Abonnement-/Conversion-Funnels
- Dashboard-Layouts und Datenpräsentation
- Navigation und Informationsarchitektur
- E-Commerce-Produktseiten und Checkout-Abläufe
- Jede Seite, auf der Benutzer eine bestimmte Aktion ausführen sollen
Entscheidungsprozess
Bei Aktivierung in dieser Reihenfolge vorgehen:
- Seitentyp identifizieren – Landing, Preisgestaltung, Onboarding, Dashboard, Checkout usw.
- Die 3-5 relevantesten Prinzipien aus den untenstehenden seitenbezogenen Vorgaben ziehen
- Für jedes Prinzip angeben: was es ist → wie man es auf DIESE spezifische Seite anwendet → wie das Anti-Pattern aussieht
- Gegen Randbedingungen abwägen – Markenidentität, Barrierefreiheit und technische Anforderungen haben immer Vorrang
- Spezifische, umsetzbare Änderungen empfehlen – keine abstrakten Ratschläge. Zeigen, was im Markup, Layout oder Text geändert werden soll. Wenn auf eine Codezeile verwiesen werden kann, tun.
Wie gewichten
Psychologieprinzipien sind eine Eingabe unter vielen. Die Gewichtungshierarchie:
- Markenidentität und kreative Vision (am höchsten – die Website muss sich richtig anfühlen und aussehen)
- Barrierefreiheit und Benutzerfreundlichkeit (nicht verhandelbar – WCAG-Konformität, Touch-Ziele, Kontrast)
- Technische Qualität (Leistung, SEO, responsives Design)
- Psychologieprinzipien (dieses Skill – subtiler Einfluss, keine plumpe Manipulation)
Opfere niemals Ästhetik oder Benutzervertrauen für einen psychologischen Trick. Wenn ein Prinzip mit gutem Design kollidiert, gewinnt gutes Design.
Was dieses Skill NICHT ist
- KEIN Handbuch für Dark Patterns – jedes Prinzip hier ist nur ethische Anwendung
- KEIN vollständiges Designsystem – es ergänzt vorhandene Designfähigkeiten
- KEIN Ersatz für Benutzerforschung – echte Benutzerdaten schlagen immer die Theorie
- KEINE starre Checkliste – die Prinzipien verwenden, die passen, die ignorieren, die nicht passen
Seitenbezogene Vorgaben (Inline)
Die wichtigsten Prinzipien pro Seitentyp, eigenständig für den schnellen Zugriff. Siehe knowledge/page-prescriptions.md für erweiterte Anleitung und häufige Fehler.
Homepage / Landing Page
| Prinzip | Anwendung |
|---|---|
| Erste Eindrücke | Hero vermittelt Wert in unter 3 Sekunden. In 50ms gebildet – keine zweite Chance. |
| Ankereffekt | Mit der stärksten Metrik oder Behauptung führen. Die erste gesehene Zahl setzt den Referenzpunkt. |
| Sozialer Beweis | Echte Zahlen früh sichtbar (Nutzer, Ergebnisse, Erfolgsbilanz). Vage Behauptungen konvertieren nicht. |
| Informationsduft | Klare Navigation – der Benutzer weiß genau, wohin als nächstes. |
| Ästhetik-Usability | Visuelle Qualität schafft Vertrauen, bevor der Inhalt es tut. Schönes fühlt sich leichter zu bedienen an. |
Preisgestaltung / Abonnement
| Prinzip | Anwendung |
|---|---|
| Ankereffekt | Premium-Tarif zuerst oder visuell am prominentesten zeigen. Alles andere wirkt wie ein Schnäppchen. |
| Verlustaversion | Darum herum formulieren, was kostenlose Benutzer VERPASSEN, nicht nur, was zahlende erhalten. Verlust schmerzt 2x mehr. |
| Standardeffekt | Den empfohlenen Tarif vorauswählen. Die meisten Benutzer ändern keine Voreinstellungen. |
| Commitment/Konsistenz | Benutzer, die bereits kostenlose Funktionen genutzt haben, sind für ein Abonnement bereit – jeder Schritt führt zum nächsten. |
Onboarding / Anmeldung
| Prinzip | Anwendung |
|---|---|
| Schrittweise Bindung | Zuerst kleine kostenlose Aktion, dann Konto, dann Zahlung. |
| Kognitive Belastung | Eine Frage pro Bildschirm ist besser als ein langes Formular. Alles Unwesentliche entfernen. |
| Zeigarnik-Effekt | Fortschritt anzeigen (Schritt 2 von 4). Unerledigte Aufgaben nagen – Benutzer kehren zurück, um sie abzuschließen. |
| Reziprozität | Wert geben, bevor Informationen verlangt werden. Kostenloser Toolzugriff, Vorschau oder Beispielergebnis. |
Dashboard / Datenanzeige
| Prinzip | Anwendung |
|---|---|
| Chunking | Daten nach Kategorie oder Priorität gruppieren – nicht eine riesige Liste. |
| Räumliches Gedächtnis | Konsistentes Layout, damit wiederkehrende Benutzer Dinge sofort finden. Nichts verschieben. |
| Satisficing | Die einzelne wichtigste Erkenntnis hervorheben. Benutzer wählen die erste akzeptable Option. |
| Wiedererkennen statt Erinnern | Vollständigen Kontext anzeigen (Labels, Zeitstempel, Symbole) – Benutzer nicht zum Erinnern zwingen. |
Checkout / Zahlung
| Prinzip | Anwendung |
|---|---|
| Kognitive Belastung | Gast-Checkout-Option. Minimale Formularfelder. Jeweils eine Entscheidung. |
| Transparenz | ALLE Kosten vor dem Zahlungsschritt anzeigen. Überraschungsgebühren sind der Hauptgrund für Kaufabbrüche. |
| Verlustaversion | Vertrauenssiegel und Garantien DIREKT NEBEN dem Zahlungsbutton, nicht in der Fußzeile. |
| Standardeffekt | Standardversand vorauswählen. „Info speichern“ vorab ankreuzen. Entscheidungen reduzieren. |
Über uns / Vertrauensseite
| Prinzip | Anwendung |
|---|---|
| Autorität | Methodik, Datenquellen, Team-Expertise – beweisen, dass man weiß, was man tut. |
| Vertrauenshierarchie | Diese Seite bedient Benutzer auf Stufe 2-3 (Interesse → Vertrauen). Hier nicht den Verkauf forcieren. |
| Transparenz | Ehrlich über Einschränkungen, nicht nur über Stärken. Verletzlichkeit schafft Vertrauen. |
Code-Level-Implementierungsbeispiele
Ankereffekt (Preisseite)
Vorher – alle Tarife gleich, kein Anker:
<div class="plans">
<div class="plan">Basic — 19€/Monat</div>
<div class="plan">Pro — 49€/Monat</div>
<div class="plan">Enterprise — 99€/Monat</div>
</div>
Nachher – Pro als visueller Standard verankert:
<div class="plans">
<div class="plan">Basic — 19€/Monat</div>
<div class="plan featured"> <!-- visuell hervorgehoben, vorausgewählt -->
<span class="badge">Am beliebtesten</span>
Pro — 49€/Monat
</div>
<div class="plan">Enterprise — 99€/Monat</div>
</div>
Warum: Der hervorgehobene Tarif wird zum Anker. Basic wirkt im Vergleich wie ein Schnäppchen. Enterprise existiert, damit Pro vernünftig erscheint. Das „Am beliebtesten“-Badge fügt sozialen Beweis hinzu.
Verlustaversion (Abonnement-CTA)
Vorher – gewinnorientiert formuliert:
<button>Premium-Zugang erhalten</button>
<p>Schalte alle Funktionen und Premium-Inhalte frei.</p>
Nachher – verlustorientiert formuliert:
<button>Meinen Premium-Zugang behalten</button>
<p>Ohne Premium verlierst du den Zugang zu täglichen Einblicken,
gespeicherten Dashboards und Priority-Support.</p>
Warum: „Du verlierst den Zugang“ löst Verlustaversion aus (~2x stärker als entsprechende Gewinne). Der CTA verwendet „Behalten“ – es wird als Schutz von etwas formuliert, das sie bereits besitzen.
Zeigarnik-Effekt (Onboarding-Fortschritt)
Vorher – keine Fortschrittsanzeige:
<form>
<h2>Erzähl uns von dir</h2>
{/* 8 Felder auf einer Seite */}
</form>
Nachher – schrittweise mit sichtbarem Fortschritt:
<div className="progress-bar">
<div className="step completed">Profil</div>
<div className="step active">Präferenzen</div> {/* aktuell */}
<div className="step">Überprüfung</div>
</div>
<form>
<h2>Schritt 2 von 3 – Deine Präferenzen</h2>
{/* Nur 2-3 Felder */}
</form>
Warum: Unvollständige Fortschrittsbalken erzeugen psychologische Spannung. Benutzer kehren zurück, um zu beenden, was sie begonnen haben. Die Aufteilung von 8 Feldern in 3 Schritte mit 2-3 Feldern reduziert die kognitive Belastung UND erzeugt den Sog zum Abschluss.
Kognitive Belastung (Checkout)
Vorher – erzwungene Kontoerstellung:
<h2>Konto erstellen, um fortzufahren</h2>
<input placeholder="E-Mail" />
<input placeholder="Passwort" />
<input placeholder="Passwort bestätigen" />
<button>Konto erstellen & Bezahlen</button>
Nachher – Gast-Checkout mit aufgeschobener Kontoerstellung:
<h2>Bezahlen</h2>
<input placeholder="E-Mail (für die Quittung)" />
<button>Jetzt bezahlen</button>
<p class="subtle">Möchtest du deine Daten für das nächste Mal speichern?
<a href="/create-account">Erstelle ein Konto</a> nach dem Bezahlen.</p>
Warum: Jedes zusätzliche Feld ist ein Entscheidungspunkt, der zu Abbrüchen führt. Zuerst den Verkauf abschließen. Die Kontoerstellung ist eine kleine Bitte, NACHDEM sie sich bereits verpflichtet haben (Commitment/Konsistenz-Prinzip).
Prinzipienkategorien (11)
| Kategorie | Anzahl | Kerneinsicht |
|---|---|---|
| Aufmerksamkeit | 4 | Benutzer sehen weniger, als du denkst |
| Gestalt | 8 | Visuelle Gruppierung bestimmt das Verständnis |
| Gedächtnis | 10 | Wiedererkennen schlägt Erinnern; alles bündeln |
| Sinnstiftung | 3 | Mentale Modelle formen Erwartungen |
| Entscheidungsfindung | 5 | Weniger Optionen, klarere Ergebnisse |
| Motorik/Interaktion | 3 | Große Ziele, schnelle Reaktionen |
| Motivation | 4 | Autonomie + Kompetenz + Verbundenheit |
| Kognitive Verzerrungen | 10 | Voreinstellungen bleiben bestehen; erste Eindrücke verankern |
| Überzeugung | 9 | Vertrauen vor Frage; Beweis vor Versprechen |
| Emotion | 6 | Schönes fühlt sich leichter an; Freude schafft Loyalität |
| Ethik | 3 | Klare Grenze zwischen Überzeugung und Manipulation |
Insgesamt: 65 Prinzipien – siehe knowledge/principles.md für die vollständige Datenbank mit Definitionen und Design-Implikationen.
Anti-Patterns (Nie machen)
- Fake-Knappheitszähler – wenn es nicht echt ist, nicht anzeigen
- Confirmshaming – „Nein, ich möchte kein Geld sparen“ ist manipulativ
- Versteckte Kosten beim Checkout – der Hauptgrund für Warenkorbabbrüche
- Erzwungene Abos – schwer kündbare Abonnements zerstören jedes Vertrauen
- Fehlleitung – visuelle Tricks, um falsche Klicks zu erzwingen
- Fake sozialer Beweis – erfundene Testimonials oder aufgeblähte Zahlen
- Dunkle Voreinstellungen – vorab angekreuzte Opt-ins, die der Benutzer nicht wollte
- Roach-Motel-Muster – leicht hineinzukommen, unmöglich wieder herauszukommen
Quelle
Prinzipien abgeleitet von NN/g's Psychology for UX Study Guide (112 Ressourcen in 11 Kategorien), angepasst als umsetzbare Designmuster. Akademische Grundlagen: Kahneman (Prospekttheorie), Norman (Emotional Design), Cialdini (Influence), Hick, Fitts, Miller, Zeigarnik.