Nutzererfahrung
UX von oben nach unten

Ein vollständiger visueller Leitfaden, um das personenzentrierte Design zu verstehen

01 — Definition

Was ist Nutzungserfahrung?

Die UX (User Experience) ist die Gesamtwahrnehmung, die eine Person bei der Interaktion mit einem digitalen Produkt hat. Es geht nicht nur darum, wie es aussieht, sondern wie man sich dabei fühlt: ob es intuitiv, nützlich und zufriedenstellend ist.

Personenzentriert
Gestaltungsentscheidungen gehen immer von den echten Bedürfnissen, Motivationen und Kontexten der Nutzenden aus.
Mehr als Ästhetik
Die UX umfasst Informationsarchitektur, Navigationsfluss, Barrierefreiheit und Leistung, nicht nur die visuelle Gestaltung.
Evidenzbasiert
Entscheidungen werden mit Daten belegt: Usability-Tests, Interviews und Messungen echten Verhaltens.
Iterativer Prozess
Die UX endet nicht mit dem Start: Sie entwickelt sich ständig weiter, auf Grundlage von Rückmeldungen und neuen Bedürfnissen.

02 — Wichtige Unterscheidung

UX vs. UI: Was ist der Unterschied?

UX
Nutzerforschung
Informationsarchitektur
Reisekarten
Usability-Tests
Wireframes und Prototypen
vs
UI
Farben und Typografie
Symbole und Illustrationen
Visuelle Komponenten
Animationen und Übergänge
Stilrichtlinie

UX = wie es funktioniert · UI = wie es aussieht · Beides gehört zusammen

03 — Methodik

Der UX-Gestaltungsprozess

1
Recherche (Research)
Interviews mit Nutzenden, Umfragen, Analyse der Mitbewerber und Untersuchung des Nutzungskontextes. Ziel ist es zu verstehen, wer die Nutzenden sind und welche echten Probleme sie haben.
Werkzeuge: Interviews, Umfragen, Analytik
2
Definition (Definieren)
Informationen in fiktive Figuren (Personas), Empathiekarten und die Problemstellung zusammenfassen. Beantwortet: Welches Problem müssen wir lösen und für wen?
Werkzeuge: Personas, Journey Map, HMW
3
Ideenfindung (Ideate)
Brainstorming, Affinitätsdiagramme und Techniken kollektiver Kreativität. Es entstehen viele ungefilterte Ideen, aus denen man die vielversprechendsten auswählt.
Werkzeuge: crazy 8s, how might we, Skizzen
4
Prototyping (Prototype)
Niedrig- oder hochauflösende Darstellungen der Lösung erstellen: von Skizzen auf Papier bis zu interaktiven Prototypen. Ziel ist es, die Idee so früh wie möglich zu konkretisieren.
Werkzeuge: Figma, Balsamiq, Marvel
5
Validierung (Test)
Tests mit echten Nutzenden durchführen, um Probleme der Benutzerfreundlichkeit zu erkennen. Die Ergebnisse speisen die Recherchephase erneut und schließen den iterativen Zyklus.
Werkzeuge: moderierte Tests, Eye-Tracking, A/B

04 — Grundlagen

10 Nielsensche Heuristiken

1
Sichtbarkeit des Status
Das System muss den Nutzer immer darüber informieren, was geschieht.
2
Entsprechung in der realen Welt
Sprich die Sprache des Nutzers, nicht die des Systems.
3
Kontrolle und Freiheit
Erlaubt es, Aktionen einfach rückgängig zu machen und wiederherzustellen.
4
Konsistenz und Standards
Gleiche Elemente müssen sich immer gleich verhalten.
5
Fehlervermeidung
Vorbeugen ist besser, als Fehlermeldungen anzuzeigen.
6
Wiedererkennen > erinnern
Zeigt Optionen an; zwingt die Nutzenden nicht, etwas auswendig zu lernen.
7
Flexibilität und Effizienz
Abkürzungen für Fortgeschrittene, Einfachheit für Einsteiger.
8
Minimalistisches Design
Entfernt, was dem Hauptablauf keinen Mehrwert bringt.
9
Hilft, Fehler zu erkennen
Klare Nachrichten, die erklären und Lösungen vorschlagen.
10
Hilfe und Dokumentation
Wenn nötig, bietet es leicht zu findende und verständliche Dokumentation.

05 — Typische Fehler

Was sollte man bei UX vermeiden?

✗
Entwerfen, ohne die Nutzenden zu untersuchen
→ Führe mindestens 5 Interviews durch, bevor du entwirfst
✗
Ästhetik über Funktionalität stellen
→ Ein schöner, aber unsichtbarer Button ist ein nutzloser Button
✗
Nicht mit echten Nutzenden testen
→ 5 Nutzende erkennen 85 % der Usability-Probleme
✗
Barrierefreiheit von Anfang an ignorieren
→ Wende die WCAG-2.1-Richtlinien schon in der Entwurfsphase an
✗
Nach der Veröffentlichung des Produkts nicht iterieren
→ Sammle Daten, erkenne Reibungspunkte und verbessere kontinuierlich

06 — Ressourcen

Grundlegende UX-Werkzeuge

Prototyping
Figma
Gemeinsame Entwürfe und Prototypen in der Cloud
Recherche
Labyrinth
Ferne und automatisierte Usability-Tests
Analytik
Hotjar
Wärmekarten und Aufzeichnung von Sitzungen
Umfragen
Typeform
Formulare und Umfragen zur Erfassung von Rückmeldungen
Zusammenarbeit
Miro
Digitale Tafeln für Werkstätten und Ideenfindung
Fluss
Whimsical
Ablaufdiagramme und schnelle Wireframes

„Design ist nicht nur, wie etwas aussieht oder sich anfühlt. Design ist, wie es funktioniert.“

— Steve Jobs