UX-Design steht für User Experience Design – die Gestaltung von Nutzererlebnissen. UX-Design umfasst alle Aspekte der Interaktion eines Menschen mit einem Produkt, System oder einer Dienstleistung – mit dem Ziel, diese Interaktion so einfach, effizient, angenehm und sinnvoll wie möglich zu gestalten.
UX ist nicht dasselbe wie Webdesign. Webdesign entscheidet, wie etwas aussieht. UX-Design entscheidet, wie es sich anfühlt und wie gut es funktioniert.
Don Norman, der den Begriff „User Experience" in den 1990ern bei Apple prägte, definierte ihn so: „User experience encompasses all aspects of the end-user's interaction with the company, its services, and its products."
UX vs. UI: Der häufigste Verwechslungsfehler
| UX-Design | UI-Design | |
|---|---|---|
| Fokus | Gesamtes Nutzererlebnis, Funktion | Visuelle Gestaltung, Ästhetik |
| Fragen | Wie navigiert der Nutzer? Was braucht er? | Welche Farben? Welche Schrift? Wie sieht der Button aus? |
| Output | Wireframes, Prototypen, User Flows | Mockups, Design-System, Pixel-perfect Screens |
| Methoden | User Research, Usability Tests, Personas | Visual Design, Typografie, Farbtheorie |
| Analogie | Grundriss und Raumplanung eines Gebäudes | Inneneinrichtung und Dekoration |
Beide sind untrennbar verbunden: Ohne gutes UX ist schönes UI wertlos. Ohne gutes UI bleibt gutes UX unsichtbar.
Die 7 UX-Design-Prinzipien nach Peter Morville
1. Useful (Nützlich)
Das Produkt erfüllt einen echten Bedarf. Es löst ein Problem oder erfüllt einen Wunsch. Eine Website, die niemanden interessiert, ist wertlos – egal wie schön sie ist.
2. Usable (Verwendbar)
Das Produkt ist einfach und effizient zu nutzen. Die Navigation ist intuitiv, Aufgaben können ohne Frustration abgeschlossen werden.
3. Findable (Auffindbar)
Nutzer finden, was sie suchen – schnell und ohne Verwirrung. Das betrifft sowohl die interne Suche auf der Website als auch externe Auffindbarkeit über SEO.
4. Credible (Glaubwürdig)
Das Produkt vermittelt Vertrauen. Professionelles Design, aktuelle Inhalte, klare Datenschutzinformationen und Social Proof.
5. Desirable (Wünschenswert)
Das Produkt weckt positive Emotionen. Schönes Design, Brand-Identität und Storytelling machen den Unterschied zwischen „gut genug" und „ich empfehle das weiter".
6. Accessible (Zugänglich)
Das Produkt ist für alle nutzbar – auch für Menschen mit visuellen, motorischen oder kognitiven Einschränkungen. Barrierefreiheit ist kein Extra, sondern Pflicht.
7. Valuable (Wertvoll)
Das Produkt schafft echten Mehrwert – für den Nutzer und das Unternehmen. UX-Design ist kein Selbstzweck, sondern dient konkreten Zielen.
Der UX-Design-Prozess
Phase 1: User Research (Nutzerforschung)
UX-Design beginnt nicht mit Figma oder Skizzen – es beginnt mit dem Verstehen der Nutzer. Wer sind sie? Was wollen sie? Welche Hindernisse haben sie?
Methoden:
- User Interviews: Tiefgehende qualitative Gespräche mit realen Nutzern
- Umfragen: Quantitative Daten zu Verhalten und Meinungen
- Analytics-Analyse: Google Analytics zeigt, wo Nutzer abspringen
- Heatmaps: Tools wie Hotjar visualisieren, wo Nutzer klicken und wie weit sie scrollen
- Session Recordings: Aufzeichnungen echter Nutzersitzungen
- Competitive Analysis: Was machen Mitbewerber besser oder schlechter?
Phase 2: Personas erstellen
Personas sind fiktive, aber datenbasierte Profile typischer Nutzer. Sie fassen demografische Merkmale, Ziele, Frustrationen und Verhaltensweisen zusammen.
Beispiel-Persona:
"Marketing-Manager Markus", 34, arbeitet in einem mittelständischen Unternehmen in Bielefeld. Sucht eine zuverlässige Agentur für die neue Website. Wichtigste Kriterien: Referenzen, transparente Preise, schnelle Kommunikation. Frustration: hat schlechte Erfahrungen mit einer Agentur gemacht, die nicht kommuniziert hat.
Phase 3: Information Architecture (Informationsarchitektur)
Bevor ein einziger Button gezeichnet wird, wird die Struktur definiert:
- Welche Seiten gibt es?
- Wie sind sie hierarchisch organisiert?
- Wie navigiert der Nutzer von A nach B?
- Was sind die wichtigsten User Flows?
Werkzeuge:
- Sitemap
- User Flow Diagramme
- Card Sorting (Nutzer gruppieren Inhalte selbst)
- Tree Testing (Findet der Nutzer das Gesuchte in der Struktur?)
Phase 4: Wireframes
Wireframes sind strukturelle Layouts ohne visuelles Design – der „Skelett" einer Seite. Sie klären:
- Wo befinden sich welche Elemente?
- Welches ist das wichtigste Element auf der Seite?
- Wie ist der inhaltliche Fluss?
Low-Fidelity-Wireframes sind schnell gezeichnet (auch auf Papier). High-Fidelity-Wireframes sind detaillierter und näher am finalen Design.
Phase 5: Prototyping
Ein Prototyp ist eine klickbare, interaktive Version der Website – noch ohne echten Code. Er ermöglicht es, das Nutzererlebnis zu simulieren und Probleme zu entdecken, bevor teure Entwicklung beginnt.
Tools: Figma, InVision, Adobe XD
Prototypen können sein:
- Low-Fidelity: Einfache klickbare Wireframes
- High-Fidelity: Fast fertiges visuelles Design, interaktiv
Phase 6: Usability Testing
Der wichtigste – und am häufigsten übersprungene – Schritt. Echte Nutzer führen typische Aufgaben auf dem Prototypen durch, während UX-Designer beobachten und notieren, wo Probleme auftreten.
Methoden:
- Moderiertes Testing: Forscher begleitet den Nutzer und stellt Fragen
- Unmoderiertes Remote Testing: Nutzer testet alleine, Aufzeichnung wird ausgewertet
- 5-Second Test: Zeige eine Seite 5 Sekunden – was erinnert der Nutzer?
- Think-Aloud-Protokoll: Nutzer sagt laut, was er denkt
Faustregel: 5 Nutzer decken 85 % aller Usability-Probleme auf.
Phase 7: Iteration
UX-Design ist nie fertig. Auf Basis der Test-Ergebnisse werden Probleme behoben, und der Zyklus beginnt erneut. Nach dem Launch liefern Analytics, Heatmaps und Nutzerfeedback kontinuierlich neue Daten für Optimierungen.
UX-Metriken: Wie misst man gutes UX?
| Metrik | Was sie misst | Wie gemessen |
|---|---|---|
| Task Success Rate | Anteil der Nutzer, die eine Aufgabe abschließen | Usability Test |
| Time on Task | Wie lange braucht ein Nutzer für eine Aufgabe? | Usability Test |
| Error Rate | Wie oft machen Nutzer Fehler? | Usability Test, Analytics |
| NPS (Net Promoter Score) | Weiterempfehlungsbereitschaft | Umfrage |
| SUS (System Usability Scale) | Standardisierter Usability-Score 0–100 | Fragebogen |
| Bounce Rate | Verlassen ohne Interaktion | Google Analytics |
| Conversion Rate | Anteil der Besucher mit Zielerfüllung | Analytics |
| Heatmap-Analyse | Wo klicken/scrollen Nutzer? | Hotjar, Microsoft Clarity |
Barrierefreiheit (Accessibility) im UX-Design
Barrierefreiheit ist ein fundamentaler Bestandteil guten UX-Designs. Laut WHO haben über 1,3 Milliarden Menschen eine Form von Behinderung. Das sind potenzielle Nutzer, die durch schlechtes Accessibility-Design ausgeschlossen werden.
Wichtigste WCAG 2.1-Kriterien:
- Textalternative: Bilder müssen Alt-Texte haben (für Screenreader)
- Kontrast: Mindest-Kontrastverhältnis 4,5:1 für normalen Text
- Tastatur-Navigation: Alle Funktionen müssen ohne Maus erreichbar sein
- Fokus-Indikatoren: Sichtbare Fokus-Hervorhebung bei Tastatur-Navigation
- Formularbeschriftungen: Jedes Formularfeld braucht ein sichtbares Label
- Fehler-Identifikation: Klare Fehlermeldungen mit Lösungshinweisen
- Kein Timing: Keine zeitlich begrenzten Aktionen ohne Verlängerungsoption
Die WCAG-Konformitätsstufen:
- Level A: Minimale Anforderungen
- Level AA: Standard für die meisten Websites (gesetzlich vorgeschrieben für öffentliche Stellen)
- Level AAA: Höchste Anforderungen
In Deutschland gilt seit 2021 das Barrierefreiheitsstärkungsgesetz – ab 2025 auch für viele private Unternehmen verbindlich.
UX-Design und SEO
Gutes UX-Design verbessert SEO direkt:
- Verweildauer: Intuitive, angenehme Nutzung hält Besucher länger auf der Seite
- Bounce Rate: Nutzer, die schnell abspringen, signalisieren Google schlechte Qualität
- Core Web Vitals: LCP, INP und CLS sind gleichzeitig UX- und SEO-Metriken
- Mobile Usability: Mobile-First-Design ist sowohl UX- als auch SEO-Pflicht
- Navigationsstruktur: Klare Informationsarchitektur hilft Nutzern und Crawlern
Kurz: Was für Nutzer gut ist, ist meist auch für SEO gut.
UX auf Landingpages
Auf Landingpages ist UX besonders kritisch, da jede Reibung direkt Conversions kostet. Die wichtigsten UX-Prinzipien:
- Klarer visueller Pfad: Von der Headline zum CTA
- Formular-UX: Inline-Validierung, hilfreiche Fehlermeldungen, minimale Felder
- Loading States: Feedback nach Button-Klick, kein „hat der Klick funktioniert?"-Zweifel
- Trust Signals: Direkt neben dem CTA platziert