Warum alle sie verwechseln
'UI/UX' wird so oft als ein einziges Wort ausgesprochen, dass die meisten Menschen annehmen, es sei ein einziger Job. Ist es nicht — und die Verwechslung ist nicht harmlos. Ein Gründer, der 'UI' denkt, wenn das eigentliche Problem 'UX' ist, stellt einen visuellen Designer ein, um ein Problem zu lösen, das eigentlich im Checkout-Flow liegt, gibt das Budget für einen hübscheren Button aus — und sieht denselben Prozentsatz an Nutzern am selben Schritt abspringen. Die Lösung war nie visuell. Sie war strukturell. Zu wissen, welches der beiden Probleme man wirklich hat, ist der Unterschied zwischen Geld ausgeben und Geld verschwenden.
Die Definitionen, ohne Umschweife
UI — User Interface (Benutzeroberfläche)
Alles, was man sehen und physisch bedienen kann: Buttons, Farben, Typografie, Icons, Abstände, Animationen. UI ist die Oberfläche — die visuelle und interaktive Ebene zwischen Mensch und System. Handwerk, das man per Screenshot festhalten kann.
UX — User Experience (Nutzererfahrung)
Die gesamte Reise, die eine Person zurücklegt, um etwas zu erreichen — wie einfach es ist, wie viele Schritte es braucht, ob es Sinn ergibt, ob sich die Person sicher oder verloren fühlt. UX ist strukturell — man kann sie nicht per Screenshot festhalten, nur messen, in abgeschlossenen und abgebrochenen Aufgaben.
8 Wege, sie zu unterscheiden
Fokus
UI
Wie das Produkt aussieht und sich anfühlt — Farbe, Typografie, Abstände, Icons.
UX
Wie das Produkt für die Person funktioniert, die es nutzt — die gesamte Reise, von Anfang bis Ende.
Die Frage, die beantwortet wird
UI
"Sieht das richtig aus?"
UX
"Ergibt das Sinn?"
Was geliefert wird
UI
Mockups, Styleguides, Komponentenbibliotheken, pixelgenaue Screens.
UX
User-Flows, Wireframes, Personas, Journey-Maps, Usability-Reports.
Werkzeuge des Handwerks
UI
Figma, Farbpaletten, Icon-Sets, Typografieskalen.
UX
Nutzerinterviews, Journey-Maps, A/B-Tests, Analytics, Card Sorting.
Wie Erfolg gemessen wird
UI
Visuelle Konsistenz, Markenausrichtung, ästhetische Wirkung.
UX
Abschlussrate von Aufgaben, Zeit pro Aufgabe, Abbruchrate, Zufriedenheitswert.
Wann es in den Prozess eintritt
UI
Später — sobald der Flow validiert ist, gibt UI ihm ein Gesicht.
UX
Früher — bevor auch nur ein Pixel existiert, entscheidet UX, was der Flow überhaupt ist.
Wie "gut" aussieht
UI
Ein Button, der klickbar aussieht. Konsistente Abstände. Eine kohärente visuelle Sprache.
UX
Ein Checkout, der 3 statt 8 Schritte braucht, weil niemand nachdenken musste.
Wie jede von beiden scheitert
UI
Eine wunderschöne Oberfläche, die niemand bedienen kann — nur Stil, keine Struktur.
UX
Ein Formular, das einwandfrei funktioniert, aber aussieht wie aus 2004 — nur Logik, kein Feinschliff.
Glaubst du, du kannst den Unterschied erkennen? Probier's aus.
Hier sind 6 echte Produktentscheidungen. Entscheide für jede, ob sie die UI oder die UX verbessert — und lies dann die Erklärung. Keine Anmeldung, kein Tracking, nur sechs Sekunden Ehrlichkeit darüber, wie gut du den Unterschied wirklich kennst.
Ein Checkout-Button ist lila, hat abgerundete Ecken und eine dezente Hover-Animation.
Sie sind keine Rivalen — sie brauchen sich gegenseitig
Eine atemberaubende UI um einen verwirrenden Flow herum macht die Verwirrung nur teurer aussehen. Eine brillante UX, begraben unter einer klobigen, inkonsistenten Oberfläche, lässt Menschen etwas misstrauen, das eigentlich funktioniert. Die Websites und Produkte, die konvertieren, sind nie das eine oder das andere — sie sind UX-Entscheidungen (was gebaut wird, in welcher Reihenfolge, mit wie vielen Schritten), ausgedrückt durch UI-Handwerk (wie es sich einmal gebaut anfühlt und aussieht). Keines der beiden repariert, was das andere kaputt gemacht hat.
Brauchst du eine Website, bei der UX und UI wirklich zusammenpassen?
Lass uns reden →About
Patrick Chen — unabhängiger Entwickler und Webdesigner hinter Sublimearts.io. Ich werde öfter gebeten, 'die UI zu verbessern', als das eigentliche Problem tatsächlich die UI ist. Meistens ist es der Flow. Das ist der Artikel, den ich mir wünschte, einfach schicken zu können, statt es jedes Mal zu erklären.