Blog
UX vs. UI Design: Wo liegt der Unterschied?

UX vs. UI Design: Wo liegt der Unterschied?

UX Design und UI Design unterscheiden sich auf den ersten Blick nur durch einen einzigen Buchstaben voneinander. Doch hinter dem X und dem I verbergen sich zwei verschiedene Tätigkeitsfelder. Wir erklären dir, was UX Designer und UI Designer genau machen und vor allem, wodurch sich die zwei Arbeitsbereiche voneinander abgrenzen.



UX UI Design: Gemeinsamkeiten

UX und UI Designer konzipieren und gestalten digitale Produkte, wie etwa Websites oder Apps. Manchmal wird ihre Tätigkeit deshalb auch mit den Berufen Webdesigner oder Grafikdesigner verwechselt. Hinter UX UI Design steckt aber noch einiges mehr. Davon können wir uns einen ersten Eindruck verschaffen, wenn wir uns den Buchstaben anschauen, der beide Designer vereint – das U.


Das steht nämlich in beiden Fällen für den User, also den Nutzer oder die Nutzerin der digitalen Produkte. UX bezieht sich dabei auf die User Experience, UI auf das User Interface. Sowohl der UX Designer als auch der UI Designer müssen sich bei ihrer Arbeit also stets in die Perspektive der User hineinversetzen. Diese Sichtweise ist entscheidend, denn die Aufgabe beider Designer ist es, Websites oder Apps so nutzerfreundlich wie möglich zu gestalten. Da UX Designer und UI Designer an diesem Endergebnis oft gemeinsam oder zumindest nacheinander arbeiten, spricht man zusammengefasst auch von UX UI Design.

Unterschied: UX vs. UI Design

Doch wie genau unterscheidet sich die Arbeit von UX und UI Designern nun? Kurz gesagt: UX Design beschreibt den funktionalen Aspekt, UI Design den visuellen. Bei der User Experience (UX) geht es darum, wie sich ein digitales Produkt anfühlt, wie wir mit ihm interagieren oder wie gut es funktioniert. Der Begriff User Interface (UI) beschreibt dagegen, wie das Produkt aussieht, wie es optisch gestaltet ist oder wie wir es ästhetisch wahrnehmen.

Rohbau Baustelle
Der Rohbau eines Gebäudes ist vergleichbar mit dem UX Design.

Als Analogie kannst du dir einen Hausbau vorstellen. Auch hier muss erst der Grundriss stehen, Leitungen sinnvoll verlegt und Wände hochgezogen werden, bevor wir uns entscheiden, welche Farbe die Tapete haben soll oder welche Bilder wir aufhängen möchten. Form follows function.


Was macht ein UX Designer? Beispiele

Die User Experience (UX) ist die Architektur oder das Grundgerüst einer Website. Übersetzt bedeutet User Experience auch Nutzererfahrung oder Nutzererleben. Beim Nutzen einer Website oder einer App können wir nämlich entweder positive oder negative Erfahrungen machen. Ist die UX schlecht designt, so führt das zu Frustration seitens der User. Möglicherweise sind Schaltflächen unlogisch angeordnet, Eingabemasken funktionieren nicht, wir müssen ewig nach dem OK-Button suchen oder uns werden Fehlermeldungen ohne Lösungsvorschlag angezeigt. Ein sehr gutes User Experience Design fällt uns dagegen meist gar nicht erst auf, denn wir interagieren so intuitiv und reibungslos mit dem Produkt, dass wir uns keine Gedanken machen müssen. Das hat nämlich bereits ein UX Designer für uns übernommen.

