UI und UX: Was ist der Unterschied?

Kurz erklärt

UI und UX sind zwei Aufgaben, die eine steckt in der anderen. UI ist die Fläche, die der Nutzer sieht. UX ist das, was der Nutzer erlebt, einschließlich allem hinter dieser Fläche.

Jeden Begriff für sich habe ich im Glossar beschrieben: Was ist UI (User Interface)? und Was ist UX (User Experience)?. Hier erkläre ich, wie die beiden zusammenhängen und sich unterscheiden. Ich erkläre auch den Titel „UI/UX-Designer“, den Sie in so vielen Stellenanzeigen sehen.

Die Zusammenfassung eines kurzen Videos von Sarah Gibbons (NN/g) aus dem Jahr 2021 nennt die beiden Begriffe „sehr eng verwandt“. Dieselbe Zusammenfassung sagt, dass sie oft verwechselt werden. Nach meiner Erfahrung kommt diese Verwechslung meist von einer falschen Annahme: dass ein Screen, der gut aussieht, auch gut funktioniert.

UI und UX in einem Satz

UI: wie das Produkt aussieht und wie Menschen damit interagieren. Das liegt sehr nah an der Definition in Kate Kaplans Artikel von 2024 bei der NN/g.

UX: jeder Aspekt der Interaktion des Endnutzers mit dem Unternehmen, seinen Diensten und seinen Produkten. Diese Definition haben Don Norman und Jakob Nielsen 1998 geschrieben.

Laut seiner Biografie bei der NN/g war Norman User Experience Architect in einem dreiköpfigen Team bei Apple namens „User Experience Office“. Die Biografie sagt, dass „User Experience“ damit zum ersten Mal in einer Berufsbezeichnung stand.

Norman und Nielsen erklären den Unterschied an einer Website mit Filmkritiken. Die Oberfläche zur Filmsuche kann tadellos sein. Enthält die Datenbank aber nur Filme der großen Studios, ist das Erlebnis für jemanden schlecht, der einen kleinen unabhängigen Film sucht. Der Screen hat die richtige Frage gestellt; das Produkt konnte sie nicht beantworten.

Derselbe Artikel trifft noch eine Unterscheidung. Usability ist ein Qualitätsmerkmal der Oberfläche: ob das System leicht zu erlernen und effizient und angenehm zu nutzen ist. User Experience geht darüber hinaus. Usability behandle ich auf einer eigenen Glossarseite.

UI und UX unter fünf Überschriften

Eine Tabelle zeigt den Unterschied am schnellsten. Jede Zeile stellt die beiden Aufgaben unter derselben Überschrift nebeneinander. Auf dem Handy wird die Tabelle zu gestapelten Karten.

Die Trennung in der Tabelle ist keine harte Wand. Das Glossar der UX-Disziplinen der NN/g von 2026 definiert UI-Design als Kombination aus Interaktionsdesign und visuellem Design. Deshalb ist auch, was ein Button beim Drücken tut, eine UI-Entscheidung.

Laut demselben Glossar heißt UX-Design, Produkte und Dienste so zu gestalten, dass sie benutzbar, nützlich und zweckmäßig sind. Ein UX-Designer übernimmt vielleicht Interaktionsdesign, Informationsarchitektur, Prototyping und einen Teil der Forschung. Der Umfang hängt von der Organisation ab.

Die meisten Ergebnisse in der rechten Spalte sind eigene Begriffe im Glossar. Die Informationsarchitektur ordnet Inhalte; ein Wireframe ist das grobe Gerüst eines Screens. Keins dieser Ergebnisse enthält Farbe, aber alle entscheiden, wie der fertige Screen funktioniert.

Ein Beispiel: der Überweisungsscreen

Stellen Sie sich den Überweisungsscreen in der App einer Bank vor. Die UI-Fragen sind konkret. Wie viele Zeichen zeigt das IBAN-Feld? Öffnet das Betragsfeld eine Zahlentastatur? Liegt „Senden“ dort, wo der Daumen hinkommt?

Die UX-Fragen gehen über den Screen hinaus. Wählt der Nutzer den Empfänger aus einer gespeicherten Liste oder tippt er die IBAN jedes Mal ein? Erfährt er, wann Geld ankommt, das außerhalb der Geschäftszeiten überwiesen wird? Wohin geht der Beleg nach der Überweisung, und bekommt der Empfänger eine Benachrichtigung?

Beide Fragengruppen werden auf demselben Screen beantwortet. Der Unterschied ist, woher die Frage kommt. UI-Fragen entstehen beim Blick auf den Screen; UX-Fragen beim Blick auf das, was der Nutzer an diesem Tag erledigen will.

In diesem Beispiel berührt ein Fehler beide Seiten. Tippt der Nutzer einen falschen Betrag, sollte der Screen das abfangen, bevor das Geld weg ist. Nielsens fünfte Heuristik nennt das Fehlervermeidung. Wie der Fehler angezeigt wird, ist eine UI-Entscheidung; wie der Ablauf gebaut ist, damit er gar nicht passiert, eine UX-Entscheidung.

Derselbe Screen, zwei Zustände

Schnell sehen Sie den Unterschied, wenn Sie zwei Screens mit derselben Aufgabe nebeneinanderstellen. Im Beispiel unten ist die Aufgabe dieselbe: einen Termin in der Kardiologie eines Krankenhauses buchen. Der erste Zustand sieht schöner aus; der zweite erledigt die Aufgabe besser.

Derselbe Screen, zwei Zustände

Zustand 1: schöne UI, schlechte UX

Ihre Gesundheit liegt uns am Herzen.

1

Drei Icons ohne Beschriftung.2

Ihre Patientennummer3

TT.MM.JJJJ

Absenden4

1. Überschrift und Dekoration nehmen die obere Hälfte des Screens ein. Die Felder für die Buchung rutschen nach unten und sind auf dem Handy auf den ersten Blick nicht zu sehen.
2. Die Icons haben keine Beschriftung. Der Nutzer muss raten, welches für Termine und welches für Befunde steht.
3. Der Name des Felds steht im Feld. Beim Tippen verschwindet er, und der Nutzer vergisst vielleicht, was er gerade eingibt.
4. „Absenden“ sagt nicht, was abgeschickt wird. Gewählter Tag und Uhrzeit stehen nirgends auf dem Screen.

Zustand 2: schlichte UI, gute UX

Termin buchen

Schritt 2 von 3

1

Kardiologie. Ändern

2

Datum und Uhrzeit

12. November, 10:30 Uhr (gewählt)12. November, 14:00 Uhr3

Termin bestätigen: 12. November, 10:30 Uhr4

1. Die Überschrift nennt die Aufgabe. „Schritt 2 von 3“ zeigt dem Nutzer, wo er ist.
2. Die im vorherigen Schritt gewählte Fachabteilung bleibt oben stehen. Stimmt sie nicht, ändert ein Tipp sie.
3. Der Name des Felds steht darüber und verschwindet nicht. Die Optionen sind ausgeschrieben, die gewählte ist markiert.
4. Der Button wiederholt Datum und Uhrzeit, also kann der Nutzer vor dem Tippen ein letztes Mal prüfen.

Ein ausgedachter Screen zur Terminbuchung im Krankenhaus, von keiner echten Einrichtung. Wählen Sie einen der beiden Buttons oben: Screen und nummerierte Notizen daneben ändern sich gemeinsam. Ohne JavaScript stehen beide Zustände untereinander.

Keins der Probleme im ersten Zustand hat mit Farbe zu tun. Icons ohne Beschriftung verletzen Nielsens sechste Heuristik, „Wiedererkennen statt Erinnern“. Der Button „Absenden“ zeigt die Wahl nicht und verletzt damit die erste Heuristik, die Sichtbarkeit des Systemstatus. Alle Heuristiken mit Beispielen finden Sie auf der Seite zu Nielsens 10 Heuristiken.