Doch was genau bedeutet das konkret? Kommen wir zu einigen Beispielen.

  • Wenn wir ein Wort in Google eingeben, öffnet sich ein Drop-Down-Menü mit Suchvorschlägen. Dieses Feature erscheint uns im täglichen Gebrauch als selbstverständlich, ist jedoch das Resultat der Arbeit eines UX Designers.
  • Dass wir uns auf Booking unsere Unterkünfte sowohl in einer Listenansicht als auch auf der Karte anzeigen lassen können, entstammt ebenfalls dem Denkprozess eines UX Designers.
  • Auch die smarte Funktion, in einigen Online-Shops Produkte mit nur einem Klick kaufen zu können, hat sich ein UX Designer überlegt.
  • Viele Apps erfordern hin und wieder einen Bestätigungscode, der uns per SMS zugeschickt wird. Ist die Autofill-Funktion eingeschaltet, erscheint beim Klick in das Eingabefeld ein Button, der uns den soeben erhaltenen Code direkt in der App anzeigt. So bleibt uns das nervige Wechseln zwischen Fenstern sowie das Kopieren und Einfügen des Codes erspart. Nebensächliches Zufallsfeature? Nein. Auch hier war ein genialer UX Designer am Werk.
Google Suchvorschläge für UX Design
Suchvorschläge in Google

AutoFill Funktion, hier auf einem Apple-Gerät dargestellt


Was macht ein UI Designer? Beispiel

iOS Switches
iOS Switches

Nachdem der UX Designer seine Arbeit getan hat, ist der UI Designer dran. Er oder sie gestaltet die Strukturen nun visuell aus. Aber Achtung: UI Design umfasst mehr als reines Grafikdesign. Das Designen des User Interface (UI) hat auch, aber eben nicht ausschließlich damit zu tun, welche Farben oder Schriftarten eingesetzt werden. Beim UI Design geht es darum, die Oberfläche der Website oder der App so zu gestalten, dass sie modern und optisch ansprechend aussieht und gleichzeitig die UX positiv ergänzt und unterstützt. Gewissermaßen ist UI Design ein Teil von UX Design, denn auch das User Interface spielt für die Nutzerfreundlichkeit natürlich eine entscheidende Rolle.

Ein gutes Beispiel dafür sind die Switches in iOS. Sie integrieren sich perfekt in unser Nutzererlebnis, denn sie sind so designt, dass uns auf den ersten Blick klar ist, wann sie ein- und wann ausgeschaltet sind. Wenn du selbst kein Designer bist, hast du das UI Design der Switches vermutlich noch nie weiter hinterfragt. Das musst du aber auch nicht, denn dafür gibt es ja UI Designer. Durch ihre Arbeit kannst du dich zurücklehnen und deine digitale Nutzererfahrung einfach genießen.

Das UX UI Ketchup Meme

Wenn du dich schon einmal mit dem Thema UX vs. UI beschäftigt hast, kennst du vielleicht das berühmte Ketchup Meme. Die vereinfachte Gegenüberstellung musste zwar auch Kritik einstecken, für ein erstes Verständnis kann sie aber dennoch hilfreich sein. Im Meme wird der Unterschied zwischen UX und UI nämlich anhand der bekannten Heinz-Ketchupflasche dargestellt.

UX UI Ketchup Meme
UX UI Ketchup Meme

Die linke Seite zeigt auf, was reines UI Design ohne eine dahinterstehende UX zum Ergebnis hätte: Eine schön anzusehende, hochwertig erscheinende Glasflasche, die jedoch Probleme in der Handhabung aufweist. Wir alle kennen die frustrierenden Versuche, den Inhalt aus dem Glas zu bekommen. Aus einem unerfindlichen Grund kommt anfangs gar kein Ketchup aus der Flasche, dann aber plötzlich ein ganzer See, der im schlimmsten Fall auch noch auf der Hose landet. Dem gegenübergestellt wird die nicht ganz so elegante, dafür aber umso praktischere Plastikflasche als Sinnbild des UX Designs. Mit ihr können wir unseren Dip bequem und genau dosieren.

UX vs UI Design: Fazit

UX Design und UI Design sind beides wichtige Tätigkeitsfelder. Im Gegensatz zur Darstellung im Ketchup Meme sind UX und UI Designer keine Konkurrenten, sondern ergänzen sich in ihrer Arbeit. Nur gemeinsam können sie nämlich digitale Produkte kreieren, die User lieben  – und zwar sowohl aufgrund ihrer Funktionalität als auch ihrer Optik. Wie das am Ende aussieht, kannst du dir hier anschauen.

From our blog