Auch der zweite Zustand ist nicht hässlich. Er stellt nur die Dekoration nicht vor die Aufgabe. Nielsens achte Heuristik nennt das „ästhetisches und minimalistisches Design“: Eine Oberfläche soll keine irrelevanten oder selten gebrauchten Informationen enthalten.

Warum ein schöner Screen auch im Test gut abschneidet

Der erste Zustand gefällt in einem Nutzertest vielleicht sogar. Dafür gibt es einen Namen: den Ästhetik-Usability-Effekt. Kate Moran von der NN/g beschreibt ihn als die Neigung, attraktive Produkte für benutzbarer zu halten.

Der Effekt geht auf eine Studie von 1995 im Hitachi Design Center zurück. Masaaki Kurosu und Kaori Kashimura testeten 26 Varianten einer Geldautomaten-Oberfläche mit 252 Teilnehmenden. Die Schönheitsurteile passten stärker dazu, wie leicht die Teilnehmenden den Screen fanden, als dazu, wie leicht er tatsächlich war.

Wichtiger ist mir die Warnung in Morans Artikel. Ein attraktives Design lässt Menschen kleine Probleme verzeihen, keine großen. Schauen Sie im Test darauf, was der Nutzer tut, nicht was er sagt.

Was dieses Beispiel nicht zeigt

Die beiden Zustände in der Demo vergleichen einen einzelnen Screen. Das echte Erlebnis geht davor und danach weiter. Kommt nach der Buchung keine Erinnerung per SMS, ist auch der zweite Zustand Teil eines schlechten Erlebnisses.

Umgekehrt gilt das auch. Schickt Sie der Empfang im Krankenhaus ins richtige Stockwerk, bleibt ein kleiner Fehler auf dem Screen nicht hängen. Deshalb schaue ich beim Messen von UX auf jeden Schritt vom Anfang bis zum Ende der Aufgabe, nicht auf einen einzelnen Screen.

Der Zusammenhang mit Produktdesign

In Stellenanzeigen taucht noch ein dritter Titel auf: Produktdesigner. Laut dem Glossar der NN/g heißt Produktdesign in Software, ein digitales Produkt von Anfang bis Ende zu gestalten. Ein Produktdesigner denkt Geschäftsziele, Produktstrategie und Nutzer zusammen.

Dasselbe Glossar sagt, dass der Titel „Produktdesigner“ oft für ähnliche Arbeit wie UX-Design verwendet wird. Der Unterschied ist der Fokus auf ein einzelnes Produkt. In manchen Unternehmen verantwortet ein Produktdesigner mehr als die Oberfläche oder arbeitet enger mit dem Produktmanagement.

Ich denke mir die drei Begriffe als ineinander geschachtelte Kästen. Die Zeichnung unten ist kein Standard, sondern die Landkarte in meinem Kopf.

User Experience (UX). Die gesamte Beziehung eines Menschen zu einem Produkt, einem Dienst oder einer Organisation.

Produktdesign. Ein digitales Produkt von Anfang bis Ende gestalten, zusammen mit Geschäftszielen, Produktstrategie und Nutzern.

Interfacedesign (UI). Die Komponenten auf dem Screen und wie sie sich verhalten.

Interaktionsdesign: was Sie drücken und wie das System reagiert.

Visuelles Design: Linie, Form, Farbe, Raster, Raum.

Produktdesign wird auch mit Produktmanagement verwechselt. Das Glossar trennt beides: Produktmanagement entscheidet, was gebaut wird und warum. Produktdesign gestaltet, wie es für den Nutzer funktioniert.

Wer entscheidet was

In einem kleinen Team fallen diese Entscheidungen in derselben Besprechung. Trotzdem verkürzt es die Diskussion, zu wissen, wessen Entscheidung was ist. In Projekten teile ich es ungefähr so auf:

• Produktmanagement: Welches Problem lösen wir in diesem Quartal, und warum dieses?
• Produkt- oder UX-Design: In welchen Schritten erledigt der Nutzer diese Aufgabe, und welche Information braucht er wann?
• UI-Design: Mit welchen Komponenten, in welchem Layout und mit welchen Zuständen erscheinen diese Schritte auf dem Screen?
• Entwicklung: Wie lange dauert der Bau, und innerhalb welcher technischen Grenzen?

Fehlt eine Rolle, wird ihre Frage nicht gestellt. In einem Team ohne UI-Design werden leere Zustände und Fehlerzustände zum Beispiel oft zuletzt und in Eile ergänzt. Stellt niemand die UX-Frage, ist der Screen schön gezeichnet, steht aber an der falschen Stelle im Ablauf.

Ist das Produkt noch neu, fallen die meisten dieser Entscheidungen an einem MVP. In dieser Phase bringt es mehr, zu sehen, ob der Kernablauf funktioniert, als die Oberfläche zu polieren.

Was ein UI/UX-Designer macht

„UI/UX-Designer“ bezeichnet eine Rolle, in der dieselbe Person beide Aufgaben übernimmt. Sie klärt, wie der Nutzer die Aufgabe erledigt, und zeichnet auch die fertigen Screens. Diesen Titel sehe ich am häufigsten in Anzeigen kleiner Teams.

Eine einheitliche Definition des Titels gibt es nicht. Das Glossar der NN/g sagt, dass Titel im Fach nicht standardisiert sind und derselbe Titel an verschiedenen Orten Verschiedenes bedeuten kann. In der Umfrage der NN/g zu UX-Karrieren nannten die Befragten 134 verschiedene Berufsbezeichnungen mit UX-Bezug.

Nach meiner Erfahrung besteht die Woche eines UI/UX-Designers ungefähr aus diesen Teilen:

• Das Problem verstehen. Was will das Team lösen, und wo bleiben Nutzer hängen? Analytics ansehen, Support-Tickets lesen und wenn nötig mit Nutzern sprechen.
• Den Ablauf zeichnen. Die Schritte auflisten, mit denen ein Nutzer eine Aufgabe erledigt, und die überflüssigen hier streichen.
• Das Gerüst bauen. Wireframes und einen klickbaren Prototyp vorbereiten. In dieser Phase gibt es keine Farbe, nur Layout und Inhalt.
• Die Oberfläche gestalten. Komponenten, Farbe und Schrift nach dem Designsystem setzen und die leeren, ladenden und fehlerhaften Zustände nicht vergessen.
• Testen. Den Prototyp ein paar Nutzern geben, beobachten, wo sie zögern, und das Gefundene in der nächsten Runde beheben.
• Mit der Entwicklung arbeiten. Prüfen, dass das Design korrekt im Code ankommt, und die Sonderfälle gemeinsam lösen.

In großen Unternehmen kann jeder Punkt dieser Liste ein eigenes Fachgebiet sein. Auch das Glossar der NN/g sagt deutlich, dass eine Person die Arbeit mehrerer Disziplinen übernehmen kann. In einem kleinen Team heißt „UI/UX“, dass all das am selben Schreibtisch fertig wird.

Anzeigen mit UI-Schwerpunkt, Anzeigen mit UX-Schwerpunkt

Zwei Anzeigen mit demselben Titel können sehr verschiedene Arbeit verlangen. Beim Lesen sagt die Liste der Aufgaben mehr als der Titel.

Stehen in den Aufgaben „Designsystem“, „Komponenten“, „Icons“ oder „Marketingvisuals“, liegt der Schwerpunkt auf UI. Stehen dort „Nutzergespräche“, „Abläufe“, „Tests“ oder „Kennzahlen“, liegt er auf UX. Ist beides ausgewogen, ist es eine echte UI/UX-Rolle.

Für Menschen aus dem Screendesign gibt es eine gute Nachricht. Die Zusammenfassung eines Videos von Rachel Krause (NN/g) aus dem Jahr 2019 sagt, dass jemand, der starke Screens zeichnet, mit einem guten Start in die UX kommt. Sie ergänzt, dass es für Erfolg in der breiteren Rolle mehr braucht. Nach meiner Sicht fehlen meist Forschung und das Denken in Abläufen.

Häufige Irrtümer

Diese Irrtümer höre ich in Audits und ersten Gesprächen am häufigsten.

„UX ist nur ein schickerer Name für UI.“ Ist es nicht. UI ist der Screen selbst; UX umfasst neben dem Screen auch E-Mail, SMS, Callcenter und Lieferung. Auch Kaplans Artikel trennt das klar.

„Wenn wir den Screen neu anstreichen, ist das Problem gelöst.“ Bleiben Nutzer im Checkout hängen, liegt die Ursache meist im Ablauf. In der Geschichte vom 300-Millionen-Dollar-Button war das Problem auch nicht die Farbe des Buttons, sondern der Screen zum Anmelden und Registrieren vor dem Bezahlen.

„Ich habe eine Website gestaltet, also bin ich UX-Designer.“ Kaplans Artikel ist dazu klar: Ein einzelnes Produkt wie eine Website zu gestalten, macht nicht immer zum UX-Designer. UX ist Arbeit, die sich mehr auf Menschen als auf Technik konzentriert.

„Den Nutzern hat es gefallen, also ist es benutzbar.“ Der Ästhetik-Usability-Effekt beschreibt genau diesen Irrtum. Gefallen und Erfolg werden getrennt gemessen.

„UX kommt am Ende dazu.“ UX erst nach dem Zeichnen der Screens anzuschauen, ist, als würde man das Fundament prüfen, wenn das Haus steht. Entscheidungen zu Ablauf und Inhalt kommen vor der Farbe. Dieser Ansatz heißt nutzerzentriertes Design.

„UI ist egal, das zeichnet jetzt die KI.“ Der Bericht der NN/g von 2026 sagt etwas Ausgewogeneres. UI bleibt wichtig, wird aber immer weniger zum Unterscheidungsmerkmal. Laut Bericht kann mit besseren KI-Designwerkzeugen jeder eine Oberfläche bauen, die zumindest aus der Ferne ordentlich aussieht.

„Mit einem Designsystem brauchen wir keinen UX-Designer.“ Ein Designsystem sagt, wie ein Button aussieht, nicht auf welchen Screen er gehört. Der Bericht der NN/g von 2026 sagt auch, dass jemand, der nur Komponenten aus einem Designsystem aneinanderreiht, schon heute durch KI ersetzbar ist.

„UX gibt es nur bei mobilen Apps.“ User Experience gibt es überall, wo ein Screen ist. Das Antragsformular auf der Website einer Gemeinde und der Automat in der Bankfiliale erzeugen beide ein Erlebnis.

Meine Notiz

Die meisten Aufträge, die zu mir kommen, beginnen mit „frischen wir den Screen auf“. Ich stelle die erste Frage: Wo geben Nutzer auf? Die Antwort liegt meist nicht im Aussehen des Screens, sondern in der Reihenfolge der Dinge.

Trotzdem schaue ich nicht auf UI herab. Ein Button-Text, den niemand lesen kann, oder eine Fehlermeldung an der falschen Stelle zerstört das Erlebnis direkt. Auch ein guter Ablauf geht auf einem schlecht gezeichneten Screen verloren.

Deshalb teile ich die beiden Aufgaben nicht gern auf Teams auf. Wenn die Person, die forscht, auch den Screen zeichnet, geht zwischen Befund und Screen nichts verloren. So arbeite ich.

Wenn Sie wissen wollen, in welchem dieser beiden Zustände Ihr Produkt ist, ist der kürzeste Weg der Blick von außen auf einen Flow. Wie das geht, erkläre ich Schritt für Schritt im Ratgeber zum UX-Audit.